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组件使用中遇到的问题整理及解决
Feb 21 Javascript
Javascript检查图片大小不要让大图片撑破页面
Nov 04 Javascript
浅谈JavaScript的Polymer框架中的behaviors对象
Jul 29 Javascript
使用Node.js处理前端代码文件的编码问题
Feb 16 Javascript
jQuery 选择同时包含两个class的元素的实现方法
Jun 01 Javascript
vue-cli3 karma单元测试的实现
Jan 18 Javascript
详解Vue源码中一些util函数
Apr 24 Javascript
vue-cli3+typescript新建一个项目的思路分析
Aug 06 Javascript
解决layui富文本编辑器图片上传无法回显的问题
Sep 18 Javascript
细述Javascript的加法运算符的具体使用
Oct 18 Javascript
小程序websocket心跳库(websocket-heartbeat-miniprogram)
Feb 23 Javascript
解决vue-router 嵌套路由没反应的问题
Sep 22 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
自动跳转中英文页面
2006/10/09 PHP
php合并数组array_merge函数运算符加号与的区别
2008/10/31 PHP
php使用指定编码导出mysql数据到csv文件的方法
2015/03/31 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
javascript 静态对象和构造函数的使用和公私问题
2010/03/02 Javascript
jquery ajax 同步异步的执行示例代码
2010/06/23 Javascript
parseInt parseFloat js字符串转换数字
2010/08/01 Javascript
jQuery EasyUI API 中文文档 - Tree树使用介绍
2011/11/19 Javascript
上传图片预览JS脚本 Input file图片预览的实现示例
2014/10/23 Javascript
JQuery简单实现锚点链接的平滑滚动
2015/05/03 Javascript
跟我学习javascript的函数调用和构造函数调用
2015/11/16 Javascript
详解Sea.js中Module.exports和exports的区别
2017/02/12 Javascript
详解nodejs微信公众号开发——1.接入微信公众号
2017/04/10 NodeJs
Angular.js中window.onload(),$(document).ready()的写法浅析
2017/09/28 Javascript
Vue项目全局配置微信分享思路详解
2018/05/04 Javascript
JavaScript 中 JSON.parse 函数 和 JSON.stringify 函数
2018/12/05 Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
2019/09/19 Javascript
Vertx基于EventBus发送接受自定义对象
2020/11/16 Javascript
简单谈谈offsetleft、offsetTop和offsetParent
2020/12/04 Javascript
[47:48]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第三局
2016/02/28 DOTA
python3实现UDP协议的服务器和客户端
2017/06/14 Python
Python标准库json模块和pickle模块使用详解
2020/03/10 Python
jupyter notebook 参数传递给shell命令行实例
2020/04/10 Python
完美解决pycharm 不显示代码提示问题
2020/06/02 Python
记一次高分屏下canvas模糊问题
2020/02/17 HTML / CSS
英国运动服、设备及配件网站:DW Sports
2019/12/04 全球购物
乌克兰排名第一的在线旅游超市:Farvater.Travel
2020/01/02 全球购物
JSF的标签库有哪些
2012/04/27 面试题
安全事故检讨书
2014/01/18 职场文书
家长会主持词
2014/03/26 职场文书
知识就是力量演讲稿
2014/09/13 职场文书
学习党章的体会
2014/11/07 职场文书
公司员工体检通知
2015/04/21 职场文书
HTML5 新增内容和 API详解
2021/11/17 HTML / CSS
浅谈redis的过期时间设置和过期删除机制
2022/03/18 MySQL
Nginx如何配置根据路径转发详解
2022/07/23 Servers