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从头学起第一讲
Jul 04 Javascript
js+css实现的简单易用兼容好的分页
Dec 30 Javascript
JS日期格式化之javascript Date format
Oct 01 Javascript
JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果
Nov 26 Javascript
jquery遍历json对象集合详解
May 18 Javascript
canvas轨迹回放功能实现
Dec 20 Javascript
vuejs简单验证码功能完整示例
Jan 08 Javascript
Vue源码探究之虚拟节点的实现
Apr 17 Javascript
构建Vue大型应用的10个最佳实践(小结)
Nov 07 Javascript
elementui更改el-dialog关闭按钮的图标d的示例代码
Aug 04 Javascript
JavaScript用document.write()输出换行的示例代码
Nov 26 Javascript
VUE解决跨域问题Access to XMLHttpRequest at
May 06 Vue.js
小程序卡片切换效果组件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-fpm的两种进程管理模式详解
2013/06/03 PHP
浅析PHP中strlen和mb_strlen的区别
2014/08/31 PHP
ThinkPHP打开验证码页面显示乱码的解决方法
2014/12/18 PHP
ZF框架实现发送邮件的方法
2015/12/03 PHP
jquery的index方法实现tab效果
2011/02/16 Javascript
整理一些JavaScript的IE和火狐的兼容性注意事项
2011/03/17 Javascript
原来Jquery.load的方法可以一直load下去
2011/03/28 Javascript
JQuery入门基础小实例(1)
2015/09/17 Javascript
AngularJS 日期格式化详解
2015/12/23 Javascript
js创建jsonArray传输至后台及后台全面解析
2016/04/11 Javascript
基于JQuery实现图片上传预览与删除操作
2016/05/24 Javascript
jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
2016/06/12 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
2016/11/22 Javascript
NodeJs测试框架Mocha的安装与使用
2017/03/28 NodeJs
node+koa实现数据mock接口的方法
2017/09/20 Javascript
js定时器+简单的动画效果实例
2017/11/10 Javascript
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法
2018/04/25 Javascript
Vue动画事件详解及过渡动画实例
2019/02/09 Javascript
node命令行工具之实现项目工程自动初始化的标准流程
2019/08/12 Javascript
Vue学习之axios的使用方法实例分析
2020/01/06 Javascript
如何用JS模拟实现数组的map方法
2020/07/30 Javascript
vue treeselect获取当前选中项的label实例
2020/08/31 Javascript
python数字图像处理之高级滤波代码详解
2017/11/23 Python
对Python中type打开文件的方式介绍
2018/04/28 Python
Pytorch 实现数据集自定义读取
2020/01/18 Python
python用pip install时安装失败的一系列问题及解决方法
2020/02/24 Python
利用python控制Autocad:pyautocad方式
2020/06/01 Python
使用HTML5和CSS3表单验证功能
2017/05/05 HTML / CSS
使用layui实现左侧菜单栏及动态操作tab项的方法
2020/11/10 HTML / CSS
大学毕业的自我鉴定
2013/10/08 职场文书
开学典礼感言
2014/02/16 职场文书
学校募捐倡议书
2014/05/14 职场文书
创先争优活动心得体会
2014/09/04 职场文书
会计岗位职责
2015/02/03 职场文书
pytorch 中nn.Dropout的使用说明
2021/05/20 Python
Redis分布式锁Redlock的实现
2021/08/07 Redis