有时候在开发的过程中发现一个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.4Node: 14.16.0Package Manager: npm 6.14.11OS: darwin x64Angular: 12.1.5... animations, common, compiler, compiler-cli, core, forms... platform-browser, platform-browser-dynamic, routerPackage                         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.4rxjs                            6.6.7typescript                      4.3.5

生成新工程

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

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.json5 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 ②

① Angular工程文件，对web及wechat我的项目均失效
② web我的项目的专属文件

挪动web我的项目

为了更加的整齐划一，咱们将以②为标识的文件对立挪动到projects文件夹中。新建文件夹名为web。

我的项目挪动实现后，咱们对应修改我的项目的配置信息

angular.json

该文件寄存的是Angular我的项目的配置信息，配置不正确将间接导致ng s等命令无奈失常启动。
咱们对应修改如下：

{  "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",

而后应用全局替换，将"src替换为"projects/web/src

批改实现后，运行ng s web或ng t来查看是否存在其它的语法错误（次要是在迁徙过程中可能产生的援用谬误），有的话按提醒进行修改。

至此，历史我的项目迁徙结束。

创立库

持续来到我的项目根目录，执行ng g library lib创立一个名为lib的库。有意思是这个命令如同有点小bug，它生成的.eslintrc.json文件的配置项有些小问题，咱们须要进行一些批改:

      "parserOptions": {        "project": [-          "projects/lib/tsconfig.lib.json",+          "tsconfig.lib.json",-          "projects/lib/tsconfig.spec.json",+          "tsconfig.spec.json"        ],

未完待续。