How to upgrade Angular single project to multiple projects

Sometimes during the development process, it is found that one Angular project is not enough, and two independent projects are not easy to reuse. For example, currently we need a new H5 project running on the WeChat applet, but we want to use the entity, Share, Serivce, and MockApi modules 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 side.
2. Add a wechat project based on the current project.
3. Extract some public things in the web project to form a public library
4. Both the original web project and the new wechat project can call their public libraries

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

Generate 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 choosing 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 project wechat

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, 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 file, effective for web and wechat projects
② Exclusive file for web project

Mobile web project

In order to be more uniform, we will uniformly move the files identified by ② to the projects folder. The new folder is named web .

After the project is moved, we correct the configuration information of the project

angular.json

This file stores the configuration information of the Angular project. Incorrect configuration will directly cause ng s such as 06177d40853921 to fail to start normally.
Our corresponding amendments are 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 replacement, replace "src with "projects/web/src

After the modification is completed, run ng s web or ng t to check whether there are other grammatical errors (mainly referencing errors that may occur during the migration process), and if necessary, follow the prompts to correct them.

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

Common module

Next, you can create a new common folder in the projects, and then move all the public entities, services, components, etc. over. These small functional modules can be used in web projects or in wechat, so that we can only build one of the same wheels.