引言

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

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

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

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

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

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

實現(xiàn)

參考學習

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

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

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

ANGULAR WORKSPACES: MULTI-APPLICATION PROJECTS

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

初始化命令

創(chuàng)建一個 Angular 項目，其名為 angular-project ，不創(chuàng)建 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 ，并將其發(fā)布到 npm 倉庫，這樣在多個項目之間快速移植公共模塊也更高效快捷。

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

構建 common 庫：

ng build common

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

ng build common --watch

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

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

import 
{ 
CommonModule
 } 
from 'common';

測試

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

進入業(yè)務組件進行 ng serve ，成功。

總結

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

最新評論