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 相关文章推荐
QQ邮箱的一个文本编辑器代码
Mar 14 Javascript
js动态加载以及确定加载完成的代码
Jul 31 Javascript
javascript的理解及经典案例分析
May 20 Javascript
第一次接触神奇的Bootstrap
Oct 14 Javascript
详谈Ajax请求中的async:false/true的作用(ajax 在外部调用问题)
Feb 10 Javascript
使用原生js+canvas实现模拟心电图的实例
Sep 20 Javascript
angular2模块和共享模块详解
Apr 08 Javascript
Vue入门之animate过渡动画效果
Apr 08 Javascript
详解vue更改头像功能实现
Apr 28 Javascript
vue draggable resizable gorkys与v-chart使用与总结
Sep 05 Javascript
vue.js实现照片放大功能
Jun 23 Javascript
vue实现书本翻页动画效果实例详解
Apr 08 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学习笔记之基础知识
2014/11/08 PHP
php获取英文姓名首字母的方法
2015/07/13 PHP
Linux环境下php实现给网站截图的方法
2016/05/03 PHP
Yii2中YiiBase自动加载类、引用文件方法分析(autoload)
2016/07/25 PHP
php中文乱码问题的终极解决方案汇总
2017/08/01 PHP
详解PHP如何更好的利用PHPstorm的自动提示
2017/08/18 PHP
Javascript学习笔记一 之 数据类型
2010/12/15 Javascript
jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)
2013/01/09 Javascript
javascript 判断字符串是否包含某字符串及indexOf使用示例
2013/10/18 Javascript
jQuery实现异步获取json数据的2种方式
2014/08/29 Javascript
深入理解JavaScript中的call、apply、bind方法的区别
2016/05/30 Javascript
JS构造函数与原型prototype的区别介绍
2016/07/04 Javascript
Javascript表单特效之十大常用原理性样例代码大总结
2016/07/12 Javascript
jQuery实现可展开折叠的导航效果示例
2016/09/12 Javascript
解析微信JS-SDK配置授权,实现分享接口
2016/12/09 Javascript
JavaScript中数据类型转换总结
2016/12/25 Javascript
在knockoutjs 上自己实现的flux(实例讲解)
2017/12/18 Javascript
Vue2.0 $set()的正确使用详解
2020/07/28 Javascript
[04:53]DOTA2英雄基础教程 祈求者
2014/01/03 DOTA
[00:13]天涯墨客二技能展示
2018/08/25 DOTA
python标准日志模块logging的使用方法
2013/11/01 Python
Python标准库之sqlite3使用实例
2014/11/25 Python
python字典DICT类型合并详解
2017/08/17 Python
Python实现简单http服务器
2018/04/12 Python
Python3 使用cookiejar管理cookie的方法
2018/12/28 Python
Pandas —— resample()重采样和asfreq()频度转换方式
2020/02/26 Python
使用html2canvas实现浏览器截图的示例代码
2018/01/26 HTML / CSS
Linux面试经常问的文件系统操作命令
2015/11/05 面试题
市场营销专业推荐信
2013/11/03 职场文书
摄影助理岗位职责
2014/02/07 职场文书
分层教学实施方案
2014/03/19 职场文书
乡村文明行动实施方案
2014/03/29 职场文书
春节请假条
2014/04/11 职场文书
医疗纠纷协议书
2014/04/16 职场文书
社会实践单位意见
2015/06/05 职场文书
新闻稿件写作范文
2015/07/18 职场文书