0

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

enter image description here

Improve this question

1 Answer 1

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

this helped. My demo project inside didnt work, but it works when i publish it to npm now, thanks

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.