如何使用Angular-Cli在/src/app外的目录创建组件等文件

你已经调整了angular-cli.json里的appRoot为mco，这步方向是对的，但生成命令的路径逻辑需要跟着调整——之前的命令失败是因为路径解析不符合CLI的预期，下面给你具体的解决方案：

1. 先搞懂appRoot的作用 #

当你把"appRoot": "mco"加到apps数组后，Angular CLI会把src/mco当作你的应用根目录（替代默认的src/app）。这意味着生成命令的相对路径会以src/mco为起点，而不是原来的src/app。

2. 正确的生成命令示例 #

情况1：在src/mco/lib下创建组件 #

不需要用../这类相对路径，直接指定相对于appRoot的路径即可：

ng g c lib/test-component

这条命令会自动在src/mco/lib/test-component下生成组件的所有文件。

情况2：在src下的其他独立目录（比如src/common）创建组件 #

如果要完全跳出appRoot指定的目录，可以用--path参数明确指定目标路径（相对于项目根目录）：

ng g c common/test-component --path src/common

执行后组件会被生成到src/common/test-component目录下。

情况3：设置默认生成路径（可选） #

如果你经常需要在某个外部目录生成文件，可以修改angular-cli.json的defaults配置，把常用路径设为默认：

"defaults": {
  "component": {
    "path": "src/mco/lib",
    "flat": false
  },
  "service": {
    "path": "src/mco/services"
    // 模块、指令等其他类型的默认路径可以同理配置
  }
}

之后直接运行ng g c test-component，组件就会自动生成到src/mco/lib/test-component下。

3. 为什么你之前的命令会失败 #

你之前用ng g c ../mco/lib报错，是因为CLI会把../mco/lib当作组件名称（而不是路径）来处理——组件名称不能包含路径分隔符，自然会触发错误。正确的做法是把路径和组件名称分开写，比如ng g c lib/test来指定路径和组件名。

内容的提问来源于stack exchange，提问作者Vince