Issues with ngModule when using Angular 4

Question

I've an Angular (2) application configured with webpack which imports modules from another common repository.

So, the common repository has a common.module.ts file with something like this:

@NgModule({
  imports: [...],
  declarations: [...],
  providers: [...],
  exports: [...]
})
export class CommonModule {}

and then in my main app I'm importing this in my app.module.ts

@NgModule({
  imports: [
    ...
    CommonModule,
  ],
  declarations: [...],
  providers: [...],
  bootstrap: [AppComponent]
})
export class AppModule { }

This works fine as it is in Angular2, but then I'm trying to migrate to Angular 4.0 in my main project (without touching common repository, as it's used by other repositories which are not migrated either). So I change my versions in my package.json and rebuild and everything seems fine, but then when I load the app in the browser I get this

Uncaught Error: Unexpected value 'CommonModule' imported by the module 'AppModule'. Please add a @NgModule annotation.

Anybody know what's going on? the CommonModule is already declared using @NgModule. I checked the node_modules in case and there's something wrong with the imported files and found the common_module.d.ts which contains

...
export declare class CommonModule {}

but that to me is fine, that's the barrel file and the decorator has been removed from here.

Any ideas?

Answer 1

Ok, I finally got help in Angular github to get it working.

So, what I had to do is change dependencies in my common project to use any angular library >= 2.0.0, like this

"dependencies": {
"@angular/core": ">=2.0.0",
"@angular/common": ">=2.0.0",
"@angular/router": ">=3.0.0",
"@angular/http": ">=2.0.0",
"@angular/platform-browser": ">=2.0.0",

I run yarn to update the dependencies and then push the changes to my github repo.

Once in my app project, I upgraded my common library running yarn upgrade my_github_repo/common#feature/angular4 (feature/angular4 is the name of the branch in my common project where I pushed the changes)

and that's it, this way there's only one angular library in my project, 4.0.0, which is the one my app uses.

I tested this with another app with Angular 2.0.0 which also uses the common library and in this case the version of angular in my node_modules is 2.0.0, so all good.