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 相关文章推荐
数组方法解决JS字符串连接性能问题有争议
Jan 12 Javascript
jquery插件star-rating.js实现星级评分特效
Apr 15 Javascript
jquery ztree实现模糊搜索功能
Feb 25 Javascript
Bootstrap+jfinal实现省市级联下拉菜单
May 30 Javascript
JS常用知识点整理
Jan 21 Javascript
setTimeout函数的神奇使用
Feb 26 Javascript
React Native之ListView实现九宫格效果的示例
Aug 02 Javascript
vue2.0 如何把子组件的数据传给父组件(推荐)
Jan 15 Javascript
js中的this的指向问题详解
Aug 29 Javascript
iview form清除校验状态的实现
Sep 19 Javascript
Vue基础配置讲解
Nov 29 Javascript
使用JavaScript和MQTT开发物联网应用示例解析
Aug 07 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
星际实力自我测试
2020/03/04 星际争霸
PHP4实际应用经验篇(6)
2006/10/09 PHP
php 从数据库提取二进制图片的处理代码
2009/09/09 PHP
Web版彷 Visual Studio 2003 颜色选择器
2007/01/09 Javascript
关于图片验证码设计的思考
2007/01/29 Javascript
javascript学习笔记(七)利用javascript来创建和存储cookie
2011/04/08 Javascript
js实现点击注册按钮开始读秒倒计时的小例子
2013/05/11 Javascript
jQuery获得document和window对象宽度和高度的方法
2015/03/25 Javascript
js实现仿爱微网两级导航菜单效果代码
2015/08/31 Javascript
基于JS实现简单的样式切换效果代码
2015/09/04 Javascript
基于JS组件实现拖动滑块验证功能(代码分享)
2016/11/18 Javascript
阿里大于短信验证码node koa2的实现代码(最新)
2017/09/07 Javascript
JavaScript实现二叉树的先序、中序及后序遍历方法详解
2017/10/26 Javascript
vue的状态管理模式vuex
2017/11/30 Javascript
Js经典案例的实例代码
2018/05/10 Javascript
Cocos2d实现刮刮卡效果
2018/12/20 Javascript
详解JavaScript中关于this指向的4种情况
2019/04/18 Javascript
js判断复选框是否选中的方法示例【基于jQuery】
2019/10/10 jQuery
vue项目启动出现cannot GET /服务错误的解决方法
2020/04/26 Javascript
python读写文件操作示例程序
2013/12/02 Python
Python编程之多态用法实例详解
2015/05/19 Python
python版本的仿windows计划任务工具
2018/04/30 Python
Python GUI布局尺寸适配方法
2018/10/11 Python
Python函数中不定长参数的写法
2019/02/13 Python
python django框架中使用FastDFS分布式文件系统的安装方法
2019/06/10 Python
Python检测端口IP字符串是否合法
2020/06/05 Python
html5使用canvas压缩图片的示例代码
2018/09/11 HTML / CSS
美国价格实惠的在线眼镜网站:Zeelool
2020/12/25 全球购物
2019年.net常见面试问题
2012/02/12 面试题
高中军训广播稿
2014/01/14 职场文书
培训班主持词
2014/03/28 职场文书
中学教师暑期培训方案
2014/08/27 职场文书
交通事故委托书范本
2014/09/28 职场文书
色戒观后感
2015/06/12 职场文书
大学生支教感言
2015/08/01 职场文书
手把手教你导入Go语言第三方库
2021/08/04 Golang