在延迟加载的模块中使用 Angular 组件 [英] Using Angular component in lazy loaded modules

问题描述

我想在应用程序的多个部分使用 Angular 组件，包括在延迟加载模块内的组件中.我不知道如何声明组件以在惰性模块中使用它.我将向您展示不同文件的一些相关部分:

I want to use an Angular component in several parts of my application, including in a component inside a lazy loaded module. I don't know how to declare the component for using it in the lazy module. I'll show you some of the relevant parts of the different files:

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
    ]
})

应用程序加载，但是当我转到懒惰路线时，它会引发以下错误:

The app loads, but when I go to the lazy route, it throws the following error:

Uncaught (in promise): Error: Type FpgTimeComponent is part of the2 个模块的声明:AppModule 和 LazyModule！请考虑将 FpgTimeComponent 移动到更高的模块，该模块导入 AppModule 和懒惰模块.你也可以创建一个新的 NgModule 来导出和包括 FpgTimeComponent 然后在 AppModule 中导入 NgModule 和懒惰模块.

Uncaught (in promise): Error: Type FpgTimeComponent is part of the declarations of 2 modules: AppModule and LazyModule! Please consider moving FpgTimeComponent to a higher module that imports AppModule and LazyModule. You can also create a new NgModule that exports and includes FpgTimeComponent then import that NgModule in AppModule and LazyModule.

我没有在任何地方导入 LazyModule，因为它是延迟加载的.那么，我如何声明组件 FpgTimeComponent 能够在惰性模块(以及非惰性组件)中使用它?

I'm not importing LazyModule anywhere, as it's being lazy loaded. So, how could I declare the component FpgTimeComponent to be able to use it inside the lazy module (and also in non-lazy components)?

提前致谢，

推荐答案

FpgTimeComponent 不是将要加载的惰性模块的文件的一部分，因此您不能这样做.想一想，您正试图在惰性模块中导入一个组件，该模块对此一无所知，因为它未在该模块中定义，并且未在您在 LazyModule 中导入的任何其他模块中定义.那么它将从哪里获取组件?

FpgTimeComponent is not a part of the files of the lazy module that will be loaded, so you can't do that. Think about it, you are trying to import a component in the lazy module that the module knows nothing about since it isn't defined in that module, and it isn't defined in any other module you have imported in the LazyModule. So where is it going to get the component from?

将 FpgTimeComponent 添加到 SharedModule 并在您的 LazyModule 中导入 SharedModule，或移动 FpgTimeComponent 到您的 LazyModule.一旦你做了其中之一，它就会起作用.

Add FpgTimeComponent to a SharedModule and import the SharedModule in your LazyModule, or move the FpgTimeComponent to your LazyModule. Once you do one of those, it should work then.

前者可能是更好的方法，因为我可以保证，随着您继续开发，您将继续遇到与其他组件/惰性模块相同的错误.如果您在多个地方使用这些组件，那么它们应该以 SharedModule 中>Angular 最佳实践定义，并且SharedModule 应该被导入到你所有的惰性模块中.

The former might be a better approach because I can guarantee as you keep developing you will keep running into the same error with other components/lazy modules. If you are using the components in multiple places, then they should live in a SharedModule as Angular best practices defines, and that SharedModule should be imported in all your lazy modules.

这是一个例子.

共享模块:

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

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

懒惰模块:

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

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

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

这篇关于在延迟加载的模块中使用 Angular 组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！