Angular 2 Component relativer Pfad

Question

Meine Datei systemjs.config.js ordnet die "App" einem Ordner "dist" zu. Also, wenn ich versuche, meine Komponente HTML-Datei relativ zu verweisen, würde ich die folgende Fehlermeldung erhalten:

Fehler beim Laden der https://localhost:44337/dist/appComponent.html

Müssen ich schluck verwenden, um die HTML-Dateien auf den „dist“ zu kopieren Ordner als auch ? Welche anderen Optionen habe ich? Absoluter Pfad funktioniert einwandfrei.

Meine system.config.js Datei:

(function (global) { 
System.config({ 
    paths: { 
     // paths serve as alias 
     'npm:': 'node_modules/' 
    }, 
    // map tells the System loader where to look for things 
    map: { 
     // our app is within the app folder 
     app: 'dist', 
     // angular bundles 
     '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 

App.component Datei:

import {Component, OnInit} from "@angular/core"; 
import {Router} from "@angular/router"; 

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

Vielen Dank im Voraus!

Answer 1

Wenn Sie externe Vorlagen und relative Pfade in templateUrl verwenden, dann sollten Sie die HTML-Dateien kopieren und in den Ordner dist einfügen.

Eine Aufgabe, alle .html Dateien innerhalb dev/ zu Ihrem dist/ Ordner

gulp.task('move-html',function(){ 
    return gulp.src('dev/**/*.html') 
       .pipe(gulp.dest('dist/')); 
}); 

Sie haben andere Möglichkeiten, wie die Verwendung von Inline-Vorlagen (Schreiben die Vorlage innerhalb der Komponente) zu bewegen, oder - noch besser - Verwenden Sie gulp-inline-ng2-template plugin als eine Build-Aufgabe zum Importieren und Inline-Erstellung der externen Vorlagen für Sie. Auf diese Weise erfordert das Abrufen der Vorlage keine zusätzliche http-Anfrage.