Angular 4 - Load CSS dynamically from node modules

In an Angular 4 application, I am getting few CSS files via npm (have them as app-desktop.css and app-mobile.css in the node_modules folder). When the app loads, I am doing the device detection and want to load an appropriate CSS.

Currently, I am copying the css files into an assets folder and in app.component on onInit, adding a link tag to the document referring to the assets folder. Something like below:

ngOnInit()
const link = document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.setAttribute('type', 'text/css');
if (deviceMobile())
link.setAttribute('href', './assets/css/app-mobile.css');
else
link.setAttribute('href', './assets/css/app-desktop.css');

const head = document.getElementsByTagName('head')[0];
head.insertBefore(link, head.firstChild);



I don't want to continue with this approach as the assets folder needs to be updated everytime a new version of CSS is published.

Is there a better way to inject a CSS dynamically from NodeModules folder during app start?

0

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.