尝试NPM使用Angular-CLI发布并安装自定义angular2组件； 只在第一次编译

Question

I'm having a most unusual and frustrating problem.

I have an Ng2 component called via-date-picker that I am trying to NPM publish so that it can be easily used in other projects. In order to do so, I have made it into an Angular2 component library. The via-date-picker exports a module called ViaDatePickerModule , which I want to import elsewhere.

In order to test and make sure that it is being published correctly, I am NPM-installing and importing it into an otherwise empty Angular-CLI project that I am calling npm-test .

So I run my npm-test application using "ng serve", and I get this error:

ERROR in ViaDatePickerModule is not an NgModule webpack: Failed to compile

Yet despite that error, the project compiles anyway:

And when I open up my project, lo and behold, everything works!!

But this only happens the first time that I run the project. On successive attempts to run the project via "ng serve", I get the same compilation error, but this time the project just flat-out refuses to complete it's compilation:

I have no idea why I'm getting this error, and why Angular-CLI will run my project sometimes but not others.

I've scoured the web for answers and tried every solution I can find for this error, as well as every other thing I can think of:

• I've tried adjusting the tsConfig settings in my component library
• I've tried using rollup.js instead of gulp.js to build my component library
• I've tried copying existing, working component libraries, then carefully swapping out the existing code for my own
• I've downgraded Angular CLI
• I've upgraded Angular CLI
• I've downgrade Typescript
• I've upgraded Typescript
• I've deleted and re-installed node_modules several times
• I've deleted and re-started my whole project twice

No matter what I do, I keep coming to the same webpack error that I posted above; that ViaDatePickerModule is not an NgModule. I'm completely out of ideas. Any help that anyone could provide would be crazy helpful.

For the sake of complete thoroughness, I've created a public repo on github here containing all the files involves, divided into two main directories:

• COMPONENT_BEFORE_PUBLISHING: contains the component library from which I am running "npm publish"
• WHAT_IS_IMPORTED_INTO_NODE_MODULES: contains the resulting directory that is being imported into the node_modules directory of my npm-test project

Again, any help that anyone could provide would be extremely, extremely appreciated! Really, I would be eternally grateful.

Answer 1

If you are %100 sure that ALL of your consumers will import your components, modules ...etc from a TS project such as angular-cli . You can publish your TS source directly without transpiling. Ie. you'll be publishing static .ts files that can be imported in any project that will do the transpiling for you.

However, if your want your library to also be consumed as a JS es5 or es6 module , then you should transpile.

Also, you can try the angular compiler ngc instead of the typescript compiler tsc ? ngc is a wrapper around tsc . You could start there, There are many library starters put there that can help you start an angular library and get it optimized for AOT compilation.