引言

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

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

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

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

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

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

實(shí)現(xiàn)

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

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

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

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

ANGULAR WORKSPACES: MULTI-APPLICATION PROJECTS

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

初始化命令

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

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

生成庫(kù) common ，生成應(yīng)用 sso ，跳過(guò)依賴的安裝。

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

安裝依賴：

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

項(xiàng)目結(jié)構(gòu)

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

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

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

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

構(gòu)建 common 庫(kù)：

ng build common

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

ng build common --watch

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

使用起來(lái)就像我們使用的其他 Angular 庫(kù)一樣，直接 import ， WebStorm 會(huì)自動(dòng)提示。

import 
{ 
CommonModule
 } 
from 'common';

測(cè)試

在業(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>

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

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

總結(jié)

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

最新評(píng)論