Angular2 x-i18n 错误 : Unexpected value imported by the module

Question

我有一个关于 Angular2 (v2.2.1) 和 TypeScript 的项目，我为此使用了 Angular CLI (1.0.0-beta.21)。它工作正常。现在我想用 Angular i18n 添加多语言支持。按照官方文档的说明，我安装了这个包:

npm install @angular/compiler-cli @angular/platform-server --save


然后我运行了这个命令:

./node_modules/.bin/ng-xi18n"-p src/tsconfig.json


它返回错误信息:

Error: Unexpected value 'SharedModule' imported by the module 'AppModule'
at D:\Projects\courier-landingpage\node_modules\@angular\compiler\bundles\compiler.umd.js:14675:33
at Array.forEach (native)
at CompileMetadataResolver._loadNgModuleMetadata (D:\Projects\courier-landingpage\node_modules\@angular\compiler\bundles\compiler.umd.js:14660:51)
at CompileMetadataResolver.getUnloadedNgModuleMetadata (D:\Projects\courier-landingpage\node_modules\@angular\compiler\bundles\compiler.umd.js:14636:23)
at addNgModule (D:\Projects\courier-landingpage\node_modules\@angular\compiler\bundles\compiler.umd.js:12944:43)
at D:\Projects\courier-landingpage\node_modules\@angular\compiler\bundles\compiler.umd.js:12957:16
at Array.forEach (native)
at _createNgModules (D:\Projects\courier-landingpage\node_modules\@angular\compiler\bundles\compiler.umd.js:12956:28)
at analyzeNgModules (D:\Projects\courier-landingpage\node_modules\@angular\compiler\bundles\compiler.umd.js:12700:16)
at Object.analyzeAndValidateNgModules (D:\Projects\courier-landingpage\node_modules\@angular\compiler\bundles\compiler.umd.js:12704:20)

有什么办法可以解决这个错误，或者有什么办法可以继续国际化工作吗？

列出我的 AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { SharedModule } from './shared/shared.module';
import { TextMaskModule } from 'angular2-text-mask';

import { HomeComponent } from './landing/home/home.component';
import { LoginComponent } from './landing/login/login.component';
import { SignupComponent } from './landing/signup/signup.component';
import { SignupProfileComponent } from './landing/signup/signup-profile/signup-profile.component';
import { SignupVehicleComponent } from './landing/signup/signup-vehicle/signup-vehicle.component';
import { SignupAreaComponent } from './landing/signup/signup-area/signup-area.component';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    LoginComponent,
    SignupComponent,
    SignupProfileComponent,
    SignupVehicleComponent,
    SignupAreaComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot([
      {
        path: 'login',
        component: LoginComponent
      },
      {
        path: 'signup',
        component: SignupComponent,
        children: [
          {
            path: '',
            children: [
              {
                path: 'profile',
                component: SignupProfileComponent
              },
              {
                path: 'area',
                component: SignupAreaComponent
              },
              {
                path: 'vehicle',
                component: SignupVehicleComponent
              }
            ]
          }
        ]
      },
      {
        path: '',
        component: HomeComponent
      }
    ]),
    TextMaskModule,
    SharedModule
  ],
  providers: [
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

SharedModule 列表:

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

    import { NotificationService, NotificationStream } from './notification.service';
    import { HttpClientService } from './api/http-client.service';
    import { AuthService } from './api/auth.service';
    import { CitiesService } from './api/cities.service';

    import { City } from './models/city';
    import { Notification } from './models/notification';
    import { NotificationType } from './models/notification-type.enum';

    import { NotificationComponent }   from './components/notification/notification.component';

    @NgModule({
      imports: [
        HttpModule,
        RouterModule,
        BrowserModule
      ],
      exports: [
        NotificationComponent
      ],
      declarations: [NotificationComponent],
      providers: [
        HttpClientService,
        AuthService,
        CitiesService,
        NotificationStream,
        NotificationService
      ],
    })
    class SharedModule { }

    export {
      SharedModule,
      City,
      Notification,
      NotificationType,
      HttpClientService,
      AuthService,
      CitiesService
    }

P.S.:我在 GitHub 上发现了很多与此错误相关的问题，但两种解决方案都不适合我。

Answer 1

我找到了适合我的解决方案。在我的 SharedModule 中，我从最终导出表达式中删除了 SharedModule 类，并在 NgModule 装饰器之后添加了“export”关键字。所以我的 SharedModule 现在:

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

    import { NotificationService, NotificationStream } from './notification.service';
    import { HttpClientService } from './api/http-client.service';
    import { AuthService } from './api/auth.service';
    import { CitiesService } from './api/cities.service';

    import { City } from './models/city';
    import { Notification } from './models/notification';
    import { NotificationType } from './models/notification-type.enum';

    import { NotificationComponent }   from './components/notification/notification.component';

    @NgModule({
      imports: [
        HttpModule,
        RouterModule,
        BrowserModule
      ],
      exports: [
        NotificationComponent
      ],
      declarations: [NotificationComponent],
      providers: [
        HttpClientService,
        AuthService,
        CitiesService,
        NotificationStream,
        NotificationService
      ],
    })
    export class SharedModule { }

    export {
      City,
      Notification,
      NotificationType,
      HttpClientService,
      AuthService,
      CitiesService
    }

然后我更深入地寻找这个问题的原因，以及我发现了什么。Angular CLI 使用 Webpack 编译 bundle，而 ngc 使用 TypeScript 编译器。所以我认为问题可能出在 TypeScript 编译器中，它不能与类装饰器一起正常工作。最新的 TypeScript 编译器版本是 2.1.4，Angular CLI 使用 2.0.x 版本。我检查了这个，在将 TypeScript 编译器更新到 2.1.4 之后，这个问题就消失了。