当项目中有多个应用程序时，使用 AngularCLI 生成组件

Question

我的 .angular-cli.json 文件如下所示：

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "suman-chrome-extension"
  },
  "apps": [

    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
    },
    {
      "root":"blank-page-src",
      "outDir": "blank-page-dist",
      "index": "page.html",
      "main": "page.ts",
      "polyfills": "polyfills.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "blank-page",
    },

    {
      "root":"dev-tools-src",
      "outDir": "dev-tools-dist",
      "index": "suman-dev-tools.html",
      "main": "suman-dev-tools.ts",
      "polyfills": "polyfills.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "suman-dev-tools",
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "scss",
    "component": {
    }
  }
}

我遇到的问题是，当我使用这样的命令时：

ng g service services/foo

它将将此服务放在第一个应用程序中。即使我

cd

进入子目录也会发生这种情况。

如何在主/第一个应用程序之外的应用程序中生成组件/服务等？

Answer 1

您应该给每个人起一个如下所示的名字

.angular-cli.json

apps: [
    {
        ...
        "name": "app-1"
        ...
    },
    {
        ...
        "name": "app-2"
        ...
    }
]

然后，您可以创建组件/服务/管道/模块，如下所示

ng g c my-component --app=app-1

或者，如果您不想命名它们（您应该这样做），您也可以使用索引，如下所示

ng g c my-component --app=0

--> 在第一个应用程序中创建一个组件

ng g c my-component --app=1

--> 在第二个应用程序中创建一个组件

Answer 2

我现在使用的是 Angular 17，你也可以使用标志

--project=app-name

，如下所示：

ng generate component componentName --project=app-name

它会在应用程序“app-name”中生成一个名为“componentName”的组件

---

作为像我这样的新手的奖励，您可以使用以下方法创建一个没有应用程序的项目：

ng new MultipleProyects --create-application="false"

然后您可以使用以下命令添加新应用程序：

ng generate application app-name-one
ng generate application app-name-two

这将创建一个名为“projects”的文件夹，其中包含您的应用程序，这些应用程序使用相同的 Angular 安装，这意味着您每次创建新应用程序时无需安装所有 Angular 库。

此外，为您使用的应用程序提供服务：

ng serve --project=app-name-one