Использование компонента Angular в ленивых загружаемых модулях

Я хочу использовать компонент Angular в нескольких частях моего приложения, в том числе в компоненте внутри модуля с отложенной загрузкой. Я не знаю, как объявить компонент для его использования в ленивом модуле. Я покажу вам некоторые важные части разных файлов:

app.module.ts

import { FpgTimeComponent } from './fpgTime/fpg-time.component';


@NgModule({
  declarations: [
      AppComponent, 
      (...)
      FpgTimeComponent

app.routing.ts

const appRoutes: Routes = [

    { path: '', redirectTo: 'customer', pathMatch: 'full' },
    {
        path: 'customer',
        component: CustomerComponent
    },
    {
        path: 'lazy',
        loadChildren: 'app/lazy/lazy.module#LazyModule'
    }
];

lazy.module.ts

import { FpgTimeComponent } from '../fpgTime/fpg-time.component';

import { LazyComponent }   from './lazy.component';
import { routing } from './lazy.routing';

@NgModule({
    imports: [routing],
    declarations: [
        LazyComponent, 
        FpgTimeComponent
    ]
})

Приложение загружается, но когда я перехожу на ленивый маршрут, возникает следующая ошибка:

Неперехваченный (в обещании): Ошибка: Тип FpgTimeComponent является частью объявлений двух модулей: AppModule и LazyModule! Пожалуйста, подумайте о перемещении FpgTimeComponent в модуль более высокого уровня, который импортирует AppModule и LazyModule. Вы также можете создать новый NgModule, который экспортирует и включает FpgTimeComponent, а затем импортировать этот NgModule в AppModule и LazyModule.

Я никуда не импортирую LazyModule, так как он загружается лениво. Итак, как я могу объявить компонент FpgTimeComponent, чтобы иметь возможность использовать его внутри ленивого модуля (а также в неленивых компонентах)?

Заранее спасибо,


angular
person Fel    schedule 28.03.2018    source источник

Ответы (1)


arrow_upward
11
arrow_downward

FpgTimeComponent не является частью файлов ленивого модуля, которые будут загружены, поэтому вы не можете этого сделать. Подумайте об этом, вы пытаетесь импортировать компонент в ленивый модуль, о котором модуль ничего не знает, поскольку он не определен в этом модуле и не определен ни в одном другом модуле, который вы импортировали в LazyModule. Так откуда же взять компонент?

Добавьте FpgTimeComponent в SharedModule и импортируйте SharedModule в свой LazyModule или переместите FpgTimeComponent в свой LazyModule. Как только вы выполните одно из этих действий, оно должно сработать.

Первый может быть лучшим подходом, потому что я могу гарантировать, что по мере того, как вы продолжаете разработку, вы будете продолжать сталкиваться с той же ошибкой с другими компонентами / ленивыми модулями. Если вы используете компоненты в нескольких местах, они должны находиться в SharedModule, поскольку передовой опыт Angular определяет, и этот SharedModule должен быть импортирован во все ваши ленивые модули.

Вот пример.

SharedModule:

import { FpgTimeComponent } from './some/path';

@NgModule({
    declarations: [
        FpgTimeComponent
    ],
    exports: [
        FpgTimeComponent
    ]
})

LazyModule:

import { SharedModule } from '../shared/shared.module';

import { LazyComponent }   from './lazy.component';
import { routing } from './lazy.routing';

@NgModule({
    imports: [
        routing,
        SharedModule
    ],
    declarations: [
        LazyComponent
    ]
})
person Lansana Camara    schedule 28.03.2018
comment
Без проблем. Вы можете создать каталог shared, в котором будет находиться SharedModule, и ваш FpgTimeComponent компонент и все другие общие компоненты / директивы / трубы / и т.д. могут все находиться в этом каталоге shared, и вы импортируете / экспортируете их все в SharedModule, а затем используйте это как угодно в вашем приложении. Посмотрите на официальный пример Angular для SharedModule: angular.io/guide/sharing-ngmodules - person Lansana Camara; 28.03.2018
comment
В сценарии, где у вас есть TestModule (загруженный модуль Lasy), где вы динамически визуализируете все компоненты изолированно (один за другим, по запросу) для ручного тестирования. Это означает, что все ваши компоненты должны будут находиться в SharedModule, поскольку они требуются как модулю тестирования, так и другим модулям с отложенной загрузкой. Мой вопрос: есть ли тогда польза от ленивых загружаемых модулей, если все компоненты необходимо загружать через общий модуль? - person Johan Aspeling; 18.12.2018
comment
Почему документация по Angular не может быть такой ясной? (спасибо за отличный пример!) - person tonejac; 18.03.2020
comment
хорошо, а что с app.module.ts? Должен ли я декларировать в разделе «декларация» - FpgTimeComponent? - person TheBatman94; 20.05.2021