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 相关文章推荐
经典海量jQuery插件 大家可以收藏一下
Feb 07 Javascript
document.createElement()用法及注意事项(ff下不兼容)
Mar 13 Javascript
JavaScript中匿名、命名函数的性能测试
Sep 04 Javascript
Jquery简单实现GridView行高亮的方法
Jun 15 Javascript
JS实现转动随机数抽奖特效代码
Apr 16 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
Feb 02 Javascript
webpack 1.x升级过程中的踩坑总结大全
Aug 09 Javascript
微信web端后退强制刷新功能的实现代码
Mar 04 Javascript
js中Array对象的常用遍历方法详解
Jan 17 Javascript
详解利用eventemitter2实现Vue组件通信
Nov 04 Javascript
element的el-table中记录滚动条位置的示例代码
Nov 06 Javascript
javaScript中indexOf用法技巧
Nov 26 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
linux php mysql数据库备份实现代码
2009/03/10 PHP
PHP 八种基本的数据类型小结
2011/06/01 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
对xmlHttp对象方法和属性的理解
2011/01/17 Javascript
JQuery调webservice实现邮箱验证(检测是否可用)
2013/05/21 Javascript
JavaScript中的操作符==与===介绍
2014/12/31 Javascript
IE及IE6浏览器中判断JS文件加载成功失败的方法
2015/02/18 Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
2015/03/18 Javascript
删除javascript所创建子节点的方法
2015/05/21 Javascript
很棒的js选项卡切换效果
2016/07/15 Javascript
JavaScript函数中的this四种绑定形式
2017/08/15 Javascript
vue-router 实现导航守卫(路由卫士)的实例代码
2018/09/02 Javascript
jstree中的checkbox默认选中和隐藏示例代码
2019/12/29 Javascript
JS字符串和数组如何实现相互转化
2020/07/02 Javascript
解决vant-UI库修改样式无效的问题
2020/11/03 Javascript
[31:01]2014 DOTA2国际邀请赛中国区预选赛5.21 CNB VS Orenda
2014/05/23 DOTA
python通过urllib2爬网页上种子下载示例
2014/02/24 Python
Python中使用第三方库xlrd来读取Excel示例
2015/04/05 Python
python复制文件到指定目录的实例
2018/04/27 Python
对python xlrd读取datetime类型数据的方法详解
2018/12/26 Python
pyqt5实现俄罗斯方块游戏
2019/01/11 Python
如何使用Python 打印各种三角形
2019/06/28 Python
python输出电脑上所有的串口名的方法
2019/07/02 Python
在linux系统下安装python librtmp包的实现方法
2019/07/22 Python
基于SQLAlchemy实现操作MySQL并执行原生sql语句
2020/06/10 Python
Python中random模块常用方法的使用教程
2020/10/04 Python
将n个数按输入顺序的逆序排列,用函数实现
2012/11/14 面试题
能否解释一下XSS cookie盗窃是什么意思
2012/06/02 面试题
环境工程毕业生自荐信
2013/11/17 职场文书
财务部出纳岗位职责
2013/12/22 职场文书
年会主持词结束语
2014/03/27 职场文书
办公室打字员岗位职责
2014/04/16 职场文书
民主生活会对照检查材料范文
2014/10/01 职场文书
2015暑期工社会实践报告
2015/07/13 职场文书
高中物理教学反思
2016/02/19 职场文书
mysql 生成连续日期及变量赋值
2022/03/20 MySQL