The whole process of upgrading Angular single project to multiple projects

Preface

Sometimes during the development process, you find that one Angular project is not enough, and two independent projects are not easy to reuse. For example, we currently need a new H5 project running on the WeChat applet, but we want to apply modules such as entity, Share, Serivce, and MockApi in the original WEB project in the new H5 project. At this point, you need to simply upgrade the original Angular project.

scene:

1. There is currently a web project running on the browser.
2. Add a new wechat project based on the current project.
3. Extract some public things from the web project to form a public library
4. Both the original web project and the new WeChat project can call its public library
   

Development Environment

The development environment of this article is as follows:

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

Create a new project

We enter the root folder of the original web project and execute ng generate application wechat.

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

After selecting whether to use routing and css style categories, angular cli will generate a projects folder for us:

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

At the same time, the angular.json file was updated and the configuration information of the new wechat project was written.

At this point we can use ng s wechat to start the wechat project, use ng t wechat to test the wechat project, and use ng build wechat to build the wechat project.

After the WeChat project is available, we currently have the following directory tree:

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 ②

① Angular project files, valid for both web and WeChat projects

② Exclusive files for web projects

Mobile web projects

For more uniformity, we will move all the files marked with ② to the projects folder. Create a new folder named web.

After the project is moved, we will modify the configuration information of the project accordingly.

angular.json

This file stores the configuration information of the Angular project. Incorrect configuration will directly lead to the failure of commands such as ng s to start normally.
We corrected it as follows:

{
  "projects": {
    "web": {
- "root": "", 
+ "root": "projects/web",
- "tsConfig": "tsconfig.app.json",
+ "tsConfig": "projects/web/tsconfig.app.json",
- "tsConfig": "tsconfig.spec.json",
+ "tsConfig": "projects/web/tsconfig.spec.json",
- "karmaConfig": "karma.conf.js",
+ "karmaConfig": "projects/web/karma.conf.js",

Then use global replace to replace "src with "projects/web/src

After the modification is completed, run ng s web or ng t to check for other syntax errors (mainly reference errors that may occur during the migration process). If there are any, correct them according to the prompts.

At this point, the migration of historical projects is complete.

Public modules

Next, you can create a new common folder in projects and move all the common entities, services, components, etc. to it. These small functional modules can be used in web projects as well as in WeChat, so we only need to build one of the same wheel.

Summarize

This is the end of this article about upgrading Angular single project to multiple projects. For more relevant content about upgrading Angular single project to multiple projects, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!