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。

'flash-messages'不是角度为6的已知元素

1 个答案: