Angular2中正确的文件路径是什么？

Question

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

Answer 1

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

Answer 2

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