CODEWITHSUNDEEP
cssangulartypescript
George Edwards
George Edwards

Reputation: 9229

styleUrls not being loaded in angular2 ChildComponent (RC5)

In my angular 2 (RC5) project, I have a number of components which all work fine, however, I have added a submodule which works fine except for the styleUrl property of its childComponent. If I use the same url path in the tutorial (submodule's root component) then the styles are applied. If I add the exact same path to the chapter (submodule's child component) then the styles aren't applied?

There are no 404 coming through in the blogs and chrome's dev tools don't show chapter.css as a source, or something present on network.

Here you can see the component causing me the issue:

@Component({
  selector: 'chapter',
  template: `<div [innerHTML]="content"></div>`,
  styleUrls: ['app/tutorial/chapter/chapter.css']
})
export class chapterComponent implements OnInit, OnDestroy {
  private sub: Subscription;
  private content: string = '';

  constructor( private route: ActivatedRoute) {  }

  ngOnInit() {
    this.sub = this.route.params.subscribe(params => {
      var that = this;
      var _url = './chapter/' + params['id'] + '.html';
      $.ajax({
        url: _url,
        success: function (result) {
          that.content = result;
        }
      });
    });
  }
}

chapter.css isn't being picked up... You can see my project files here:

      |-- error.html',
      |-- index.html',
      |-- app',
          |-- app.component.ts',
          |-- app.module.ts',
          |-- app.routes.ts',
          |-- main.ts',
          |-- home',
          |   |-- home.component.ts',
          |   |-- home.css',
          |   |-- home.html',
          |-- tutorial',
              |-- tutorial.component.ts',
              |-- tutorial.css',
              |-- tutorial.html',
              |-- tutorial.module.ts',
              |-- tutorial.routes.ts',
              |-- chapter',
                  |-- chapter.component.ts',
                  |-- chapter.css',
                  |-- chapter.html',

Why does only this component not work... The only difference I can see is that this component is a child component, so maybe that has made a difference?

Update:

As noted in the comments on the answers, using the path ./app/tutorial/chapter/chapter.css works in the tutorial component, but the exact same path doesn't work in the chapter component (which is a child component). I also added ViewEncapsulation but it didn't work...

Upvotes: 7

Views: 3937

Answers (3)

Jim
Jim

Reputation: 3694

http://blog.thoughtram.io/angular/2016/06/08/component-relative-paths-in-angular-2.html This article has several different ways to approach the problem of relative paths with various module loaders. That helped me reason about what was wrong when I had a similar problem (though I am using webpack, but it should not matter).

The key lesson is to set the moduleId : module.id in the @Component decorator! Without the moduleId setting, Angular 2 will look for our files in paths relative to the application root.

And don’t forget the "module": "commonjs" in your tsconfig.json.

Upvotes: 1

DankestMemes
DankestMemes

Reputation: 153

Change styleUrls: ['app/tutorial/chapter/chapter.css'] to styleUrls: ['./app/tutorial/chapter/chapter.css'].

In case you were wondering, the . in ./app/tutorial/chapter/chapter.css specifies the current directory.

Upvotes: 0

vidalsasoon
vidalsasoon

Reputation: 4411

Try adding "encapsulation: ViewEncapsulation.None" to your parent component

import {ViewEncapsulation} from '@angular/core';  

   @Component({
       encapsulation: ViewEncapsulation.None
     })

Upvotes: 11

Related Questions