Question

我想在我的应用程序的几个部分中使用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是其中的一部分 2个模块的声明：AppModule和LazyModule！请考虑将FpgTimeComponent移动到导入AppModule和的更高模块 LazyModule。您还可以创建一个导出和导出的新NgModule 包括FpgTimeComponent然后导入AppModule中的NgModule和 LazyModule。

我没有在任何地方导入LazyModule，因为它是延迟加载的。那么，我怎么能声明组件FpgTimeComponent能够在惰性模块内部（以及非惰性组件中）使用它？

提前致谢，

Answer 1

FpgTimeComponent不是将要加载的延迟模块文件的一部分，因此您无法执行此操作。考虑一下，你试图在懒惰模块中导入一个组件，模块一无所知，因为它没有在那个模块中定义，并且它没有在{{1}中导入的任何其他模块中定义。 }。那么从哪里获取组件？

将LazyModule添加到FpgTimeComponent并导入SharedModule中的SharedModule，或将LazyModule移至FpgTimeComponent。一旦你做了其中之一，它应该工作。

这是一种更好的方法，因为我可以保证，随着您的不断开发，您将与其他组件/其他惰性模块一起运行相同的错误。如果您在多个地方使用这些组件，那么它们应该位于LazyModule Angular best practices defines，SharedModule应该导入所有惰性模块。

这是一个例子。

<强> SharedModule：

SharedModule

<强> LazyModule：

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

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

在延迟加载的模块中使用Angular组件

1 个答案: