Angular 5：'flash-messages' 不是已知元素答案

【问题标题】：Angular 5: 'flash-messages' is not a known elementAngular 5：'flash-messages' 不是已知元素
【发布时间】：2018-01-27 15:31:18
【问题描述】：

我正在尝试使用 Angular Flash 消息模块，如本文所示： https://www.npmjs.com/package/angular-flash-message

但是，我收到此错误：

> compiler.js:485 Uncaught 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. ("<app-navbar></app-navbar><div
> class="container">[ERROR
> ->]<flash-messages></flash-messages><router-outlet></router-outlet> </div>"): ng:///AppModule/AppComponent.html@2:8

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';
import { NavbarComponent } from './components/navbar/navbar.component';
import { LoginComponent } from './components/login/login.component';
import { HomeComponent } from './components/home/home.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import { ProfileComponent } from './components/profile/profile.component';
import { RegisterComponent } from './components/register/register.component';

import { ValidateService } from './services/validate.service';
import {FlashMessageModule} from 'angular-flash-message'

@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent,
    LoginComponent,
    HomeComponent,
    DashboardComponent,
    ProfileComponent,
    RegisterComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    RouterModule,
    FormsModule,
    FlashMessageModule
  ],
  providers: [ValidateService],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<app-navbar></app-navbar>
<div class="container">
        <flash-messages></flash-messages>
        <router-outlet></router-outlet>
</div>

registration.component.ts

import { Component, OnInit } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { ValidateService } from '../../services/validate.service';
import { FlashMessage } from 'angular-flash-message';

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

  name: String;
  username: String;
  email: String;
  password: String;

  constructor(
    private validateService: ValidateService,
    private flashMessage: FlashMessage
  ) { }

  ngOnInit() {
  }

  onRegisterSubmit(){
    const user = {
      name: this.name,
      username: this.username,
      email: this.email,
      password: this.password
    }

    //Required fields
    if(!this.validateService.validateRegister(user)){
      //fill in all fields
      this.flashMessage.info("Incorrect!")
      return false;
    }
    
    if(!this.validateService.validateEmail(user.email)){

      //email incorrect
      return false;
    }

  }

}

在验证用户输入后，我正在尝试显示一条 Flash 消息。我是 Angular 和 MEAN 应用程序的新手，这实际上是使用 Angular 2 的教程中展示的应用程序。

有人可以帮帮我吗？谢谢！

【问题讨论】：

标签： angular5

【解决方案1】：

我不确定

import {FlashMessageModule} from 'angular-flash-message'

正常工作。我建议使用

import {FlashMessageModule} from 'angular2-flash-messages'`.

他们的文档在这里：https://www.npmjs.com/package/angular2-flash-messages

我浏览了 angular-flash 消息文档、angular2-flash-message 文档（末尾没有 's'）和 angular2-flash-messages（末尾有 's'）和只有一个对我有用的是最后一个。

【讨论】：

谢谢！我通过添加 import {FlashMessagesModule} from 'angular2-flash-messages' import { FlashMessagesService } from 'angular2-flash-messages/module/flash-messages.service'; 并在 app.module.ts 的 providers 数组中添加服务来让它工作

【解决方案2】：

此外，除了您的导入之外，我还发现它有助于确保您已安装 @angular/common，以防万一：

npm install @angular/common --save

希望对你有帮助

【讨论】：

【解决方案3】：

哦，我认为它不应该是

错误

imports: [ BrowserModule, FormsModule, RouterModule.forRoot(appRoutes), AngularFireModule.initializeApp(fireBase), FlashMessagesModule ],

应该是

imports: [ BrowserModule, FormsModule, RouterModule.forRoot(appRoutes), AngularFireModule.initializeApp(fireBase), FlashMessagesModule.forRoot() ],

我也有同样的问题，并通过在我的导入中添加 FlashMessageModule.forRoot() 来解决它

【讨论】：