引言

兩個月前，已存在錄題系統(tǒng)，需要構(gòu)建出題系統(tǒng)，且兩套系統(tǒng)存在公用的實體、組件以及服務(wù)，如何在構(gòu)建新系統(tǒng)的同時復(fù)用原系統(tǒng)的代碼成為了項目難點。

當(dāng)時的解決方案是將兩個系統(tǒng)放在一個應(yīng)用里，并為該應(yīng)用配置兩套構(gòu)建方案，當(dāng)進(jìn)行 ng serve 或 ng build 時，加載相應(yīng)配置，動態(tài)構(gòu)建出兩套系統(tǒng)，從而解決了共享代碼的問題。

現(xiàn)在再去看 Angular ，理解又不同了。

新的思想與理解都源于后端的思考，在構(gòu)建后端項目時，為了實現(xiàn)代碼復(fù)用，會構(gòu)建多模塊。

就像下圖所示一樣，通用的代碼放在 Core 與 Common 模塊中，各業(yè)務(wù)模塊依賴這兩個模塊，通過模塊間依賴實現(xiàn)代碼復(fù)用。

那么問題就來了，在 Angular 里，我們可不可以像后臺一樣去構(gòu)建多模塊項目，以達(dá)到復(fù)用的目的呢？

實現(xiàn)

參考學(xué)習(xí)

之前一直使用 Angular Multi Module 作為關(guān)鍵字進(jìn)行搜索，結(jié)果查詢出來的都是多模塊惰性加載的文章，參考意義不大。

直到最近才發(fā)現(xiàn)之前搜索的關(guān)鍵字錯誤，應(yīng)該是 Angular Multi Library And Application 。

具體學(xué)習(xí)請參考以下兩篇文章:

ANGULAR WORKSPACES: MULTI-APPLICATION PROJECTS

創(chuàng)建庫 - ANGULAR官方文檔

初始化命令

創(chuàng)建一個 Angular 項目，其名為 angular-project ，不創(chuàng)建 Application ，不進(jìn)行交互，跳過依賴的安裝。

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

生成庫 common ，生成應(yīng)用 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

項目結(jié)構(gòu)

最終的項目結(jié)構(gòu)長這樣，所有模塊位于 projects 目錄下。

Angular Library 的結(jié)構(gòu)如下，就像平常用的一樣，也有 Module ， Module 中包含組件、服務(wù)等等。

同時我們開始反思之前用過的 ShareModule ，其實我們應(yīng)該將其做成一個 Angular Library ，并將其發(fā)布到 npm 倉庫，這樣在多個項目之間快速移植公共模塊也更高效快捷。

但是在開發(fā)過程中，共享模塊可能有所改動，頻繁發(fā)布就有些麻煩，如何直接引用本地的模塊呢？

構(gòu)建 common 庫：

ng build common

如果該庫頻繁改動的話，可以添加監(jiān)聽參數(shù)，文件修改后自動構(gòu)建：

ng build common --watch

命令執(zhí)行后會在 dist 目錄生成構(gòu)建成功的 common 庫。

使用起來就像我們使用的其他 Angular 庫一樣，直接 import ， WebStorm 會自動提示。

import 
{ 
CommonModule
 } 
from 'common';

測試

在業(yè)務(wù)模塊中引入 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>

注：庫組件生成的默認(rèn)前綴是 lib 。

進(jìn)入業(yè)務(wù)組件進(jìn)行 ng serve ，成功。

總結(jié)

以上所述是小編給大家介紹的Angular 多模塊項目構(gòu)建過程，希望對大家有所幫助！

最新評論