rnadler / ng2-password-strength-bar

Angular 2/4/5 Password Strength Bar
http://bobonmedicaldevicesoftware.com/blog/2016/12/09/publishing-an-angular-2-component-npm-package/
MIT License
20 stars 17 forks source link

ERROR in PasswordStrengthBarModule is not an NgModule #6

Open ScottSpittle opened 7 years ago

ScottSpittle commented 7 years ago

Using Angular CLI, installed the package, and for some reason the first compilation with 'ng serve' throws "ERROR in PasswordStrengthBarModule is not an NgModule".

If I make a random change to a file to trigger a rebuild it works fine...

http://puu.sh/uzpXz/ff33ba2f90.png

Version 1.1.1

evansmwendwa commented 7 years ago

Experiencing same issue

rnadler commented 7 years ago

If you're having this problem, the workaround is to add PasswordStrengthBarComponent to the declarations instead of importing PasswordStrengthBarModule.

evansmwendwa commented 7 years ago

I managed to fix a similar issue in another package that I am working on by doing AOT compilation using the ngc compilers instead of the tsc one.

More details on this article https://angular.io/docs/ts/latest/cookbook/aot-compiler.html#!#compile

Bigless27 commented 7 years ago

I'm experiencing the same issues even using the PasswordStrengthBarComponent. I'm using version 1.1

rnadler commented 7 years ago

@ScottSpittle and @Bigless27, Please confirm that v1.1.2 resolves the import problem. Thanks!

Bigless27 commented 7 years ago

@rnadler Yes it does, Thanks!

DanielYKPan commented 7 years ago

I have the same issue with my package.

To fix the issue, is it just compile my package by doing AOT compilation using the ngc compilers instead of the tsc and include those compiled files in my package?

Can you please give me hints to fix this problem?

evansmwendwa commented 7 years ago

The ng-compiler generates additional metadata.json files that tsc does not emit. Those are required in some typescript setups to identify your exported components

You need to install the compiler and platform-server

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

Then you can point it to the same tsconfig or a different one if you want different optimizations

sample ts config

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": true,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "declaration": true,
    "outDir": "lib",
    "rootDir": "src"
  },
  "include": [
    "src/**/*"
  ]
}

You can integrate in your npm scripts

"build": "rm -rf lib && \"node_modules/.bin/ngc\" -p tsconfig-aot.json"

Then execute in the cli once you are ready to build

npm run build

You can find more details in the documentation https://angular.io/docs/ts/latest/cookbook/aot-compiler.html#!#compile