web-dev-qa-db-ja.com

templateUrlが機能しません

私はangular.ioのgetstartedプロジェクトに従ってシード構造を使用します。これまでのところすべてOKです。

今度は、別のファイルからビューを持つように最上位のコンポーネントを変更したかったのですが、問題が発生しました。動作するコードは次のとおりです。

import {Component, View} from 'angular2/core';
@Component({
       selector: 'my-app',
       template: '<h1>Angular2</h1>',
       directives: []
})
export class AppComponent {
       constructor() {  
       }
}

次に、テンプレートを次のようにtemplateUrlに変更します。

templateUrl: 'app.component.html',

このファイルには、以前とまったく同じコードが含まれています

<h1>Angular2</h1>

動作するのは明らかなようですが、動作しません。エラーを吐き出すことはありませんが、スタートデモのように「loading ....」メッセージ以外は何も表示されません。

助けてくれてありがとう

ピーター

angularangular2-template
7
Peter HIRT

@ComponentデコレータにmoduleId：module.idを追加します。それがない場合は、Angular 2がルートレベルでファイルを検索します。

import {Component} from 'angular2/core';

@Component({
  selector: 'my-app',
  moduleId: module.id,
  templateUrl: 'app.component.html'
})

export class AppComponent { }

これをチェックしてください 記事

23
bFunc

ルートディレクトリからのパスを指定します。

4
Rhushikesh

ビルドパスからパスを書き込む必要があります。

templateUrl: 'build/app.component.html'
4
Raphael

'main'コンポーネントを使用する場合は、（絶対パス）を使用できます。

'./your_component_name.html'

あなたの場合：

'./app.component.html',

他のコンポーネントの場合-いくつかの選択肢があります：

  1. 前に述べたように-moduleIdを使用します
  2. 使用する /app/your_component_html_filename例のように/app/dashboard.htmlまたは./app/dashboard.html
  3. フルパスを使用する-良い考えではありませんが、

'main'コンポーネントからではなく.cssの使用について：

  1. 使用する app/your_component_css_filename例のようにapp/dashboard.css最初のスラッシュなし '/' !!!
2
Gleb B

同じディレクトリに対して、app/app.component.htmlのようなフルパスを使用するか、。/ app.component.html./のような絶対パスを使用します

1
Janak Bhatta

ここでの問題は絶対的な道のようです。コンポーネントは、言及される絶対パスを要求しています。これは私のファイル構造です、

enter image description here

以下は機能していません、

@Component({
    selector: 'pm-products',
    templateUrl: 'product-list.component.html',
    styleUrls: ['product-list.component.css']
})

私の知る限り、HTMLテンプレートのURLまたはスタイルシートのURLは絶対パスで指定する必要があります。以下を試してみました。

@Component({
    selector: 'pm-products',
    //template: `<h3>PRODUCT LISTINGS </h3>`
    templateUrl:'app/products/product-list.component.html'
})
1
Swinkaran

私の場合、コンポーネントのmoduleidプロパティを追加することでこの問題を解決しました

@Component({
    moduleId: module.id,
    selector: 'my-app',
    // templateUrl: './app/app.component.html'
    templateUrl:'app.component.html'
})

そしてそれは期待通りに動作します。そして、私はこのURLからいくつかのアイデアを得る：
https://www.youtube.com/watch?v=WAPQF_GA7Qg&feature=youtu.be

1
Sudhakar singh