建立生产的角度4项目

Question

我正在从事angular 4项目。 当我运行“ ng build -prod -aot = false”来构建生产项目时，出现错误消息，如下所示：

时间：44075ms块{0} polyfills.d8674538798840c67825.bundle.js（polyfills）252 kB {5} [initial] [rendered]块{1} main.2d2d57386cb503360e3d.bundle.js（main）72 kB {4} [initial] [渲染]块{2}脚本.d0a13d2099c21c77943a.bundle.js（脚本）410 kB {5} [初始] [渲染]块{3} styles.aef7beffbbfb61f4f445.bundle.css（样式）175字节{5} [初始] [呈现]块{4} vendor.e29287b60dbca26b1047.bundle.js（供应商）3.43 MB [初始] [呈现]块{5}内联.6266454082b265a77bf0.bundle.js（内联）0字节[输入] [呈现]

“遇到错误时出现ERROR in静态地解析符号值。不支持函数调用。考虑使用对导出函数的引用替换函数或lambda（原始.ts文件中的位置66:27），解析C：/ Ashirama_workspace中的符号AppModule /angularproject/src/app/app.module.ts“

这是我的app.modu.ts文件：

    import { NgModule } from '@angular/core';
    import { FormsModule,ReactiveFormsModule } from '@angular/forms';
    import {NgForm} from '@angular/forms';
    import { Http, HttpModule } from '@angular/http';
    import { HttpClientModule } from '@angular/common/http';
    import { BrowserModule } from '@angular/platform-browser';
    import { BrowserAnimationsModule } from '@angular/platform-
    browser/animations';
    import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
    import { TranslateHttpLoader } from '@ngx-translate/http-loader';
    import { AppRoutingModule } from './app-routing.module';
    import { AppComponent } from './app.component';
    import { AuthGuard } from './shared/';
    import {Guards}from './guards/guards';
    import {AuthenticationService} from 
    "./services/authentification.service";
    import {UserService} from "./services/user.service";
    import {HttpService} from "./services/http.service";
    import {LoginComponent} from './login/login.component';
    import { AuthHttp, AuthConfig, AUTH_PROVIDERS, provideAuth } from 
     'angular2-jwt';
    import {ToastModule} from 'ng2-toastr/ng2-toastr';
    import { ToastrModule } from 'ngx-toastr';
    import { AlertModule } from 'ngx-bootstrap/alert';
    import { Ng2BootstrapModule } from 'ngx-bootstrap/ng2-bootstrap';

    // AoT requires an exported function for factories
    export function HttpLoaderFactory(http: Http) {
    // for development
    return new TranslateHttpLoader(http, '/assets/i18n/', '.json');
     }
     @NgModule({
       declarations: [
       AppComponent

     ],
     imports: [
     BrowserModule,
     BrowserAnimationsModule,
     FormsModule,
     ReactiveFormsModule,
     HttpModule,
     HttpClientModule,
     AppRoutingModule,
     ToastModule.forRoot(),
     ToastrModule.forRoot(),
     AlertModule.forRoot(),
     Ng2BootstrapModule,
     TranslateModule.forRoot({
        loader: {
            provide: TranslateLoader,
            useFactory: HttpLoaderFactory,
            deps: [Http]
          }
        })
      ],
     providers: [
     AuthGuard,
     AuthenticationService,
     UserService,
     HttpService,
     Guards,
     AuthHttp,
     provideAuth({
        headerName: 'Authorization',
        headerPrefix: 'Bearer',
        tokenName: 'id_token',
        tokenGetter: (() => localStorage.getItem('id_token')),
        globalHeaders: [{ 'Content-Type': 'application/json' }],
        noJwtError: true
    })


    ],
     bootstrap: [AppComponent]
      })
      export class AppModule {
        }

请让我知道我做错了，谢谢

Answer 1

好像摇树没有正确进行。 它在angular cli 1.4.x中已解决，但是如果您使用的是以前版本的angular cli，则可以添加反射元数据并尝试再次构建。

npm install -save reflect-metadata

Answer 2

您必须将lambda函数() => something转换为导出函数，例如

export function doSomething() {
  ....
}

有关更多详细说明，请参见此Github帖子 。

编辑：

在您的情况下，您必须使用工厂方法替换provideAuth和AuthHttp ：

export function getAuthHttp(http) {
  return new AuthHttp(new AuthConfig({
    headerName: 'Authorization',
    headerPrefix: 'Bearer',
    tokenName: 'id_token',
    tokenGetter: (() => localStorage.getItem('id_token')),
    globalHeaders: [{ 'Content-Type': 'application/json' }],
    noJwtError: true
  }), http);
}

接着

providers: [
    {
      provide: AuthHttp,
      useFactory: getAuthHttp,
      deps: [Http]
    },