建立生產的角度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]
    },