angular8 单项目更改为多项目目录结构

作者：七棵菜日期：2022-11-30 栏目：计算机分类：1 人气：838

多项目开发环境适用于正在开发可共享库的高级用户，以及那些使用“单一（mono）仓库”开发风格的企业，它只需要一个仓库，而且所有 Angular 项目都使用全局配置。

#### 目录结构更改

- 根目录下新建文件夹`projects`，所有项目的独立代码都放到这个文件夹下面

- 在`projects`目录下新建一个文件夹用来存放项目，例如`base`

- 将根目录下的`src`目录移动到`projects/base`目录中

#### 配置文件更改

- 更改根目录下`angular.json`配置文件，例如项目文件名为`base`

- `newProjectRoot`值更改为`projects`

```
   "newProjectRoot": "projects",
   ```

- 项目配置更改：`root`值更改为`projects/base`；原来配置项值中包含`src`的在前面增加`projects/base`，其实就是把路径`src`更改为`projects/base/src`；项目编译之后的输出路径`outputPath`值更改，例如：`dist/base`。如下代码只显示更改了的代码片段，而非全部的配置文件，项目名称为`ngx-admin-demo`，项目文件夹为`projects/base`

```
   "projects": {
     "ngx-admin-demo": {
       "root": "projects/base",
       "sourceRoot": "projects/base/src",
       "architect": {
        "build": {
          "options": {
            "outputPath": "dist/base",
            "index": "projects/base/src/index.html",
            "main": "projects/base/src/main.ts",
            "tsConfig": "projects/base/tsconfig.app.json",
            "polyfills": "projects/base/src/polyfills.ts",
            "assets": [
              "projects/base/src/assets",
              "projects/base/src/favicon.ico",
              "projects/base/src/favicon.png"
            ],
            "styles": [
              "projects/base/src/app/@theme/styles/styles.scss"
            ]
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "projects/base/src/environments/environment.ts",
                  "with": "projects/base/src/environments/environment.prod.ts"
                }
              ]
            }
          }
        },
        "test": {
          "options": {
            "main": "projects/base/src/test.ts",
            "polyfills": "projects/base/src/polyfills.ts",
            "tsConfig": "projects/base/tsconfig.spec.json",
            "styles": [
              "projects/base/src/app/@theme/styles/styles.scss"
            ],
            "assets": [
              "projects/base/src/assets",
              "projects/base/src/favicon.ico",
              "projects/base/src/favicon.png"
            ]
          }
        },
        "lint": {
          "options": {
            "tsConfig": [
              "projects/base/tsconfig.app.json",
              "projects/base/tsconfig.spec.json"
            ]
          }
        }
      }
     }
   }
   ```

- 更改根目录下`package.json`配置文件：把路径`src`相关的值更改为`projects/base/src`

```
"scripts": {
  "lint:styles": "stylelint ./projects/**/src/**/*.scss",
  "docs": "compodoc -p projects/base/src/tsconfig.app.json -d docs",
  "docs:serve": "compodoc -p projects/base/src/tsconfig.app.json -d docs -s"
}
```

- 更改根目录下`tsconfig.json`配置文件：把路径`src`相关的值更改为`projects/base/src`

```
"compilerOptions": {
  "baseUrl": "projects/base/src",
}
```

- 更改项目目录下的`tsconfig.app.json`配置文件：`baseUrl`的值更改为`src`；`exclude`和`include`中的文件通配规则添加`src`；其他配置更改相对路径的层级。**注意此文件在项目的根目录下，而不是在项目的`src`目录下，如果是在`src`目录下，请做相应的更改**

```
{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "outDir": "../../out-tsc/base",
    "baseUrl": "src",
    "paths": {
      "@angular/*": [
        "../../node_modules/@angular/*"
      ],
      "@nebular/*": [
        "../../node_modules/@nebular/*"
      ]
    }
  },
  "exclude": [
    "src/test.ts",
    "src/**/*.spec.ts",
    "../../node_modules/@nebular/**/*.spec.ts"
  ],
  "include": [
    "src/*.ts",
    "src/**/*.ts",
    "../../node_modules/@nebular/**/*.ts"
  ]
}
```

- 更改项目目录下的`tsconfig.spec.json`配置文件：*更改事项同上一步的更改*

```
{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "outDir": "../../out-tsc/spec",
    "baseUrl": "src"
  },
  "files": [
    "src/test.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.spec.ts",
    "src/**/*.d.ts"
  ]
}
```

标签： angular8 projects 多项目

上一篇：如何使用mvn命令导入依赖下一篇：PSR2.ControlStructures.SwitchDeclaration.WrongOpenercase

angular8 单项目更改为多项目目录结构

随便看看

留言