共计 2821 个字符，预计需要花费 8 分钟才能阅读完成。
有时候在开发的过程中发现一个 Angular 我的项目不太够用，两个独立的我的项目又不太好复用。比方以后咱们须要一个新的运行于微信小程序端的 H5 我的项目，但却在想在新的 H5 我的项目中利用原 WEB 我的项目中实体、Share、Serivce 以及 MockApi 等模块。此时，便须要将原来的 Angular 我的项目简略做个降级。
情景：
- 以后曾经有了一个运行于浏览器端的 web 我的项目。
- 在以后我的项目的根底上新增一个 wechat 我的项目。
- 将 web 我的项目中的一些私有的货色抽离进去组成一个公共库
- 原 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。
| panjie@panjies-iMac web % ng generate application wechat | |
| ? Would you like to add Angular routing? Yes |
抉择是否应用路由以及 css 款式类别后 angular cli 将为咱们生成 projects 文件夹：
| projects | |
| ├── 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 ② |
① 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" | |
| ], |
未完待续。
