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的输入框在光标位置插入内容, 并选中
Oct 29 Javascript
javascript数组去重3种方法的性能测试与比较
Mar 26 Javascript
基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
May 07 Javascript
获取表单控件原始(初始)值的方法
Aug 21 Javascript
基于JavaScript短信验证码如何实现
Jan 24 Javascript
分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式
Sep 01 Javascript
实例分析浏览器中“JavaScript解析器”的工作原理
Dec 12 Javascript
浅析vue数据绑定
Jan 17 Javascript
Node.js如何对SQLite的async/await封装详解
Feb 14 Javascript
vue实现element表格里表头信息提示功能(推荐)
Nov 20 Javascript
微信小程序如何加载数据库真实数据的实现
Mar 04 Javascript
原生js实现弹幕效果
Nov 29 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 SQLite类
2009/05/07 PHP
thinkphp常见路径用法分析
2014/12/02 PHP
yii插入数据库防并发的简单代码
2017/05/27 PHP
PHP使用SOAP调用API操作示例
2018/12/25 PHP
php日志函数error_log用法实例分析
2019/09/23 PHP
Javascript 学习笔记 错误处理
2009/07/30 Javascript
Ext grid 添加右击菜单
2009/11/26 Javascript
JS特殊函数(Function()构造函数、函数直接量)区别介绍
2013/05/19 Javascript
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
2013/11/15 Javascript
JavaScript实现梯形乘法表的方法
2015/04/25 Javascript
HTML5使用DeviceOrientation实现摇一摇功能
2015/06/05 Javascript
jQuery仿360导航页图标拖动排序效果代码分享
2015/08/24 Javascript
浅谈javascript的Touch事件
2015/09/27 Javascript
JavaScript来实现打开链接页面的简单实例
2016/06/02 Javascript
基于Vue实现tab栏切换内容不断实时刷新数据功能
2017/04/13 Javascript
vue项目中axios使用详解
2018/02/07 Javascript
Angular5升级RxJS到5.5.3报错:EmptyError: no elements in sequence的解决方法
2018/04/09 Javascript
Angular 数据请求的实现方法
2018/05/07 Javascript
vue+node实现图片上传及预览的示例方法
2018/11/22 Javascript
微信小程序上传图片到php服务器的方法
2019/05/23 Javascript
JavaScript将数组转换为链表的方法
2020/02/16 Javascript
Vue-resource安装过程及使用方法解析
2020/07/21 Javascript
利用Python如何生成随机密码
2016/04/20 Python
实例解析Python的Twisted框架中Deferred对象的用法
2016/05/25 Python
Python书单 不将就
2017/07/11 Python
使用Python自动化破解自定义字体混淆信息的方法实例
2019/02/13 Python
15行Python代码实现网易云热门歌单实例教程
2019/03/10 Python
Python实现在Windows平台修改文件属性
2020/03/05 Python
美国维生素、补充剂、保健食品购物网站:Vitacost
2016/08/05 全球购物
学校介绍信范文
2014/01/14 职场文书
摄影专业毕业生求职信
2014/08/05 职场文书
老员工辞职信范文
2015/05/12 职场文书
电影地道战观后感
2015/06/04 职场文书
运动会三级跳加油稿
2015/07/21 职场文书
关于考试抄袭的检讨书
2019/11/02 职场文书
vue.js 使用原生js实现轮播图
2022/04/26 Vue.js