无法使用Webpack使Angular组件在项目中工作？

Question

I have created an angular componet (datetime-popup) found here

I want to be able to use it in my projects, but i cannot get it to work. I believe i need to make it a umd library or something with webpack, but i have had a look on this internet and i cannot find how to do this, as whatever i do, it errors.

Can someone help me to sort this out? I would like to be able to reference the project in the demo, and also use it via an external project using npm.

EDIT:

I have tried to duplicate this project but for some reason, when i build my example project, it get an exception in a script

bundle.js:39725 Uncaught SyntaxError: Unexpected token export

Here is the exception. This isnt my code and works fine when the ngx-bootstrap project is in the project

Answer 1

Packaging Angular libraries is still a bit of a black art. It is on the angular-cli roadmap to provide better out-of-the-box support. Meanwhile, you can consult this excellent overview .

Basically, you need to compile your modules and components with ngc , based on a tsconfig.json with specific settings, this being a necessary step in order to create the metadata required by Angular builds, and in-line the templates and CSS (pre-processed if necessary) if they are in external files. The consuming application then imports the modules and components from the directory into which they have been compiled, often something like dist or lib , which can be accomplished with an entry in package.json such as "module": "dist/index.js" . If you are publishing to npm , then you could simply publish the dist directory. It is beyond the scope of this short answer to provide more exhaustive details.