How to load external css using require in Angular 2

Question

I need to load an external css file in environment files. I have two environments: dev and prod. It works well in mode dev because the css file is in local, but not in mode prod.

environment.dev.ts

require("style-loader!./../assets/style.css");

environment.prod.ts

require("style-loader!http://abc/style.css");

Then i had this error:

Can't resolve 'http://abc/sprite.css'

How could i make it work with url ?

Thanks !

UPDATE

As the suggestion of Milad, i try to put a link with the dynamic href:

<link [attr.href]="getCss()" type="text/css">

function getCss(): string {
    return this.mode === 'dev' ?
        'assets/style.css':
        'http://abc/sprite.css';
}

And i have the following error:

unsafe value used in a resource URL context

What are you trying to do here ? You usualy don't have to load from an url as webpack is a bundler, it will include the path in the bundle and hte stylesheets gets added to the html it as a relative url... — n00dl3
– n00dl3, Commented Aug 22, 2017 at 9:23
@GiliYaniv yes, it's not the real link, i just want to show it is an external link — Trong Lam Phan
– Trong Lam Phan, Commented Aug 22, 2017 at 9:30
@n00dl3 the problem is in dev mode, i want to use, let's say path-1; in prod mode i want another path. How could i do that ? — Trong Lam Phan
– Trong Lam Phan, Commented Aug 22, 2017 at 9:32
OK, the real question is "does this css file exists at build time at this url ?" If it does exist, you can just use the resolve-url-loader (it sounds like a weird idea, but maybe that's legit). If it doesn't, what are you trying to do ? — n00dl3
– n00dl3, Commented Aug 22, 2017 at 9:38

Milad · Accepted Answer · 2017-08-22 09:28:35Z

1

You can't have http calls in your webpack's loader configuration because technically that loader does not exist in your production environment.

so

  require("style-loader!http://abc/style.css");

What you're saying is :

Hey webpack, when you're building my app, call this url and get the css and include it in the bundle.

This shouldn't work because Webpack shouldn't make an external call to get your bundle pieces.

Try downloading the css and putting it in your code .

answered Aug 22, 2017 at 9:28

Milad

28.8k11 gold badges78 silver badges91 bronze badges

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

2 Comments

Trong Lam Phan Over a year ago

Thanks for the answer. I tried your solution and updated my question with a new error: "unsafe value used in a resource URL context"

Trong Lam Phan Over a year ago

I fixed this bug by using DomSanitizer. Thank you anyway !

Collectives™ on Stack Overflow

How to load external css using require in Angular 2

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related