怎么在Angular中部署一個多模塊項目

這篇文章將為大家詳細講解有關怎么在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 。

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

注：庫組件生成的默認前綴是 lib 。

進入業務組件進行 ng serve ，成功。

關于怎么在Angular中部署一個多模塊項目就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。