Angular2 x-i18nエラー：モジュールによってインポートされた予期せぬ値

Question

私はAngular2（v2.2.1）とTypeScriptに関するプロジェクトを持っており、Angular CLI（1.0.0-beta.21）を使っています。それはうまく動作します。今、私はAngular i18nで多言語サポートを追加したいと思います。私は、このパッケージをインストールして公式ドキュメントからinstuctions続い：

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 
 
    }

は、私はこの問題の理由、そして私が発見したを見つけるために、ビットfirtherを移動しました。 Angular CLIはWebpackを使用してバンドルをコンパイルし、ngcはTypeScriptコンパイラを使用します。だから私は問題がクラスのデコレータで正しく動作しないTypeScriptコンパイラにあると仮定しました。最新のTypeScriptコンパイラバージョンは2.1.4、Angular CLIは2.0.xバージョンを使用しています。私はこれをチェックし、2.1.4にTypeScriptコンパイラを更新した後、この問題は解消されました。