怎么在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中部署一个多模块项目就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。