如何使用Angular CLI在App目录外创建组件？

当然可以！针对你的多应用Angular项目结构，有几种简单的方法实现将组件直接生成到src/components/这类共享目录下，而不是某个应用内部：

方法1：使用--skip-import参数跳过自动模块导入 #

直接运行生成命令时加上--skip-import，CLI就会把组件创建在你指定的路径下，不会自动将其添加到任何应用的模块中：

ng g component components/<componentName> --skip-import

之后你只需要手动在需要使用该组件的应用模块（比如app-1/app.module.ts）中导入并声明这个共享组件即可。

方法2：配置一个"共享"项目（更优雅的长期方案） #

如果你经常需要生成共享资源，可以在你的angular-cli.json（新版是angular.json）中添加一个专门的"共享"应用配置：

1. 打开配置文件，找到apps数组（新版是projects对象）
2. 添加一个新的配置项，指向你的src根目录：

   // angular-cli.json 示例
   "apps": [
     // 你的app-1配置
     {
       "name": "app-1",
       "root": "src/app-1",
       "appRoot": "app",
       ...
     },
     // 你的app-2配置
     {
       "name": "app-2",
       "root": "src/app-2",
       "appRoot": "app",
       ...
     },
     // 新增共享配置
     {
       "name": "shared",
       "root": "src",
       "appRoot": "",
       "sourceRoot": "src",
       "main": "main-1.ts", // 这里随便填一个现有main文件即可，因为我们不会运行这个共享项目
       ...
     }
   ]
   

3. 现在生成共享组件时，指定--app shared参数：

   ng g component components/<componentName> --app shared
   

这样CLI会直接将组件生成到src/components/目录下，并且会自动创建对应的*.module.ts（如果需要的话），你可以把这个共享模块导入到各个应用的模块中使用。

为什么默认会生成到第一个应用？ #

Angular CLI的默认行为是使用配置文件中第一个定义的应用作为生成代码的目标项目，所以如果不指定--app/--project参数，组件就会被放到第一个应用的目录下，这也是你之前遇到的问题原因。

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