相対パスangular2。テンプレートとCSSの異なるパス

Question

私は今Angular-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をより組織化されたコンポーネント内に置くことがベストプラクティスです。しかし、

は、ちょうどその時、あなたはそれがテだ

サンプル構造

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

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

を持つことができ、あなたのtsconfig.jsonを開き、

"moduleResolution": "classic", 

に

"moduleResolution": "node", 

を変更しますAngular-cliとwebpackのバージョンで盗んだ。

Answer 2

この投稿はできます：私はSystemJSを使用していますhttp://blog.thoughtram.io/angular/2016/06/08/component-relative-paths-in-angular-2.html

ので、私のtsconfig.jsonで、私は"module": "system"を設定します。

を@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'] 

とHTMLファイルと同じフォルダ内