Angular 多模塊項目構建

引言

兩個月前，已存在錄題系統，須要構建出題系統，且兩套系統存在公用的實體、組件以及服務，如何在構建新系統的同時複用原系統的代碼成爲了項目難點。

當時的解決方案是將兩個系統放在一個應用裏，併爲該應用配置兩套構建方案，當進行ng serve或ng build時，加載相應配置，動態構建出兩套系統，從而解決了共享代碼的問題。

如今再去看Angular，理解又不一樣了。

新的思想與理解都源於後端的思考，在構建後端項目時，爲了實現代碼複用，會構建多模塊。

就像下圖所示同樣，通用的代碼放在Core與Common模塊中，各業務模塊依賴這兩個模塊，經過模塊間依賴實現代碼複用。

那麼問題就來了，在Angular裏，咱們可不能夠像後臺同樣去構建多模塊項目，以達到複用的目的呢？

實現

參考學習

以前一直使用Angular Multi Module做爲關鍵字進行搜索，結果查詢出來的都是多模塊惰性加載的文章，參考意義不大。

直到最近才發現以前搜索的關鍵字錯誤，應該是Angular Multi Library And Application。

具體學習請參考如下兩篇文章:

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，成功。

總結

志士惜日短，愁人知夜長。 ——魏晉·傅玄《雜詩》