Angular <custom-component> 不适用于延迟加载的模块

Posted 2023-02-23

【中文标题】Angular <custom-component> 不适用于延迟加载的模块

【英文标题】：Angular <custom-component> doesnt work on lazy-loaded modules

【发布时间】：2017-09-09 03:57:13

【问题描述】：

我创建了一个在 app.component 上运行良好的自定义组件，但是当 <custom-component> 用于延迟加载模块时，它会报错：

Error: Template parse errors:
'my-component' is not a known element:
1. If 'my-component' is an Angular component, then verify that it is part of this module.
2. If 'my-component' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

我正在使用 Angular 4.0.0 / CLI

代码：

app.module.ts

...

import  LoaderComponent  from './shared/components/list-components/loader/loader.component';

@NgModule(
  declarations: [
    AppComponent,
    LoaderComponent <- declared here because I need the component in multiple modules
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
)
export class AppModule  

loader.component.ts

import  Component, OnInit, Input, Output  from '@angular/core';

@Component(
  selector: 'my-component',
  templateUrl: './loader.component.html',
  styleUrls: ['./loader.component.css']
)
export class LoaderComponent implements OnInit 
  @Input() type:any;

  constructor()  

  ngOnInit() 
  

app-routing.module.ts

import  NgModule  from '@angular/core';
import  Routes, RouterModule  from '@angular/router';

const routes: Routes = [

   path: 'lazy', loadChildren: './lazy/lazy.module#LazyModule' ,

];

@NgModule(
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
)
export class AppRoutingModule  

app.component.html

<router-outlet></router-outlet>
<my-component></my-component> <-- works here

和lazy.component.html

<p>
  this module is lazy loaded
  <my-component ></my-component> <- not working
</p>

有什么想法吗？

* 更新 *

我创建了一个声明 LoaderComponent 的 SharedModule。 SharedModule 被导入到每个需要 LoaderComponent 的模块中。有效！

【问题讨论】：

更新用于延迟加载的路由配置

@Aravind 添加。我也尝试过使用 PreloadAllModules，但这没有帮助

定义中没有其他路线？只有一个？

@Aravind 还有很多其他路线，但我删除了与此问题无关的所有内容

【参考方案1】：

你需要创建LoaderModule：

@NgModule(
  imports: [],
  exports: [LoaderComponent],
  declarations: [LoaderComponent],
  providers: [],
)
export class LoaderModule 

然后将此模块添加到app.module中

@NgModule(
  declarations: [
    AppComponent,
  ],
  imports: [
    LoaderModule,
    BrowserModule,
    FormsModule,
    HttpModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
  )
  export class AppModule  

确保将 LoaderModule 也添加到 LazyModule

【讨论】：

这是否意味着我需要为我想使用的每个自定义组件创建一个模块？

如果你想在不同的模块中使用这个组件你需要为这个组件创建模块

【参考方案2】：

您的 AppModule 中有 LoaderComponent，但您的 LazyModule 包含 lazy.component.html，这是错误的。

通过移动 LoaderComponent 进行修复，该组件应位于 LazyModule 声明中。

@NgModule(
  declarations: [
    AppComponent,
    LoaderComponent //////////// which module does it belongs to?
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
)
export class AppModule  

需要更多信息来详细阐述帖子以进一步开展工作。

【讨论】：

如果我将 LoaderComponent 声明移动到 LazyModule 中，那么它可以工作，但是我需要在多个模块上使用该组件，这就是它在 app.module 中声明的原因