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 学习笔记 错误处理
Jul 30 Javascript
Jquery插件之多图片异步上传
Oct 20 Javascript
整理一些JavaScript的IE和火狐的兼容性注意事项
Mar 17 Javascript
JavaScript实现表格快速变色效果代码
Aug 19 Javascript
js实现上一页下一页的效果【附代码】
Mar 10 Javascript
jquery实现全选、全不选以及单选功能
Mar 23 jQuery
移动端刮刮乐的实现方式(js+HTML5)
Mar 23 Javascript
ES6新特性之Object的变化分析
Mar 31 Javascript
使用jQuery,Angular实现登录界面验证码详解
Apr 27 jQuery
Puppeteer 爬取动态生成的网页实战
Nov 14 Javascript
layui关闭弹窗后刷新主页面和当前更改项的例子
Sep 06 Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
Apr 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项目打包方法
2008/02/18 PHP
php递归实现无限分类生成下拉列表的函数
2010/08/08 PHP
PHP中foreach循环中使用引用要注意的地方
2011/01/02 PHP
基于php和mysql的简单的dao类实现crud操作功能
2014/01/27 PHP
PHP中SESSION的注销与清除
2015/04/16 PHP
Smarty变量用法详解
2016/05/11 PHP
通过PHP设置BugFree获取邮箱通知
2019/04/25 PHP
PHP7 整型处理机制修改
2021/03/09 PHP
比Jquery的document.ready更快的方法
2010/04/28 Javascript
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
2010/05/13 Javascript
jQuery使用数组编写图片无缝向左滚动
2012/12/11 Javascript
基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
2013/05/07 Javascript
javascript中如何处理引号编码&amp;#034;
2013/08/15 Javascript
JS实现的最简Table选项卡效果
2015/10/14 Javascript
jquery获取点击控件的绝对位置简单实例
2016/10/13 Javascript
详解React-Todos入门例子
2016/11/08 Javascript
javascript 日期相减-在线教程(附代码)
2017/08/17 Javascript
nodejs中安装ghost出错的原因及解决方法
2017/10/23 NodeJs
详解react关于事件绑定this的四种方式
2018/03/09 Javascript
一个简单的node.js界面实现方法
2018/06/01 Javascript
Javascript实现时间倒计时功能
2018/11/17 Javascript
python进程类subprocess的一些操作方法例子
2014/11/22 Python
Python 列表(List) 的三种遍历方法实例 详解
2017/04/15 Python
django模板语法学习之include示例详解
2017/12/17 Python
Pandas 对Dataframe结构排序的实现方法
2018/04/10 Python
pandas 选取行和列数据的方法详解
2019/08/08 Python
基于selenium及python实现下拉选项定位select
2020/07/22 Python
matplotlib事件处理基础(事件绑定、事件属性)
2021/02/03 Python
FORZIERI福喜利中国官网:奢侈品购物梦工厂
2019/05/03 全球购物
Joseph官网:英国小众奢侈品牌
2019/05/17 全球购物
开放系统互连参考模型
2016/06/29 面试题
幼儿园教研活动方案
2014/01/19 职场文书
国际残疾人日广播稿范文
2014/10/09 职场文书
2015年学校教育教学工作总结
2015/04/22 职场文书
义诊活动通知
2015/04/24 职场文书
GPU服务器的多用户配置方法
2022/07/07 Servers