Question

我有一个midi组件定义为：

@Component({
  selector: 'midi-midi-lib',
  templateUrl: './midi-lib.component.html'
})

export class MidiLibComponent implements OnInit {
}

我还有一个home组件，定义为：

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
}

其模板包含标记：

<midi-midi-lib></midi-midi-lib>

midilib组件包含在其自己的模块中：

@NgModule({
  declarations: [
    MidiLibComponent,
  ],
  imports: [
  ],
  exports: [
    MidiLibComponent,
  ]
})
export class MidiLibModule { }

包含它的应用程序模块：

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

请注意，上面的代码是从许多其他组件和模块中删减的。

源代码树如下：

src
├── app
├── lib

，其中Midi组件位于lib目录下。

如果我随后将路由定义为：

{
  path: 'home',
  loadChildren: './views/home/home.module#HomeModule',
  data: {
    preload: true,
    delay: false
  }
},

使用https://dev.thalasoft.com:4200/home网址，然后页面显示错误：

Error: Uncaught (in promise): Error: Template parse errors:\n'midi-midi-lib' is not a known element

如果我在终端中输入ng build --prod命令，则会收到相同的错误：

ERROR in : 'midi-midi-lib' is not a known element:
1. If 'midi-midi-lib' is an Angular component, then verify that it is part of this module.
2. If 'midi-midi-lib' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
  <mat-card-content>
    <p>
      [ERROR ->]<midi-midi-lib></midi-midi-lib>
    </p>
  </mat-card-content>
")

如果我将路由定义为：

{
  path: 'midi',
  component: MidiLibComponent
},

在带有app-routing.module网址的https://dev.thalasoft.com:4200/midi文件中

然后找到该组件，并且其内容显示得很好。

我在Angular 8.1.3下

Answer 1

由于延迟加载HomeComponent，因此应将MidiLibModule而不是HomeModule中的AppModule导入。同样在Angular 8中，建议在路由模块中使用动态导入，例如：

{
  path: 'home',
  loadChildren: () => import('./views/home/home.module').then(mod => mod.HomeModule),
  data: {
    preload: true,
    delay: false
  }
},

模板解析错误：不是已知元素

1 个答案: