关于angular:如何将Angular单项目升级为多项目

6次阅读

共计 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
└── 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 ②

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

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

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

该文件寄存的是 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"
        ],

未完待续。

正文完