styleUrls - Not able to load the css style sheet for the component using relative path in angular 2

1
votes

I have a "Hero" component defined under "app/Hero" in angular 2. The hero component as "hero.component.html","hero.component.css" and "hero.component.ts" files defined. the templateUrl works fine but the styleUrls do not load. Resource not found error will be displayed. I referred this link https://angular.io/docs/ts/latest/guide/component-styles.html#!#relative-urls to load styles using relative URLs.

  @Component({
  providers: [HeroService],
  templateUrl: './Hero.component.html',
  styleUrls: ['./Hero.component.css'],
})
2
cssangulartypescriptangular-components
Remove the las comma. css'], and use lower case for the Hero - kimy82
Please add your folder structure with file names - Yonatan
@kimy82 I removed the last comma. But still I get error : Failed to load resource. - user2301
Yeah I think you might have to set the selector selector: 'hero-component', and move the providers to the app.module.ts . Make sure you are not using less instead of css files - kimy82

2 Answers

0
votes

Check out the filename and make sure you type it correctly. It could be case sensitive! Also make sure you follow the correct folder structure.

If you have the following in your component declaration

@Component({
  selector: 'app-hero',
  templateUrl: './hero.component.html',
  styleUrls: ['./hero.component.css'],
})

your folder hierarchy should look like this:

app.module.ts
hero
- hero.component.ts
- hero.component.css
- hero.component.html
0
votes

This worked for me: 

styles: [require('./app.component.css').toString()]

And you have to change webpack.config.js. Instead of 'raw-loader' you have to specify the next:

loader: 'style-loader!css-loader'