如何使用angular-cli（6.x）创建单仓库项目结构

Question

我想使用angular-cli生成一个新的工作区

目前唯一的方法是运行：

ng new asdf
cd asdf
ng g application whatever

，但所有src/文件仍然保留（以及现在不一致存储的项目的原始angular.json信息）。没有src文件夹就无法创建新的仓库...而当我使用定制原理图通过本质上复制angular-cli的ng-new并删除https://github.com/angular/angular-cli/blob/6449a753641340d8fc19a752e1a1ced75f974efa/packages/schematics/angular/ng-new/index.ts#L61 {{1}来执行此操作时， }

每当我运行它...

schematic('application', applicationOptions),

仅将e2e文件放入$ ng new asdf -c=my-schematic $ cd asdf $ ng g application whatever {"inlineStyle":false,"inlineTemplate":false,"routing":false,"prefix":"app","style":"css","skipTests":false,"skipPackageJson":false,"name":"whatever"} CREATE projects/whatever-e2e/protractor.conf.js (752 bytes) CREATE projects/whatever-e2e/src/app.e2e-spec.ts (304 bytes) CREATE projects/whatever-e2e/src/app.po.ts (208 bytes) CREATE projects/whatever-e2e/tsconfig.e2e.json (219 bytes) 中，而projects/文件大部分保持空白：

angular.json

我怀疑这与应用程序原理图中的无提示失败或路径断开有关...但是我想首先检查是否存在更简单/更优选的方法。

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {},
  "cli": {
    "defaultCollection": "my-schematic"
  }
}

编辑时要注意，我对第三方库（例如Nrwl / Nx）很熟悉，但我正努力避免这种情况。我还将此问题发布到了GitHub：https://github.com/angular/angular-cli/issues/11402

Answer 1

目前还没有一种方法可以达到我的预期。

hacky解决方法要运行：

ng new <mono-repo name>

将其插入（cd <mono-repo name>）

生成第一个应用名称（ng generate application <app-name>）

，然后删除原始的src / e2e文件夹（rm -rf src e2e）和angular.json中的相应条目。

从那时起，每当生成库/应用程序时，所有内容都将位于项目文件夹中。

Answer 2

如果您不希望初始应用程序驻留在/ src中，则可以执行以下两个步骤：

ng new my-workspace --create-application=false --defaults

• --create-application告诉Angular CLI不要生成初始应用程序。
• --defaults告诉Angular CLI不要提示您有关路由和CSS预处理器的信息。

ng generate application my-app

通过这两个步骤，您将最终得到一个像这样的文件结构：

.
├── .git/
├── node_modules/
├── projects/
├── .editorconfig
├── .gitignore
├── README.md
├── angular.json
├── package.json
├── tsconfig.json
├── tslint.json
└── yarn.lock

然后您将在projects文件夹中找到您的应用程序及其对应的e2e应用程序：

projects/
├── my-app/
└── my-app-e2e/

Answer 3

改为尝试ng g application {project-name}。

结果

还有Angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "mono-repo": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/mono-repo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "mono-repo:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "mono-repo:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "mono-repo:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
              "styles.css"
            ],
            "scripts": [],
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "mono-repo-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "mono-repo:serve"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "project-alpha": {
      "root": "projects/project-alpha/",
      "sourceRoot": "projects/project-alpha/src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/project-alpha",
            "index": "projects/project-alpha/src/index.html",
            "main": "projects/project-alpha/src/main.ts",
            "polyfills": "projects/project-alpha/src/polyfills.ts",
            "tsConfig": "projects/project-alpha/tsconfig.app.json",
            "assets": [
              "projects/project-alpha/src/favicon.ico",
              "projects/project-alpha/src/assets"
            ],
            "styles": [
              "projects/project-alpha/src/styles.css"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "projects/project-alpha/src/environments/environment.ts",
                  "with": "projects/project-alpha/src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "project-alpha:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "project-alpha:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "project-alpha:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "projects/project-alpha/src/test.ts",
            "polyfills": "projects/project-alpha/src/polyfills.ts",
            "tsConfig": "projects/project-alpha/tsconfig.spec.json",
            "karmaConfig": "projects/project-alpha/karma.conf.js",
            "styles": [
              "projects/project-alpha/src/styles.css"
            ],
            "scripts": [],
            "assets": [
              "projects/project-alpha/src/favicon.ico",
              "projects/project-alpha/src/assets"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "projects/project-alpha/tsconfig.app.json",
              "projects/project-alpha/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "project-alpha-e2e": {
      "root": "projects/project-alpha-e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "projects/project-alpha-e2e/protractor.conf.js",
            "devServerTarget": "project-alpha:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "project-alpha:serve:production"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "projects/project-alpha-e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "mono-repo"
}

Answer 4

我在这里提供指南，介绍如何使用Nx和Angular CLI执行此操作 here 最简单的方法是从生成一个空的Angular CLI项目开始：

for file in *.JPG.~*~; do
  new_name=$( echo "$file" | sed 's/\.JPG.~\([0-9]*\)~/_\1.JPG/'
  mv "$file" "$new_name"; done
done

或者如果您使用NX：

ng new --createApplication false

从此处，您可以使用以下命令在app文件夹中生成应用：

create-nx-workspace myworkspacedemo

并使用以下命令在libs文件夹中生成libs：

ng g app myapp

如果您使用的是NX原理图，这还将提示您提供许多其他配置选项，例如生成延迟加载的模块，路由，使用Jest等...

Answer 5

好吧，创建monorepo架构太容易了
让我们看看

通过此操作，您指定了一个不包含任何结构的体系结构 应用。这为您提供了这样的代码...

哦，看来您已经创建了体系结构
现在进入您的代码编辑器并创建您的应用程序

现在该检查一切是否正常了。
让我们在您需要的任何随机端口上运行...

您可以在单个体系结构中拥有多个应用程序，并且它们都将使用相同的节点模块
因此，将来在您更新任何模块后，所有应用程序都将访问已更新的模块，因此无需一个接一个地更新它们

除了您之外，您还可以在不同的端口上运行所有应用程序，并分别创建构建