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的一行代码轻松实现拖动效果
Dec 28 Javascript
从数组中随机取x条不重复数据的JS代码
Dec 24 Javascript
jquery中append()与appendto()用法分析
Nov 14 Javascript
JavaScript Window浏览器对象模型方法与属性汇总
Apr 20 Javascript
jQuery插件ajaxfileupload.js实现上传文件
Oct 23 Javascript
js判断浏览器是否支持严格模式的方法
Oct 04 Javascript
javascript实现日期三级联动下拉框选择菜单
Dec 03 Javascript
vue-star评星组件开发实例
Mar 01 Javascript
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
vue实现标签云效果的方法详解
Aug 28 Javascript
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
Nov 12 Javascript
JavaScript 实现自己的安卓手机自动化工具脚本(推荐)
May 13 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中的字符串函数
2006/11/24 PHP
php jquery 多文件上传简单实例
2013/12/23 PHP
php版微信自动登录并获取昵称的方法
2016/09/23 PHP
php利用云片网实现短信验证码功能的示例代码
2017/11/18 PHP
PHP addslashes()函数讲解
2019/02/03 PHP
Javascript实例教程(19) 使用HoTMetal(5)
2006/12/23 Javascript
Nodejs学习笔记之测试驱动
2015/04/16 NodeJs
jQuery实现网页抖动的菜单抖动效果
2015/08/07 Javascript
JavaScript中的call方法和apply方法使用对比
2015/08/12 Javascript
jQuery数组处理函数整理
2016/08/03 Javascript
深入理解AngularJS中的ng-bind-html指令和$sce服务
2016/09/08 Javascript
JavaScript中原型链存在的问题解析
2016/09/25 Javascript
js封装成插件的步骤方法
2017/09/11 Javascript
nuxt+axios解决前后端分离SSR的示例代码
2017/10/24 Javascript
如何将HTML字符转换为DOM节点并动态添加到文档中详解
2018/08/19 Javascript
微信小程序和H5页面间相互跳转代码实例
2019/09/19 Javascript
小程序实现左滑删除的效果的实例代码
2020/10/19 Javascript
JavaScript快速调试的两个技巧
2020/11/04 Javascript
详解Python中的文本处理
2015/04/11 Python
Python中Threading用法详解
2017/12/27 Python
Python 使用with上下文实现计时功能
2018/03/09 Python
简单了解Django ContentType内置组件
2019/07/23 Python
Python使用matplotlib实现交换式图形显示功能示例
2019/09/06 Python
Django+boostrap 美化admin后台的操作
2020/03/11 Python
全网最详细的PyCharm+Anaconda的安装过程图解
2021/01/25 Python
美国山地自行车、露营、户外装备和服装购物网站:Aventuron
2018/05/05 全球购物
伦敦剧院门票:London Theatre Direct
2018/11/21 全球购物
Pandora西班牙官方商店:PandoraShop.es
2020/10/05 全球购物
给水工程专业毕业生自荐信
2014/01/28 职场文书
超市重阳节活动方案
2014/02/10 职场文书
反四风个人对照检查材料
2014/09/26 职场文书
办公室日常管理制度
2015/08/04 职场文书
Python初识逻辑与if语句及用法大全
2021/08/07 Python
golang用type-switch判断interface的实际存储类型
2022/04/14 Golang
Redis 异步机制
2022/05/15 Redis
Win10此设备不支持接收Miracast无法投影的解决方法
2022/07/07 数码科技