I got error while ng build --prod on my MEAN Stack App. The error message is :
ERROR in : Unexpected module 'FlashMessageModule in C:/mean/angular/node_modules/angular-flash-message/dist/flash-message.module.d.ts' declared by the module 'AppModule in C:/mean/angular/src/app/app.module.ts'. Please add a @Pipe/@Directive/@Component annotation.
But in my flash-message.module.ts I've declare NgModule :
import { NgModule } from '@angular/core';
@NgModule({})
export declare class FlashMessageModule {
}
And I've declare the flash-message to app.module.ts :
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule } from '../material.module';
import { FlexLayoutModule } from '@angular/flex-layout';
import { FormsModule, Validators, ReactiveFormsModule } from '@angular/forms';
import { RouterModule, Routes } from '@angular/router';
import { ValidateService } from '../services/validate.service';
import { AuthService } from '../services/auth.service';
import { CompanyService } from '../services/company.service';
import { AuthGuard } from './guards/auth.guard';
import { FlashMessageModule } from 'angular-flash-message';
import { HttpClientModule } from '@angular/common/http';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { HeaderComponent } from './templates/header/header.component';
import { FooterComponent } from './templates/footer/footer.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { ProfileComponent } from './profile/profile.component';
import { DataTracerComponent } from './data-tracer/data-tracer.component';
import { LoggedInComponent } from './snackbar/logged-in/logged-in.component';
import { IndexCompanyComponent } from './company/index-company/index-company.component';
import { CreateCompanyComponent } from './company/create-company/create-company.component';
import { ViewCompanyComponent } from './company/view-company/view-company.component';
import { UpdateCompanyComponent } from './company/update-company/update-company.component';
import { AdminIndexComponent } from './admin/admin-index/admin-index.component';
import { AdminSidenavComponent } from './templates/admin-sidenav/admin-sidenav.component';
import { AdminToolbarComponent } from './templates/admin-toolbar/admin-toolbar.component';
import { AdminUsersComponent } from './admin/admin-users/admin-users.component';
import { AdminCompaniesComponent } from './admin/admin-companies/admin-companies.component';
import { AdminReportComponent } from './admin/admin-report/admin-report.component';
import { AdminGuard } from './guards/admin.guard';
import { AdminComponent } from './admin/admin/admin.component';
import { AdminQuestionerComponent } from './admin/admin-questioner/admin-questioner.component';
import { AdminCreateCompanyComponent } from './admin/admin-companies/admin-create-company/admin-create-company.component';
import { AdminUpdateCompanyComponent } from './admin/admin-companies/admin-update-company/admin-update-company.component';
import { ReportComponent } from './report/report.component';
import { CompanyFilterPipe } from './dashboard/company-pipe.filter';
import { Page404Component } from './error/page404/page404.component';
import { Page403Component } from './error/page403/page403.component';
import { ReportService } from '../services/report.service';
import { ViewReportComponent } from './admin/admin-report/view-report/view-report.component';
const appRoutes:Routes =[
{
path: '',
component: LoginComponent
},
{
path: 'header',
component: HeaderComponent
},
{
path: 'admin',
component: AdminIndexComponent
},
{
path: 'admin/users',
component: AdminUsersComponent
},
{
path: 'admin/companies',
component: AdminCompaniesComponent
},
{
path: 'admin/companies/create',
component: AdminCreateCompanyComponent
},
{
path: 'admin/companies/update/:id',
component: AdminUpdateCompanyComponent
},
{
path: 'admin/report',
component: AdminReportComponent
},
{
path: 'admin/questioner',
component: AdminQuestionerComponent
},
{
path: 'dashboard',
component: DashboardComponent
},
{
path: 'profile',
component: ProfileComponent
},
{
path: 'data-tracer',
component: DataTracerComponent
},
{
path: 'company',
component: IndexCompanyComponent
},
{
path: 'company/addCompany',
component: CreateCompanyComponent
},
{
path: 'company/updateCompany/:id',
component: UpdateCompanyComponent
},
{
path: 'companies/:id',
component: ViewCompanyComponent
},
{
path: 'report/:id',
component: ReportComponent
},
{
path: 'view-report/:id',
component: ViewReportComponent
},
{
path: 'forbidden',
component: Page403Component
},
{
path: 'notfound',
component: Page404Component
}
]
@NgModule({
declarations: [
CompanyFilterPipe,
AppComponent,
LoginComponent,
HeaderComponent,
FooterComponent,
DashboardComponent,
ProfileComponent,
DataTracerComponent,
LoggedInComponent,
IndexCompanyComponent,
CreateCompanyComponent,
ViewCompanyComponent,
UpdateCompanyComponent,
AdminIndexComponent,
AdminSidenavComponent,
AdminToolbarComponent,
AdminUsersComponent,
AdminCompaniesComponent,
AdminReportComponent,
AdminComponent,
AdminQuestionerComponent,
AdminCreateCompanyComponent,
AdminUpdateCompanyComponent,
ReportComponent,
Page404Component,
Page403Component,
ViewReportComponent,
FlashMessageModule
],
imports: [
HttpModule,
HttpClientModule,
FlashMessageModule,
RouterModule.forRoot(appRoutes),
BrowserModule,
FormsModule,
ReactiveFormsModule,
BrowserAnimationsModule,
MaterialModule,
FlexLayoutModule,
],
providers: [ValidateService, AuthService, AuthGuard, AdminGuard, CompanyService, ReportService],
bootstrap: [AppComponent]
})
export class AppModule { }
I got error on my browser if do ng build without --prod flag:
Uncaught Error: Unexpected module 'FlashMessageModule' declared by the module 'AppModule'. Please add a @Pipe/@Directive/@Component annotation.
at syntaxError (compiler.js:485)
at compiler.js:15289
at Array.forEach (<anonymous>)
at CompileMetadataResolver.push../node_modules/@angular/compiler/esm5/compiler.js.CompileMetadataResolver.getNgModuleMetadata (compiler.js:15271)
at JitCompiler.push../node_modules/@angular/compiler/esm5/compiler.js.JitCompiler._loadModules (compiler.js:34404)
at JitCompiler.push../node_modules/@angular/compiler/esm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:34365)
at JitCompiler.push../node_modules/@angular/compiler/esm5/compiler.js.JitCompiler.compileModuleAsync (compiler.js:34259)
at CompilerImpl.push../node_modules/@angular/platform-browser-dynamic/esm5/platform-browser-dynamic.js.CompilerImpl.compileModuleAsync (platform-browser-dynamic.js:239)
at PlatformRef.push../node_modules/@angular/core/esm5/core.js.PlatformRef.bootstrapModule (core.js:5551)
at Object../src/main.ts (main.ts:11)
Another Edit, if I do ng build, and run the index.html, it show nothing. But when I check on browser's console, it give me :
Failed to load resource: net::ERR_FILE_NOT_FOUND polyfills.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND styles.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND vendor.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND main.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND /C:/favicon.ico:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
Edited after remove declare and FlashMessageModule on App.Module.ts, I got this on my browser's log :
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. ("
<div class="flash-message">
<mat-card-content>
[ERROR ->]<flash-messages>
</flash-messages>
</mat-card-content>
"): ng:///AppModule/LoginComponent.html@10:6
