Question

在使用Angular CLI设置我的新Angular项目时，我遇到了一个挑战。

我想创建一个类似下面的文件夹结构：

-- src
    -- components
       -- app
       -- students
       -- faculty
       -- admin
       -- common
          -- search
          -- table
          -- table_row
          -- list
          -- list_item
          -- header
          -- footer
          -- side_panel
    -- services
    -- static
       -- jsons
           -- cities
           -- states
           -- time_zones
       -- imgs
       -- scss

如果我们运行ng g c some-component命令，则仅在src/app/内创建新组件。

就代码而言，app本身就是一个组件，那么为什么Angular CLI不允许我们创建与app组件并行的另一个组件？

但是，如果我们手动创建文件夹的结构而不使用CLI命令，则是可行的。该应用程序也可以正常工作。

每个应用程序都有自己的大小和功能，需要一些特定的代码设计，那么为什么要施加这样的限制呢？任何人都可以帮助我理解这种结构的好处是什么？

Answer 1

您可以更改.angular-cli.json中的appRoot选项，以避免创建应用文件夹：

"apps": [
    {
      "appRoot": ".",
      "root": "src",
      "outDir": "dist",
      ...
    }
  ]

然后，您可以使用ng generate命令在组件文件夹中创建组件：

ng generate component components/common/search

如果您想跳过src的创建，请将"root"设为"\\"

Answer 2

就我可以从@angular/cli源调试而言，可以在src配置文件的apps[].root属性中设置.angular-cli.json部分。

但是，app/部分来自ember-cli蓝图，它似乎是构建Angular应用程序的固定路径。

如果放"root": "."，ng generate component new命令将在以下结构中创建组件：

-- app
    -- new
        -- new.component.css 
        -- new.component.html
        -- new.component.spec.ts
        -- new.component.ts

编辑：我还没有解决ng serve的一些问题，这些问题似乎与不使用＆＃34;意图＆＃34;结构，例如无法解析模块导入等。

Answer 3

这里解释了生成的东西的默认根路径是src / app并且它是硬编码的（意味着如果你不打算使用ng-cli，你就不能改变它，这是＆n ＃39;永远不是一个好主意。

https://github.com/angular/angular-cli/issues/3095

Answer 4

我使用了类似的东西：如果需要，可以使用某些组件进入\ common \目录。

Angular CLI的自定义文件夹结构

4 个答案: