Angular多项目工作区中ng g c生成组件路径错误如何修正？

问题描述 #

在Angular多项目工作区的jokes项目中执行组件生成命令时，组件被创建在项目根目录下而非src/app内：
当前执行命令及输出：

my-angular-apps\projects\jokes> ng g c Jokes --skip-import --dry-run
CREATE projects/jokes/jokes/jokes.component.html (20 bytes)
CREATE projects/jokes/jokes/jokes.component.spec.ts (552 bytes)
CREATE projects/jokes/jokes/jokes.component.ts (198 bytes)
CREATE projects/jokes/jokes/jokes.component.css (0 bytes)

期望输出：

my-angular-apps\projects\jokes> ng g c Jokes --skip-import --dry-run
CREATE projects/jokes/src/app/jokes/jokes.component.html (20 bytes)
CREATE projects/jokes/src/app/jokes/jokes.component.spec.ts (552 bytes)
CREATE projects/jokes/src/app/jokes/jokes.component.ts (198 bytes)
CREATE projects/jokes/src/app/jokes/jokes.component.css (0 bytes)

解决方案 #

方法1：单次生成指定路径 #

执行组件生成命令时，直接在组件名称前添加src/app/前缀，强制指定生成路径：

ng g c src/app/Jokes --skip-import --dry-run

该方式适合临时调整单次生成的目标位置，无需修改配置文件。

方法2：修改项目默认根路径（永久生效） #

编辑工作区根目录下的angular.json文件，找到projects.jokes节点，将sourceRoot字段的值修改为src/app：

{
  "projects": {
    "jokes": {
      "sourceRoot": "src/app",
      // 其他项目配置内容...
    }
  }
}

保存配置后，后续执行组件生成命令时，组件会默认创建到src/app目录下，无需每次手动指定路径。

内容的提问来源于stack exchange，提问作者Tech with Thiru