I have a project on Angular2 (v2.2.1) and TypeScript and i use Angular CLI (1.0.0-beta.21) for it. It works fine. Now i want to add multilanguage support with Angular i18n. Followed by instuctions from official docs i installed this packages:
npm install @angular/compiler-cli @angular/platform-server --save
and i ran this command:
"./node_modules/.bin/ng-xi18n" -p src/tsconfig.json
It returned me 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 other it 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 { }
Listing 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
}
P.S.: I found many issues on GitHub related with this error, but neither solution works for me.
I've found solution, that works for me. In my SharedModule i removed SharedModule class from final export expression and add 'export' keyword right after NgModule decorator. So my SharedModule now:
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 firther to find a reason of this problem, and what i've discovered. Angular CLI uses Webpack to compile bundle and ngc uses TypeScript compiler. So I assumed that problem may be in TypeScript compiler, that does not work properly with class decorators. Latest TypeScript compiler version is 2.1.4 and Angular CLI uses 2.0.x version. I checked this and after update TypeScript compiler to 2.1.4 this problem is gone.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With