Anglar多モジュールプロジェクト構築プロセス

4076 ワード

アングラーアイテムビルド

ことばを引く
二ヶ月前に、問題システムが既に存在しています。出題システムを構築する必要があります。また、二つのシステムは共通の実体、コンポーネント及びサービスがあります。どのように新しいシステムを構築しながら、元システムのコードを多重化するかは、プロジェクトの難点となります。
その時の解決策は、2つのシステムを1つのアプリケーションに配置し、このアプリケーションのために2つの構成を構成し、ng serveまたはng buildを行うと、対応する構成をロードし、2つのシステムを動的に構築し、コード共有の問題を解決した。
今からAngularを見に行きます。理解はまた違います。
新しい思想と理解はバックエンドからの思考であり、バックエンドプロジェクトを構築する時、コード多重化を実現するために、マルチモジュールを構築する。
次の図のように、汎用コードはCoreとCommonモジュールにおいて、各サービスモジュールはこの2つのモジュールに依存し、モジュール間依存によるコード多重化を実現する。

問題が来ました。Angularでは、多重化の目的を達成するために、バックグラウンドのようにマルチモジュールプロジェクトを構築してもいいですか？
実現する
参考にする
以前はAngular Multi Moduleをキーワードとして検索していましたが、検索したのは多モジュールの不活性なローディングの記事です。
最近になって検索されたキーワードのエラーが見つかりました。Angular Multi Library And Applicationです。
具体的な学習は以下の2つの文章を参照してください。
ANGULAR WORKSPACES：MULTI-APPLICATION PROJECTS
ライブラリ-ANGULAR公式文書を作成します。
初期化コマンドAngularプロジェクトを作成します。angular-projectという名前で、Applicationを作成しないで、相互作用を行わないで、依存のインストールをスキップします。


ng new angular-project
 --createApplication=false 
--interactive=false 
--skipInstall=true

ライブラリcommonは、アプリケーションssoを生成し、依存インストールをスキップする。


ng g library common
 --skipInstall=true
ng g application sso 
--style=scss 
--routing=true
 --skipInstall=true

インストール依存:


npm install 
--registry=https://registry.npm.taobao.org

プロジェクト構造
最終的なプロジェクト構造長は、このように全モジュールがprojectsディレクトリの下にある。

Angular Libraryの構成は、一般的に使われているように、Module、Moduleにコンポーネント、サービスなどが含まれている。

同時に私達は以前使ったShareModuleを反省し始めました。実は私達はそれをAngular Libraryに作って、npm倉庫に発表します。このように複数のプロジェクトの間で公共モジュールを高速に移植するのも効率的です。
しかし、開発の過程で、共有モジュールが変更される可能性があります。頻繁に公開するのはちょっと面倒です。現地のモジュールを直接引用するにはどうすればいいですか？
構築commonライブラリ：ng build commonこのライブラリが頻繁に変更されると、モニターパラメータを追加できます。ファイルの修正後に自動的に構築されます。ng build common --watchコマンド実行後、distディレクトリに構築に成功したcommonライブラリが生成されます。

私たちが使っている他のAngularライブラリのように、直接import、WebStormは自動的に提示されます。


import 
{ 
CommonModule
 } 
from 'common';

テスト
業務モジュールにCommonModuleを導入する。


import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CommonModule } from 'common';

@NgModule({
 declarations: [
  AppComponent
 ],
 imports: [
  BrowserModule,
  AppRoutingModule,
  CommonModule
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

AppComponentコンポーネントには、CommonModuleのCommonComponentが使用される。


<h1>App Component HTML</h1> 
<lib-common></lib-common>

注：ライブラリコンポーネントが生成するデフォルトのプレフィックスはlibである。
ビジネスコンポーネントに入ってng serveを行い、成功しました。

締め括りをつける
以上は小编で绍介したAnglar多モジュールプロジェクトの构筑プロセスです。みなさんに助けてもらいたいです。

cmdコマンドで変更ファイルの作成時間を実現します。

oracleの表空間実例詳細解