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 相关文章推荐
学习ExtJS Column布局
Oct 08 Javascript
js 处理数组重复元素示例代码
Dec 27 Javascript
JavaScript实现简单获取当前网页网址的方法
Nov 09 Javascript
基于JavaScript实现图片点击弹出窗口而不是保存
Feb 06 Javascript
Jquery中map函数的用法
Jun 03 Javascript
Highcharts学习之数据列
Aug 03 Javascript
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 jQuery
实例详解JSON取值(key是中文或者数字)方式
Aug 24 Javascript
详解js访问对象的属性和方法
Oct 25 Javascript
js变量声明var使用与不使用的区别详解
Jan 21 Javascript
基于vue+axios+lrz.js微信端图片压缩上传方法
Jun 25 Javascript
JS+DIV实现拖动效果
Feb 11 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访问查询mysql数据的三种方法
2006/10/09 PHP
在PHP上显示JFreechart画的统计图方法
2013/11/03 PHP
PHP6 中可能会出现的新特性预览
2014/04/04 PHP
php获取url参数方法总结
2014/11/13 PHP
解决laravel上传图片之后,目录有图片,但是访问不到(404)的问题
2019/10/14 PHP
jquery学习笔记 用jquery实现无刷新登录
2011/08/08 Javascript
JavaScript 代码压缩工具小结
2012/02/27 Javascript
php基于redis处理session的方法
2016/03/14 Javascript
Angular页面间切换及传值的4种方法
2016/11/04 Javascript
Vue.js学习之过滤器详解
2017/01/22 Javascript
node.js + socket.io 实现点对点随机匹配聊天
2017/06/30 Javascript
JS时间控制实现动态效果的实例讲解
2017/07/31 Javascript
详细分析jsonp的原理和实现方式
2017/11/20 Javascript
vue-cli下的vuex的简单Demo图解(实现加1减1操作)
2018/02/26 Javascript
微信小程序用户信息encryptedData详解
2018/08/24 Javascript
vue+layui实现select动态加载后台数据的例子
2019/09/20 Javascript
python搭建简易服务器分析与实现
2012/12/15 Python
在Python中关于中文编码问题的处理建议
2015/04/08 Python
在Linux命令行终端中使用python的简单方法(推荐)
2017/01/23 Python
python之matplotlib学习绘制动态更新图实例代码
2018/01/23 Python
利用python numpy+matplotlib绘制股票k线图的方法
2019/06/26 Python
解决python gdal投影坐标系转换的问题
2020/01/17 Python
tensorflow对图像进行拼接的例子
2020/02/05 Python
利用canvas实现图片压缩的示例代码
2018/07/17 HTML / CSS
Waterford美国官网:爱尔兰水晶制品品牌
2017/04/26 全球购物
Origins加拿大官网:雅诗兰黛集团高端植物护肤品牌
2017/11/19 全球购物
英国领先的瓷砖专家:Walls and Floors
2018/04/27 全球购物
澳大利亚优质葡萄酒专家:Vintage Cellars
2019/01/08 全球购物
介绍一下linux文件系统分配策略
2013/02/25 面试题
幼儿园课题实施方案
2014/05/14 职场文书
高效课堂标语
2014/06/26 职场文书
小学毕业典礼演讲稿
2014/09/09 职场文书
青年岗位能手事迹材料
2014/12/23 职场文书
单身申明具结书
2015/02/26 职场文书
干货:如何写好观后感 !
2019/05/21 职场文书
go:垃圾回收GC触发条件详解
2021/04/24 Golang