Angular 多模块项目构建过程


Posted in Javascript onFebruary 13, 2020

引言

两个月前,已存在录题系统,需要构建出题系统,且两套系统存在公用的实体、组件以及服务,如何在构建新系统的同时复用原系统的代码成为了项目难点。

当时的解决方案是将两个系统放在一个应用里,并为该应用配置两套构建方案,当进行 ng serveng build 时,加载相应配置,动态构建出两套系统,从而解决了共享代码的问题。

现在再去看 Angular ,理解又不同了。

新的思想与理解都源于后端的思考,在构建后端项目时,为了实现代码复用,会构建多模块。

就像下图所示一样,通用的代码放在 CoreCommon 模块中,各业务模块依赖这两个模块,通过模块间依赖实现代码复用。

Angular 多模块项目构建过程

那么问题就来了,在 Angular 里,我们可不可以像后台一样去构建多模块项目,以达到复用的目的呢?

实现

参考学习

之前一直使用 Angular Multi Module 作为关键字进行搜索,结果查询出来的都是多模块惰性加载的文章,参考意义不大。

直到最近才发现之前搜索的关键字错误,应该是 Angular Multi Library And Application

具体学习请参考以下两篇文章:

ANGULAR WORKSPACES: MULTI-APPLICATION PROJECTS

创建库 - 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 多模块项目构建过程

Angular Library 的结构如下,就像平常用的一样,也有 ModuleModule 中包含组件、服务等等。

Angular 多模块项目构建过程

同时我们开始反思之前用过的 ShareModule ,其实我们应该将其做成一个 Angular Library ,并将其发布到 npm 仓库,这样在多个项目之间快速移植公共模块也更高效快捷。

但是在开发过程中,共享模块可能有所改动,频繁发布就有些麻烦,如何直接引用本地的模块呢?

构建 common 库:

ng build common

如果该库频繁改动的话,可以添加监听参数,文件修改后自动构建:

ng build common --watch

命令执行后会在 dist 目录生成构建成功的 common 库。

Angular 多模块项目构建过程

使用起来就像我们使用的其他 Angular 库一样,直接 importWebStorm 会自动提示。

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

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

注:库组件生成的默认前缀是 lib

进入业务组件进行 ng serve ,成功。

Angular 多模块项目构建过程

总结

以上所述是小编给大家介绍的Angular 多模块项目构建过程,希望对大家有所帮助!

Javascript 相关文章推荐
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
Feb 15 Javascript
ECMAScript 创建自己的js类库
Nov 22 Javascript
js 获取计算后的样式写法及注意事项
Feb 25 Javascript
JavaScript对象学习经验整理
Oct 12 Javascript
搭建pomelo 开发环境
Jun 24 Javascript
js实现类似菜单风格的TAB选项卡效果代码
Aug 28 Javascript
jquery的幻灯片图片切换效果代码分享
Sep 07 Javascript
实用jquery操作表单元素的简单代码
Jul 04 Javascript
angularjs实现文字上下无缝滚动特效代码
Sep 04 Javascript
JS限制条件补全问题实例分析
Dec 16 Javascript
react.js使用webpack搭配环境的入门教程
Aug 14 Javascript
vue根据值给予不同class的实例
Sep 29 Javascript
小程序卡片切换效果组件wxCardSwiper的实现
Feb 13 #Javascript
JavaScript实现省市区三级联动
Feb 13 #Javascript
jquery传参及获取方式(两种方式)
Feb 13 #jQuery
JS实现页面数据懒加载
Feb 13 #Javascript
node.js中fs文件系统模块的使用方法实例详解
Feb 13 #Javascript
原生JS与JQ获取元素的区别详解
Feb 13 #Javascript
node.js中path路径模块的使用方法实例分析
Feb 13 #Javascript
You might like
PHP数据过滤的方法
2013/10/30 PHP
PHP文件操作实例总结
2016/09/27 PHP
php 中htmlentities导致中文无法查询问题
2018/09/10 PHP
JQuery slideshow的一个小问题(如何发现及解决过程)
2013/02/06 Javascript
jQuery prev ~ siblings选择器使用介绍
2013/08/09 Javascript
Javascript中克隆一个数组的实现代码
2013/12/06 Javascript
JS执行删除前的判断代码
2014/02/18 Javascript
点击显示指定元素隐藏其他同辈元素的方法
2014/02/19 Javascript
JQuery radio(单选按钮)操作方法汇总
2015/04/15 Javascript
基于javascript html5实现3D翻书特效
2016/03/14 Javascript
Angular.js实现注册系统的实例详解
2016/12/18 Javascript
js实现微博发布小功能
2017/01/12 Javascript
canvas实现图像放大镜
2017/02/06 Javascript
详解ECMAScript6入门--Class对象
2017/04/27 Javascript
JS实现读取xml内容并输出到div中的方法示例
2018/04/19 Javascript
vue 中固定导航栏的实例代码
2019/11/01 Javascript
js实现简易拖拽的示例
2020/10/26 Javascript
python+Django+apache的配置方法详解
2016/06/01 Python
利用python实现xml与数据库读取转换的方法
2017/06/17 Python
分析Python中解析构建数据知识
2018/01/20 Python
对Pandas MultiIndex(多重索引)详解
2018/11/16 Python
使用keras实现BiLSTM+CNN+CRF文字标记NER
2020/06/29 Python
django美化后台django-suit的安装配置操作
2020/07/12 Python
有750多个顶级品牌的瑞士时尚在线:ABOUT YOU
2017/01/04 全球购物
空指针到底是什么
2012/08/07 面试题
年终晚会主持词
2014/03/25 职场文书
《大海那边》教学反思
2014/04/09 职场文书
国际商务英语专业求职信
2014/07/08 职场文书
酒店七夕情人节活动策划方案
2014/08/24 职场文书
中秋晚会活动方案
2014/08/31 职场文书
交通安全横幅标语
2014/10/07 职场文书
小学生作文评语集锦
2014/12/25 职场文书
大班下学期个人总结
2015/02/13 职场文书
解除处分决定书
2015/06/25 职场文书
穆斯林的葬礼读书笔记
2015/06/26 职场文书
Nginx实现会话保持的两种方式
2022/03/18 Servers