Error at angular CLI production build

Question

I am trying to build the angular version 5 application for production with this command of angular cli version 1.5.2:

ng build --prod

but it gives me this error :

ERROR in Error: Error encountered resolving symbol values statically. Calling fu nction 'FlashMessagesModule', function calls are not supported. Consider replaci ng the function or lambda with a reference to an exported function, resolving sy mbol AppModule in D:/Project/mean-auth-app/angular-src/src/app/app.module.ts, re solving symbol AppModule in D:/Project/mean-auth-app/angular-src/src/app/app.mod ule.ts

It seems angular v5.0 has a conflict with angular2-flash-messages module version 2.0.0. I did exactly the same thing here to install and setup the flash messages module. I searched but i couldn't find any useful hint. Some people call it a bug and some people could solve their problem with uninstall/install the problematic package.

My app module :

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { RouterModule, Routes } from '@angular/router';
import { HttpModule } from '@angular/http';

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

import { FlashMessagesModule } from 'angular2-flash-messages';
import { JwtModule } from '@auth0/angular-jwt';
import { HttpClientModule } from '@angular/common/http';
import { AuthGuard } from './services/auth-guard.service';

const routes = [
  { path: '', component: HomeComponent },
  { path: 'register', component: RegisterComponent },
  { path: 'login', component: LoginComponent },
  { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard]},
  { path: 'profile', component: ProfileComponent, canActivate: [AuthGuard]}
];

@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent,
    LoginComponent,
    RegisterComponent,
    HomeComponent,
    DashboardComponent,
    ProfileComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    FlashMessagesModule.forRoot(),
    RouterModule.forRoot(routes),
    HttpClientModule,
    JwtModule.forRoot({
      config: {
        tokenGetter: () => {
          return localStorage.getItem('token');
        },
        whitelistedDomains: ['localhost:4200']
      }
    })
  ],
  providers: [AccountService, AuthGuard],
  bootstrap: [AppComponent]
})
export class AppModule { }

I appreciate any hint to solve this problem.

As the message says: You are not allowed to use a lamda function in a Decorator. Try to rewrite it to an exported function that you reference by the tokenGetter. — Dinistro
@Dinistro Thanks for replying. But it mentioned the FlashMessagesModule — peyman gilmour

Dinistro Dinistro · Accepted Answer · 2017-11-27T13:28:07

EDIT: The following will also break the --prod build, but the message marks another problem.

I took a look at the angular2-flash-messages package and the error lies in their code: They don't add the required metadata of the angular compiler. There is no solution until following issue is fixed: https://github.com/moff/angular2-flash-messages/issues/31

Old answer:

You aren't allowed to use lambda functions in a decorator.

The error lies here:

config: {
    tokenGetter: () => {  // <- here
        return localStorage.getItem('token');
    },
    whitelistedDomains: ['localhost:4200']
}

The problem is, that angular will not be able to store all required informations about the decorator if you use a lambda function, but an exported function can be used.

You have to rewrite it to:

export function tokenGetter() {
    return localStorage.getItem('token');
}

And you should be able to use it like this in your code:

config: {
    tokenGetter: tokenGetter,
    whitelistedDomains: ['localhost:4200']
}

Error at angular CLI production build

2 Answers