templateUrl funktioniert bei mir nicht

Ich die Samen Struktur als pro Winkel.io erhalten, startete das Projekt. Alles OK so weit.

Nun wollte ich ändern den top Komponenten zu haben, eine Ansicht von einer getrennten Datei und ich in Schwierigkeiten kommen. Die arbeiten code:

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

Dann habe ich die Vorlage ändern, templateUrl etwa so:

templateUrl: 'app.component.html',

wo habe ich in dieser Datei die exakt gleiche code wie vorher

<h1>Angular2</h1>

Scheint offensichtlich zu sein, zu arbeiten, aber es funktioniert nicht. Es muss nicht spucken Fehler, aber es zeigt nichts an, außer die " loading....' Nachricht als die in der demo gestartet

Danke für die Hilfe

Peter

Sind Sie sicher, dass Sie die Vorlage in das korrekte Verzeichnis? Wenn es im gleichen Verzeichnis wie die Komponente sollte es templateUrl: 'app/app.component.html',
versuchen Sie, templateUrl in @View-Dekorateur.
Danke, die 'app/app.component.html" Korrektur löst das problem. Grund dafür ist unklar. Ist templateUrl verweisen auf die Projekt-root?

InformationsquelleAutor Peter HIRT | 2016-01-17

  1. 23

    Hinzufügen moduleId: Modul.id in der @Component decorator. Wenn du das nicht hast, dann Winkel 2, werden auf der Suche für Ihre Dateien auf der root-Ebene.

    import {Component} from 'angular2/core';

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

export class AppComponent { }

    Überprüfen Sie diese Artikel

    Super!!! In den gesamten Kurs, die ich geschaut habe hatte niemand erwähnt, was es bedeutet, die moduleid. Danke für den Hinweis it out.

    InformationsquelleAutor bFunc

  2. 4

    Die Sie schreiben müssen Pfad aus dem build-Pfad.

    templateUrl: 'build/app.component.html'

    InformationsquelleAutor Raphael

  3. 4

    Geben Sie den Pfad aus dem root-Verzeichnis.

    InformationsquelleAutor Rhushikesh

  4. 1

    verwenden Sie die vollständige Pfad wie app/app.component.html
    oder verwenden Sie den absoluten Pfad wie ./app.component.html
    ./zur gleichen Verzeichnis

    InformationsquelleAutor Janak Bhatta

  5. 1

    Wenn Sie die Arbeit mit Ihrem 'Haupt' - Komponente, die Sie verwenden können (absoluter Pfad):

    './your_component_name.html'

    in Ihrem Fall:

    './app.component.html',

    Wenn andere Komponente - Sie haben zwei Wahlen:

    1. wie gesagt - verwenden Sie moduleId
    2. verwenden /app/your_component_html_filename wie in Beispiel /app/dashboard.html oder ./app/dashboard.html
    3. vollständigen Pfad verwenden - keine gute Idee, aber Sie kann

    Über die Verwendung von .css NICHT von Ihrem 'Haupt' - Komponente:

    1. verwenden app/your_component_css_filename wie in Beispiel app/dashboard.css ohne ersten Schrägstrich '/'!!!
    durch die Art und Weise an einem Projekt, das ich erstellt mit CLI ALLE template/style-Pfade funktionieren Nur mit Pfad like './your_component_name.html'

    InformationsquelleAutor Gleb B

  6. 1

    Das Problem scheint hier einen absoluten Pfad. Die compnent ist erforderlich absoluter Pfad angegeben werden. Das ist meine Datei-Struktur,

    templateUrl funktioniert bei mir nicht

    Folgende nicht funktioniert, 

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

    Als mein wissen, Das HTML-template-Url oder der Url für das style-sheet muss in einen absoluten Pfad. Ich habe versucht, die folgenden und arbeiten.

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

    InformationsquelleAutor Swinkaran

  7. 1

    In meinem Fall habe ich diese Aufgabe gelöst durch hinzufügen moduleid-Eigenschaft der Komponente 

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

    und es funktioniert wie erwartet.
    Und ich bekomme eine Vorstellung von dieser url :
    https://www.youtube.com/watch?v=WAPQF_GA7Qg&feature=youtu.werden

    InformationsquelleAutor Sudhakar singh

Schreibe einen Kommentar