CODEWITHSUNDEEP
htmlcssangular
Xinrui Ma
Xinrui Ma

Reputation: 2105

What's correct file path in Angular2?

I have a file structure like this :

/root
--/app
----app.ts
--/components
----/banner
------banner.ts
------banner.css
--index.html

I have import banner.ts inside app.ts like this import {Banner} from '../components/banner/banner';

In banner.ts, I want to get the banner.css file so I write this:

import {Component} from 'angular2/core';

@Component({
  selector: 'banner',
  templateUrl: '../components/banner/banner.html',
  styleUrls: ['../components/banner/banner.css']
})

This works, but when I change to this, it failed:

 styleUrls: ['./banner.css']

I also try styleUrls: ['banner.css'], failed

Based on my understanding, the './' means in the same directory, but why I get an 404 error?

I am using the most updated Angular2

Upvotes: 0

Views: 1680

Answers (2)

Bob Zhang
Bob Zhang

Reputation: 891

Hi I am happy to see this:

In visual studio 2015

  1. open the banner.ts
  2. open the solution explorer and expand the project
  3. find the css file
  4. right click the css file and drag to the banner.ts
  5. you will find the reference on the top of the banner.ts

Hope it helps

Upvotes: 1

C B
C B

Reputation: 2000

Yes, Only a proper relative file path will be recognized by Angular2 currently. The Path should actually start from the root like below to be safe, Again we are setting the guidelines from what is working and not working with the beta version, I am sure this is bound to change in the future. But for now, for beta0 the below code is the norm for referencing supplement files for the component.

import {Component} from 'angular2/core';

@Component({
  selector: 'banner',
  templateUrl: './app/components/banner/banner.html',
  styleUrls: ['./app/components/banner/banner.css']
})

Checkout other large example as well, they all use this pattern. A component inside a large Angular2 Sample

Upvotes: 1

Related Questions