How to add style urls in Angular v2 components?

Question

I am following the Angular tutorial on their website and I created some components, templates and styles.

I am having trouble including my styles in the components using the 'styleURLs' property of the '@Component' decorator. This is what I have,

@Component({
  selector: 'curries',
  templateUrl: '../Views/curries.component.html',
  styleUrls: ['../../../assets/styles/curries.component.css'],
  providers: [CurryService]
})
export class CurriesComponent { // blah blah

As one can see, I put my styles inside the 'assets/styles' folder.

This is my folder structure,

/src
    /app
        /Views
        /Components
           /curries.component.ts
        /Services
        /Models
    /assets
        /images
        /styles
           -curries.component.css

I want to know if this is even possible; to have a style document in a different folder and have it referenced in the component.

I am just trying to de-clutter my files in the app directory, and I read somewhere that the images and styles need to be in the 'assets' folder (which is kind of a 'Content' folder, hence it makes sense)

Any help is appreciated :)

p.s. This is the error I get when I build the app

ERROR in ./src/app/Components/curries.component.ts
Module not found: Error: Can't resolve 
'../../../assets/styles/curries.component.css' in             
'~\AngularProjects\HelloWorld\src\app\Components'

resolve '../../../assets/styles/curries.component.css' in 
'~\AngularProjects\HelloWorld\src\app\Components'using 
 description file: ~\AngularProjects\HelloWorld\package.json (relative 
 path: ./src/app/Components)

https://stackoverflow.com/questions/34542143/load-external-css-style-into-angular-2-component — Mostafa Nawara, Oct 05 '17 at 23:08

score 2 · Accepted Answer · answered Oct 05 '17 at 23:14

I think you dereferenced 1 level too far. so it should be ../../assets...

That being said, I believe it's generally "best practice" to keep your component specific styles alongside your component files.

Instead of breaking things up by view/component/service/model, break it up by component. we generally have sometihing like :

/src
    /app
        /compoenents
            /curries
                curries.component.ts
                curries.component.css
                curries.component.html
        /shared
            { put and shared modules here }
    /assets
        /images 
        /styles
            { global styles go here }

https://angular.io/guide/styleguide has a bunch of information on this.

Thanks! That helped. So everything revolves around component huh! — veeKINGPIN, Oct 05 '17 at 23:26
https://angular.io/guide/aot-compiler angular expects certain files to exist for AOT compilation to function properly. I'd recommend reading their docs and understanding the design choices behind Angular. It's component driven, so don't try too hard to force an MV* pattern. — Jeff Woodard, Oct 16 '17 at 18:58

score 0 · Answer 2 · answered Oct 05 '17 at 23:19

0

the references(for styles of template url`s) are relative to the "Index.html" your main html page.

answered Oct 05 '17 at 23:19

Developer

194
2
9

score -1 · Answer 3 · answered Oct 05 '17 at 23:13

Yes you can access any style within the styleUrls array

https://angular.io/guide/component-styles#style-urls-in-metadata

See this Plunker for a good example of referencing other .css files in different paths

@Component({
  selector: 'my-app',
  template: `
    <h1>Title</h1>
    <p>Hello...</p>
    <span>... world!</span>`,
  styleUrls: [
    'app/app1.component.css',
    'testing/app2.component.css'
  ]
})

How to add style urls in Angular v2 components?

3 Answers3