Question

我正在开展角度4项目。当我运行＆＃34; ng build -prod -aot = false＆＃34;要构建生产项目，我有错误信息，如下所示：

时间：44075毫秒 chunk {0} polyfills.d8674538798840c67825.bundle.js（polyfills）252 kB {5} [initial] [rendered] chunk {1} main.2d2d57386cb503360e3d.bundle.js（main）72 kB {4} [initial] [rendered] chunk {2} scripts.d0a13d2099c21c77943a.bundle.js（scripts）410 kB {5} [initial] [rendered] chunk {3} styles.aef7beffbbfb61f4f445.bundle.css（styles）175字节{5} [initial] [rendered] chunk {4} vendor.e29287b60dbca26b1047.bundle.js（vendor）3.43 MB [initial] [rendered] chunk {5} inline.6266454082b265a77bf0.bundle.js（inline）0 bytes [entry] [rendered]

＆＃34; ERROR in Error遇到静态解析符号值。不支持函数调用。考虑使用对导出函数的引用替换函数或lambda（原始.ts文件中的位置66:27），解析C中的符号AppModule：/Ashirama_workspace/angularproject/src/app/app.module.ts" < / p>

这是我的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() {
  ....
}

有关更详细的说明，请参阅this Github post。

修改

在您的情况下，您必须使用工厂方法替换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] },

构建用于生产的角度4项目

2 个答案: