Mit relativem Pfad für templateUrl in Angular2 + Webpack

Question

import {Component} from 'angular2/core'; 

@Component({ 
    selector: 'app', 
    styleUrls: ['./app.component.less'], 
    templateUrl: './app.component.html' 
}) 
export class AppComponent { 
    name:string = 'Demo' 
} 

Wenn Sie den relativen Pfad für templateUrl und styleUrls verwenden, erhalte ich: Fehler 404 Datei nicht gefunden:

zone.js: 101 GET http://localhost/app.component.html 404 (nicht gefunden

)

Code: https://github.com/Dreampie/angular2-demo

ich denke, das ist nicht gut ausgebildet ist, weil unter anderen Umständen kann Verzeichnis bauen, ist nicht das gleiche, kann ich es ändern, um relativ Strompfad?

raw-loader kann dieses Problem zu beheben, aber html-loader, less-loader arbeiten nicht für template, styles, es funktioniert nur in string, also warum suport sie nicht?

import {Component} from 'angular2/core'; 

@Component({ 
    selector: 'app', 
    styles: [require('./app.component.less')], 
    template: require('./app.component.html') 
}) 
export class AppComponent { 
    name:string = 'Demo' 
} 

erhalten andere Fehler:

browser_adapter.js:77 EXCEPTION: Error during instantiation of Token Promise<ComponentRef>!.BrowserDomAdapter.logError 
browser_adapter.js:77 ORIGINAL EXCEPTION: Expected 'styles' to be an array of strings. 

Answer 1

mir mehr Informationen hinzufügen lassen.

Warum kann Angular nicht die HTML- und CSS-URLs aus dem Speicherort der Komponentendatei berechnen?

Leider ist dieser Ort nicht ohne weiteres bekannt. Angular Apps können auf viele Arten geladen werden: aus einzelnen Dateien, aus SystemJS-Bundles oder aus CommonJS-Bundles, um nur einige zu nennen. Mit dieser Vielfalt von Laststrategien ist es zur Laufzeit nicht einfach festzustellen, wo diese Dateien tatsächlich liegen.

Der einzige Ort, an dem Angular sicher sein kann, ist die URL der index.html -Homepage. Standardmäßig löst es Vorlagen- und Stilpfade relativ zur URL von index.html auf. Aus diesem Grund haben wir zuvor unsere CSS-Datei-URLs mit einem Präfix für das Präfix "app/base path" erstellt.

Official Angular Docu

Answer 2

Die ./ (einzelner Punkt) Notation nur für ts Pfade funktioniert, ist es nicht mit HTML oder CSS Pfade funktioniert.

Diese Pfade index.html relativ, so nach Ihrer Dateistruktur sollte diese

arbeiten

@Component({ 
    selector: 'app', 
    styleUrls: ['app.component.less'], 
    templateUrl: 'app.component.html' 
}) 

Answer 3

Sie müssen versuchen,

@Component({ 
    selector: 'app', 
    template: require('./app.component.html'), 
    styles: [ 
    require('./app.component.less').toString() 
     or 
    String(require('./app.component.less')) 
     or 
    add css-to-string in your webpack conf ({test: /\.css$/, loaders: ['css-to-string', 'style', 'css']}) 
}) 

Answer 4

die moduleId Eigenschaft Set für Modul-relative Belastung module.id, so dass Urls der Komponente relativ ist.

@Component({ 
    moduleId: module.id, 
    selector: 'app', 
    styleUrls: ['app.component.less'], 
    templateUrl: 'app.component.html' 
}) 

Answer 5

Wenn Sie SystemJS zum Beispiel verwenden, finden Sie meine Antwort hier: https://stackoverflow.com/a/40694657/986160

können Sie model.id verwenden und konvertieren Sie es von Ihrem Build-Pfad (das mit dem js) zu dem mit ts, CSS und HTML. Auf diese Weise können Sie relative Pfade für Ihre Vorlagen und Stile in Angular 2 kein Problem

Answer 6

Ich habe den gleichen Fehler in meinem Fall bemerkt.Der Grund

Expected 'styles' to be an array of strings

in meinem Fall war css-loader, die zum Laden von CSS-Dateien und zum Ausleiten angular2-template-loader verwendet wurde.

Was ich von zu verstehen, dass css-loader Debuggen hat einige „intelligente“ Erkennung von Änderungen in CSS-Dateien und wenn nichts CSS-Datei geändert wurden, wurde nicht nur als String von webpack Modul exportiert.

Da es nur Hallo Wort App war meine Lösung sehr einfach: ersetzen css-loader von raw-loader. Es ist meine Version von Lader:

loaders: [ 
 
    { 
 
     include: [srcPath], 
 
     test: /\.js$/, 
 
     loader: 'babel', 
 
     query: { 
 
      presets: ['es2015'] 
 
     } 
 
    }, 
 
    { 
 
     include: [srcPath], 
 
     test: /\.js$/, 
 
     loader: 'angular2-template-loader', 
 
     query: { 
 
      keepUrl: true 
 
     } 
 
    }, 
 
    { 
 
     include: [srcPath], 
 
     test: /\.(html|css)$/, 
 
     loader: 'raw', 
 
     query: { 
 
      minimize: true 
 
     } 
 
    } 
 
]

Answer 7

WebPack2 dieses moduleId nicht mehr benötigen