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.

1. 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)?
2. 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.

Answer 1

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.