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 相关文章推荐
javascript 闭包
Sep 15 Javascript
JS原型对象通俗&quot;唱法&quot;
Dec 27 Javascript
Jquery 模拟用户点击超链接或者按钮的方法
Oct 25 Javascript
jQuery获取节点和子节点文本的方法
Jul 22 Javascript
angularjs 源码解析之scope
Aug 22 Javascript
javascript比较语义化版本号的实现代码
Sep 09 Javascript
JS 实现Base64编码与解码实例详解
Nov 07 Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
Feb 17 Javascript
关于ES6箭头函数中的this问题
Feb 27 Javascript
webpack公共组件引用路径简化小技巧
Jun 15 Javascript
vue使用代理解决请求跨域问题详解
Jul 24 Javascript
JavaScript创建、读取和删除cookie
Sep 03 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 编写安全的代码时容易犯的错误小结
2010/05/20 PHP
PHP取进制余数函数代码
2012/01/19 PHP
php 发送带附件邮件示例
2014/01/23 PHP
PHP flush 函数使用注意事项
2016/08/26 PHP
PHP实现的回溯算法示例
2017/08/15 PHP
基于Laravel实现的用户动态模块开发
2017/09/21 PHP
JavaScript Eval 函数使用
2010/03/23 Javascript
javascript各浏览器中option元素的表现差异
2011/04/07 Javascript
jquery ui对话框实例代码
2013/05/10 Javascript
Sequelize中用group by进行分组聚合查询
2016/12/12 Javascript
简单易懂的天气插件(代码分享)
2017/02/04 Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
2017/05/07 Javascript
解决微信二次分享不显示摘要和图片的问题
2017/08/18 Javascript
layui结合form,table的全选、反选v1.0示例讲解
2018/08/15 Javascript
JavaScript的词法结构精华篇
2018/10/17 Javascript
详解Vscode中使用Eslint终极配置大全
2019/11/08 Javascript
vuex实现数据状态持久化
2019/11/11 Javascript
[05:59]2018DOTA2国际邀请赛寻真——只为胜利的Secret
2018/08/13 DOTA
Python functools模块学习总结
2015/05/09 Python
基于Python的接口测试框架实例
2016/11/04 Python
浅谈python 里面的单下划线与双下划线的区别
2017/12/01 Python
用python统计代码行的示例(包括空行和注释)
2018/07/24 Python
python单线程下实现多个socket并发过程详解
2019/07/27 Python
python 数据生成excel导出(xlwt,wlsxwrite)代码实例
2019/08/23 Python
基于python实现把图片转换成素描
2019/11/13 Python
django序列化serializers过程解析
2019/12/14 Python
django框架单表操作之增删改实例分析
2019/12/16 Python
HTML5的革新 结构之美
2011/06/20 HTML / CSS
Html5之title吸顶功能
2018/06/04 HTML / CSS
荷兰鞋子在线:Nelson Schoenen
2017/12/25 全球购物
英国和世界各地鲜花速递专家:Arena Flowers
2018/02/10 全球购物
财务会计专业求职信范文
2013/12/31 职场文书
超市优秀员工事迹材料
2014/05/01 职场文书
幸福家庭标语
2014/06/27 职场文书
寝室长工作失责检讨书
2014/10/06 职场文书
如何写好开幕词?
2019/06/24 职场文书