角度CLI生产构建时出错

时间:2017-11-27 13:19:28

标签: javascript angular angular-cli flash-message

我正在尝试使用angular cli 1.5.2版的命令构建角度版本5应用程序:

ng build --prod

但它给了我这个错误:

  

错误中的错误:静态解析符号值时出错。调用功能' FlashMessagesModule',不支持函数调用。考虑使用对导出函数的引用来重放函数或lambda,在D:/Project/mean-auth-app/angular-src/src/app/app.module.ts中解析sy mbol AppModule,重新解决符号AppModule in D:/Project/mean-auth-app/angular-src/src/app/app.mod ule.ts

似乎angular v5.0与angular2-flash-messages模块版本2.0.0有冲突。 我完成了同样的事情here来安装和设置flash消息模块。我搜索了但是我找不到任何有用的提示。有些人称之为bug,有些人可以通过卸载/安装有问题的软件包解决问题。

我的应用模块:



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 { }




我很欣赏任何提示来解决这个问题。

2 个答案:

答案 0 :(得分:2)

编辑:以下内容也会破坏--prod版本,但该邮件会标记另一个问题。

我看了一下angular2-flash-messages包,错误在于他们的代码: 他们没有添加角度编译器所需的元数据。 在解决以下问题之前,没有解决方案:https://github.com/moff/angular2-flash-messages/issues/31

旧答案:

您不能在装饰器中使用lambda函数。

错误在于:

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

问题是,如果使用lambda函数,angular将无法存储有关装饰器的所有必需信息,但可以使用导出的函数。

您必须将其重写为:

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

你应该可以在你的代码中使用它:

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

答案 1 :(得分:0)

在AngularCLI的tsconfig.json中指定@angular的路径可防止错误发生。

"paths": { "@angular/*": ["../node_modules/@angular/*"] }

参考:link