将Angular单项目升级为多项目的全过程

新用户8754rVpJ 2022-02-10

展开全文

前言

有时候在开发的过程中发现一个Angular项目不太够用，两个独立的项目又不太好复用。比如当前我们需要一个新的运行于微信小程序端的H5项目，但却在想在新的H5项目中应用原WEB项目中实体、Share、Serivce以及MockApi等模块。此时，便需要将原来的Angular项目简单做个升级。

情景：

1. 当前已经有了一个运行于浏览器端的web项目。

2. 在当前项目的基础上新增一个wechat项目。

3. 将web项目中的一些公有的东西抽离出来组成一个公共库

4. 原web项目、新的wechat项目均能调用其公共库

开发环境

本文开发环境如下：

panjie@panjies-iMac web % ng --version

_ _ ____ _ ___

/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|

/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |

/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |

/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|

|___/

Angular CLI: 12.1.4

Node: 14.16.0

Package Manager: npm 6.14.11

OS: darwin x64

Angular: 12.1.5

... animations, common, compiler, compiler-cli, core, forms

... platform-browser, platform-browser-dynamic, router

Package Version

---------------------------------------------------------

@angular-devkit/architect 0.1201.4

@angular-devkit/build-angular 12.1.4

@angular-devkit/core 12.1.4

@angular-devkit/schematics 12.1.4

@angular/cli 12.1.4

@schematics/angular 12.1.4

rxjs 6.6.7

typescript 4.3.5

生成新工程

我们进入原web项目的根文件夹，执行ng generate application wechat。

1 2	panjie@panjies-iMac web % ng generate application wechat ? Would you like to add Angular routing? Yes

选择是否使用路由以及css样式类别后angular cli将为我们生成projects文件夹：

projects
└── wechat
    ├── karma.conf.js
    ├── src
    │   ├── app
    │   │   ├── app-routing.module.ts
    │   │   ├── app.component.html
    │   │   ├── app.component.scss
    │   │   ├── app.component.spec.ts
    │   │   ├── app.component.ts
    │   │   └── app.module.ts
    │   ├── assets
    │   ├── environments
    │   │   ├── environment.prod.ts
    │   │   └── environment.ts
    │   ├── favicon.ico
    │   ├── index.html
    │   ├── main.ts
    │   ├── polyfills.ts
    │   ├── styles.scss
    │   └── test.ts
    ├── tsconfig.app.json
    └── tsconfig.spec.json

5 directories, 17 files

同时更新了angular.json文件，写入了wechat这个新的项目的配置信息。

此时我们便可以使用ng s wechat来启动wechat项目，使用ng t wechat来测试wechat项目，以及使用ng build wechat来构建wechat的项目了。

wechat项目有了以后，我们当前得到了如下的目录树：

panjie@panjies-iMac web % tree -L 1 -a
.
├── .browserslistrc ②
├── .editorconfig ①
├── .eslintrc.json ②
├── README.md ①
├── angular.json ①
├── dist ①
├── karma.conf.js ②
├── node_modules ①
├── package-lock.json ①
├── package.json ①
├── projects ①
├── src ②
├── tsconfig.app.json ②
├── tsconfig.json ②
└── tsconfig.spec.json ②