Erste 404s für Quelle Karten von Knotenmodule während des Laufens Winkel 2 Projekt

Question

Ich habe einen Winkel 2-Projekt, das, beim Laufen, eine Menge 404s für Quell Karten verschiedener Knotenmodule gibt, wie unten zu sehen:

... 
[1] 16.07.28 07:53:19 404 GET /node_modules/systemjs/dist/abstract_form_group_directive.js.map 
[1] 16.07.28 07:53:19 404 GET /node_modules/systemjs/dist/form_array_name.js.map 
[1] 16.07.28 07:53:19 404 GET /node_modules/systemjs/dist/form_control_name.js.map 
[1] 16.07.28 07:53:19 404 GET /node_modules/systemjs/dist/form_group_directive.js.map 
[1] 16.07.28 07:53:19 404 GET /node_modules/systemjs/dist/form_group_name.js.map 
[1] 16.07.28 07:53:19 404 GET /node_modules/systemjs/dist/form_control_directive.js.map 
[1] 16.07.28 07:53:19 404 GET /node_modules/systemjs/dist/form_group_directive.js.map 
... 

Ich persönlich referenziere sie nicht (zumindest nicht direkt) in meinem Code. Als ich danach suchte, fand ich sie fast immer in ihren jeweiligen Knotenmodulen.

Zum Beispiel:

//# sourceMappingURL=form_group_directive.js.map 

form_group_directive.js sich unter node_modules/@angular/forms/src/directives/reactive_directives/form_group_directive.js befindet sich

weiter in meinem Code der Suche, wie form_group_directive.js.map kann zu identifizieren:

form_group_directive.js.map in der letzten Zeile der form_group_directive.js verwiesen wird unten referenziert werden, finde ich folgendes:

In einem meiner Komponenten habe ich REACTIVE_FORM_DIRECTIVES importiert wie folgt:

import { 
FORM_DIRECTIVES, FORM_PROVIDERS, FormGroup, REACTIVE_FORM_DIRECTIVES, 
FormControl, Validators} from "@angular/forms"; 
... 
@Component({ 
    selector: "search-form", 
    templateUrl: "app/search-form.component.html", 
    styleUrls: ["app/search-form.component.css"], 
    directives: [FORM_DIRECTIVES, REACTIVE_FORM_DIRECTIVES], 
    providers: [FORM_PROVIDERS] 
}) 

Im Komponentenvorlage verwende ich die formGroup Richtlinie wie folgt:

... 
<form id="search-criteria" [formGroup]="form" (ngSubmit)="onSubmit(form.value)"> 
.... 

REACTIVE_FORM_DIRECTIVES in @angular/forms führt die Datei Tracing directives.d.ts unter node_modules/@angular/forms/src/directives.d.ts, die diese Zeile hat:

... 
export { FormGroupDirective } from './directives/reactive_directives/form_group_directive'; 
... 

Also, die j s Dateipfad scheint korrekt aufgelöst zu werden. Die Quellkartendatei, auf die es verweist, tut dies jedoch nicht.

Es scheint, als würden sie an der falschen Stelle gesucht. Weiß jemand, wie man das repariert?

Answer 1

Es gibt ein paar Fehler:

den templateUrl relativ zu der Wurzel des dev-Servers anstelle der relativ zu dem Paket geladen.

Verwendung erfordern als Behelfslösung für Vorlagen mit nicht-statischen Vermögenswerte:

template: require('app/search-form.component.html') 

einige der Komponenten statische Vermögenswerte haben, die von der Wurzel serviert bekommen und nicht in Bezug auf die Verpackung (node_modules/package_path/path/to/assets) noch holt der Bundler es auf.

Grundsätzlich gibt es keine vernünftige Möglichkeit, 3rd-Party-Bibliotheken zu bündeln, die ihre HTML/CSS nicht inline enthalten. Im Moment verwenden wir einige Regex, um es für ts-Dateien herauszufinden, aber es ist etwas riskant ... es könnte Dinge ersetzen, die es nicht tun sollte.

Es scheint, dass Änderungen in TS2.0 + verhindern, dass eine relative sourceMapUrl generiert wird, obwohl das mapRoot-Attribut in tsconfig hinzugefügt wurde.json

Referenzen

• Angular2 Issue #10614: Component relative paths are not being respected

• Angular2 Issue #1624: Webpack build breaks ability to use npm installed custom components

• TypeScript Issue #10612: Not producing relative sourceMappingUrl's with mapRoot

• Webpack Issue #2995: /* #sourceMappingURL= ... */" in a JS comment triggers a webpack errors

• Babel Issue #3751: impossible to pass inline sourcemaps from typescript through es6 > es5 transpilation ("Invalid mapping" error) (T6686)

• Babel Issue #6060: babel-register does not load external source maps

• systemJS Issue #450: In-browser transpilation sourcemaps do not work outside of Chrome