Относительные пути угловые2. Дифференциальные пути для шаблона и css

Question

Я сейчас с последней версией углового - 2.0.3. Как бороться с разными путями. Например, html-шаблон находится в одной папке, файл css-файла - в другом.

@Component({  
selector: "order", 
templateUrl: "./app/order/order.template.html", 
styleUrls: ["./app/assets/css/order.css"] 
}) 

Если я наберу module.id, то будет найден только файл html. Кто-нибудь сталкивался с какой-то проблемой?

Answer 1

Ну, это возможно, но для меня лучше всего добавить компонент css в компонент, который более организован. Тем не менее,

Просто откройте ваш tsconfig.json, а затем изменить

"moduleResolution": "node", 

в

"moduleResolution": "classic", 

, то вы можете иметь

Структура выборки

app 
----components 
--------order 
--------------order.component.ts 
--------------order.component.html 
assets 
----order.css 

@Component({ 
    selector: 'selector', 
    templateUrl: './order.component.html', 
    styleUrls:['../../../assets/order.css'] 
}) 

это те sted с версией Angular-cli и webpack.

Answer 2

Это сообщение помогает: http://blog.thoughtram.io/angular/2016/06/08/component-relative-paths-in-angular-2.html

Я использую SystemJS, поэтому в моем tsconfig.json, я поставил "module": "system".

Я также добавил moduleId: __moduleName в мой @Component.

Затем я могу использовать относительный путь для шаблона и стиля. Например:

@Component({ selector: 'datepicker-popup', moduleId: __moduleName, directives: [], providers: [], templateUrl: './datepicker.comp.html', styleUrls: ['./datepicker.css'] })

Answer 3

@Component({ 
selector:'my-app-product', 
moduleId:module.id, 
templateUrl:'product.component.html', 
styleUrls: ['product.component.css'] 

и поместить файл product.component.css в той же папке, что и файл HTML