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