I have made a custom angular2(5.0.x) module that looks like this :
import { GuageService } from './services/guage.service';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { GuageComponent } from './guage/guage.component';
@NgModule({
declarations: [GuageComponent],
imports: [
CommonModule
],
providers : [GuageService],
exports : [GuageComponent]
})
export class GuageModule {}
I use it in my app modules like this:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { DxButtonModule, DxCircularGaugeModule } from 'devextreme-angular';
import { GuageModule } from '@kronsbi/bi-module-template';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
DxButtonModule,
DxCircularGaugeModule,
HttpClientModule,
GuageModule
],
bootstrap: [AppComponent]
})
export class AppModule { }
When I try to start my app I get the following error.
Unexpected value 'GuageModule' imported by the module 'AppModule'. Please add a @NgModule annotation.
tsconfig for the main app:
{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2017",
"dom"
]
}
}
ts config for the GuageModule package: {
"compilerOptions": {
"baseUrl": ".",
"declaration": true,
"stripInternal": true,
"experimentalDecorators": true,
"strictNullChecks": true,
"noImplicitAny": true,
"module": "es2015",
"moduleResolution": "node",
"paths": {
"@angular/core": ["node_modules/@angular/core"],
"rxjs/*": ["node_modules/rxjs/*"]
},
"rootDir": ".",
"outDir": "dist",
"sourceMap": true,
"inlineSources": true,
"target": "es5",
"skipLibCheck": true,
"lib": [
"es2017",
"dom"
]
},
"files": [
"index.ts"
],
"angularCompilerOptions": {
"strictMetadataEmit": true
}
}
If you are using Angular 5.0 you need to add "annotationsAs": "decorators"
to the "angularCompilerOptions"
for your package.
Angular 5 introduced new optimizations and by default the decorators are removed on compile because they are not needed at runtime. This does not work for packages as you already discovered. You can read about this in the Angular 5 announcement blog the "Build Optimizer" paragraph mentions this. Version 5.0.0 of Angular Now Available
I use this settings in my angular packages:
"angularCompilerOptions": {
"skipTemplateCodegen": true,
"skipMetadataEmit": false,
"strictMetadataEmit": true,
"annotationsAs": "decorators"
}
I had the same problem. With angular 5+ and angular cli 1.5 it says that your code is not compatible and also your library is scoped package. I have managed to fix it with adding
export * from './your-path'
In all my files (exporting everything from my library).
As i understood its you import as 3 party library You can try to run the application with
ng serve --preserve-symlinks
also add flatModuleId in src/tsconfig.es5.json accordingly:
"flatModuleId": "@scope/library-name"
Link to github here
There is issue on github for more information
This is most likely an issue with the way your npm package is being created. In your package.json for your GuageModule
are you defining a main? This should point to the entry point to your npm package. Here is an example of mine.
"main": "./dist/module.js",
Then if you want typings from GuageModule in your main app you'll need to go to your tsconfig.json
and under compilerOptions
set declaration
to be true to generate the typings files.
"compilerOptions": {
...
"declaration": true
...
},
Then finally in your package.json
you will need to point to the entry point for your typings file.
"types": "./src/app/layout.module.d.ts"
Now you should be able to import your module and have typings on the module that you imported. Hope this helps!
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