javascript - 'flash-messages' 不是已知元素 angular 6

Question

我有一个奇怪的问题我在我的 Angular 6 项目中使用了 angular2-flash-messages。我已经通过 npm 安装了它，将它作为模块添加到 app.module.ts 中

import { FlashMessagesModule } from 'angular2-flash-messages';

将其添加到模块部分

imports: [
BrowserModule,
BrowserAnimationsModule,
DemoMaterialModule,
FormsModule,
FlexLayoutModule,
HttpClientModule,
PerfectScrollbarModule,
SharedModule,
AngularFireModule.initializeApp(environment.firebase, 'angular-auth-firebase'),
AngularFireDatabaseModule,
AngularFireAuthModule,
RouterModule.forRoot(AppRoutes),
FlashMessagesModule.forRoot()

然后我将服务添加到我的 login.component.ts

import { FlashMessagesService } from 'angular2-flash-messages';

但是当我添加

<flash-messages></flash-messages>

到 login.component.html在错误控制台中触发的错误

ERROR Error: Uncaught (in promise): Error: Template parse errors:
'flash-messages' is not a known element:
1. If 'flash-messages' is an Angular component, then verify that it is part of this module.
2. If 'flash-messages' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<flash-messages></flash-messages>
<div class="login-register"  style="background-image:url(assets/ima"): ng:///AuthenticationModule/LoginComponent.html@0:0
Error: Template parse errors:
'flash-messages' is not a known element:
1. If 'flash-messages' is an Angular component, then verify that it is part of this module.
2. If 'flash-messages' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<flash-messages></flash-messages>
<div class="login-register"  style="background-image:url(assets/ima"): ng:///AuthenticationModule/LoginComponent.html@0:0
    at syntaxError (compiler.js:215)
    at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:14702)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:22709)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:22696)
    at compiler.js:22639
    at Set.forEach (<anonymous>)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:22639)
    at compiler.js:22549
    at Object.then (compiler.js:206)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:22548)
    at syntaxError (compiler.js:215)
    at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:14702)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:22709)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:22696)
    at compiler.js:22639
    at Set.forEach (<anonymous>)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:22639)
    at compiler.js:22549
    at Object.then (compiler.js:206)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:22548)
    at resolvePromise (zone.js:814)
    at resolvePromise (zone.js:771)
    at zone.js:873
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:4053)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:595)

但是如果我添加

<flash-messages></flash-messages>

像这样到主应用程序组件(app.component.html)

<router-outlet>
  <flash-messages></flash-messages>
</router-outlet>

一切正常。

我该如何解决？

Answer 1

您必须为要在其中使用它的每个模块导入 FlashMessagesModule。在某些情况下，您需要在已经导入 .forChild() 时导入它，例如RouterModule.forChild(routes)，但不适用于 FlashMessagesModule。