angular 2 component cant load relative background image urls from external css skin

Question

I am using a third party javascript library in my angular2 component. The skin css of the component tries to load images using relative url paths. I am using a component based architecture and likes to have all the component dependencies encapsulated.

Below is what I try to do, the skins library fails to locate the relative path images.

@Component({
    moduleId: module.id,
    selector: 'test',
    templateUrl: 'test.html',
    styleUrls: ['test.css', '../../external_lib/skins/skyblue.css'],
    encapsulation:ViewEncapsulation.None
})

Is there any way to accomplish this ? Currently the only workaround is to include the css in the index.html file.

this is a question for your module loader (read: systemjs or webpack conf) — drew moore
– drew moore, Commented Jun 23, 2016 at 13:02

Wojciech Kwiatek · Accepted Answer · 2016-06-23 13:06:10Z

0

When it comes to defining styles and template like styleUrl and templateUrl you should be very careful.

The problem is that it is your responsibility to make sure that given url will be accessible even after build.

To make it happen you can make your own task in grunt, gulp, npm or some other task runner or use bundler like webpack to use relative path which then will be translated to the production build.

In your example you have to point styleUrl to the path when it's located while serving whole app.

answered Jun 23, 2016 at 13:06

Wojciech Kwiatek

6,8222 gold badges18 silver badges26 bronze badges

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

2 Comments

biju Over a year ago

So does this mean that I have to adjust all the imge urls in the external library skin so that it is relative to the app. Is there any workaround for this ?

Wojciech Kwiatek Over a year ago

I'm using webpack for that with few loaders for styles. Then I have to place it correctly while developing (relative path) and it'll regenerate it for me. But it's still requiring a file and bundling it together with styles included. I don't think there's better solution than using some gulp/grunt task to manage it for you.

Collectives™ on Stack Overflow

angular 2 component cant load relative background image urls from external css skin

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