Adding javascript component into angular app

Question

I'm having a javascript components that is distributed as .js file and .css file. In .js file the component is added to window

window.Component = { ... }

the component should be added to page with the following code Component.init('#componentHolderId', config);

I need to use my component in an Angular app (using Angular 11 if that matters).

Here are my questions.

Where is the best place in angular app to put .js file? Maybe it's somehow possible to add it to lazy-loaded module (as component needs to be used in a lazy-loaded module)?
Is there a way to add css to project other that adding it to styles array in angular.json? My concern here is that this way will slow-up application start-up.

Can’t you just add it inside index.html..? Or if you need to add it conditionally (from a lazy module?) you could simply do some DOM manipulation inside the lazy module to add a script tag to the header..? — MikeOne
– MikeOne, Commented Dec 23, 2020 at 14:19

Vishnu Vinod · Accepted Answer · 2020-12-23 14:58:42Z

2

You can add your .js file in the Scripts array of angular.json. so that it will be loaded.

Or you can add the .js inside the script tag inside body tag of index.html. (Sometimes it won't work because the some dom elaments are not present when loading index.html).

If you are using SCSS or any other CSS preprocessors, you can import your CSS files in your styles file.

answered Dec 23, 2020 at 14:58

Vishnu Vinod

7855 silver badges17 bronze badges

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

Collectives™ on Stack Overflow

Adding javascript component into angular app

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related