Angular2 x-i18n error: Unexpected value imported by module

Question

I have a project in Angular2 (v2.2.1) and TypeScript, and I use the Angular CLI (1.0.0-beta.21) for it. It is working fine. Now I want to add multilingual support using Angular i18n. Following the instructions from the white papers, I installed these packages:

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

and I ran this command:

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

He returned me an error message:

 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) 

Is there any way to solve this error or come to it in order to continue work on internationalization?

Listing for my 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 { } 

List for 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 } 

PS: I found a lot of problems on GitHub related to this error, but no solution works for me.

Answer 1

I found a solution that works for me. In my SharedModule, I removed the SharedModule class from the final export expression and added the keyword "export" right after the NgModule decoder. So now my 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 } 

Then I moved a bit to find the cause of this problem, and what I discovered. Angular CLI uses Webpack to compile the package, and ngc uses the TypeScript compiler. Therefore, I suggested that the problem might be with the TypeScript compiler, which does not work properly with class decorators. The latest version of TypeScript for compiler 2.1.4 and the Angular CLI uses version 2.0.x. I checked this and after updating TypeScript compiler to version 2.1.4 this problem disappeared.