Можно ли импортировать объекты NgModule из отдельного файла?

Question

Я пытаюсь очистить структуру моего приложения и поместить все в логические файлы. Я делаю это часто в C #. Можно ли вытащить объявления в отдельный файл и присвоить значение переменной объявлений в NgModule?

До:

app.module.ts

declarations: [
    AppComponent,
    NavMenuComponent,
    FooterComponent,
    DirectNextStepComponent,
    TermsOfServiceComponent,
    PrivacyStatementComponent,
    WorkQueuesComponent,
    HomeComponent,
    UnitedMatTableComponent,
    ProcessDirectNextStepComponent,
],

Желаемый после:

app.module.ts

//this does not compile 
declarations : [] = components,
//this also does not compile
declarations = components,

app.declarations.ts

export const components = [
    AppComponent,
    NavMenuComponent,
    FooterComponent,
    DirectNextStepComponent,
    TermsOfServiceComponent,
    PrivacyStatementComponent,
    WorkQueuesComponent,
    HomeComponent,
    UnitedMatTableComponent,
    ProcessDirectNextStepComponent,
];

Answer 1

Это на самом деле возможно. Сначала вы можете импортировать их в файл объявлений:

import { AppComponent } from "./app.component";
import { HelloComponent } from "./hello.component";
import { OneComponent } from "./one/one.component";
import { TwoComponent } from "./two/two.component";
import { ThreeComponent } from "./three/three.component";
import { FourComponent } from "./four/four.component";

export const components = [
  AppComponent,
  HelloComponent,
  OneComponent,
  TwoComponent,
  ThreeComponent,
  FourComponent
];

, а затем использовать его следующим образом:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from "./app.component";
import { components } from './app.declarations';

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ components ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

---

Вот Рабочий образец StackBlitz для вашей ссылки.

PS: Это образец, который я действительно не видел, чтобы кто-то его поддерживал. Это было бы больше анти-паттерна в некоторых сценариях. Причиной этого может быть случай, когда вам может понадобиться использовать одно и то же имя компонента в нескольких местах (declarations, bootstrap, entryComponents)

Answer 2

AFAIK, есть общий способ сделать это:

app-routing.module.ts

const routes: Routes = [
 {
  path: 'foo',
  component: FooComponent
 },
 {
  path: 'bar',
  component: BarComponent
 },
]

@NgModule({ /* ... */ })
export class AppRoutingModule {
 static components = [
   BarComponent,
   FooComponent,
 ];
}

app.module.ts

import { AppRoutingModule } from './app-routing.module';

@NgModule({
 declarations: [AppRoutingModule.components],
 imports: [AppRoutingModule, /* ... */]
})
export class AppModule { }

Answer 3

Почему бы не сделать его отдельным угловым модулем? Поместите

declarations: [
    AppComponent,
    NavMenuComponent,
    FooterComponent,
    DirectNextStepComponent,
    TermsOfServiceComponent,
    PrivacyStatementComponent,
    WorkQueuesComponent,
    HomeComponent,
    UnitedMatTableComponent,
    ProcessDirectNextStepComponent,
],
exports: [/* same stuff as above */]

и в вашем AppModule просто добавьте один модуль (одну строку) к импорту.

Answer 4

Не знаю, понимаю ли я, вы пробовали с

[... components] в ES6?

В качестве альтернативы для машинописного текста вы можете попробовать статический массив в отдельном классе:

export class Config {
   public static readonly components = []

}

и так:

Config.components