运行 angular 2 项目时获取节点模块源映射的 404

Getting 404s for source maps of node modules while running angular 2 project

我有一个 angular 2 项目，虽然 运行，但为各种节点模块的源映射提供了很多 404，如下所示：

...
[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
...

我个人没有在我的代码中引用它们（至少没有直接引用）。当我搜索 when they are 时，我发现它们几乎总是在各自的节点模块中。

例如：

form_group_directive.js.map在form_group_directive.js的最后一行被引用如下所示：

//# sourceMappingURL=form_group_directive.js.map

form_group_directive.js 本身位于 node_modules/@angular/forms/src/directives/reactive_directives/form_group_directive.js

下

进一步查看我的代码以确定如何引用 form_group_directive.js.map，我发现以下内容：

在我的一个组件中，我导入了 REACTIVE_FORM_DIRECTIVES 如下：

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]
})

在组件模板中，我使用formGroup指令如下：

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

在 @angular/forms 中跟踪 REACTIVE_FORM_DIRECTIVES 导致 node_modules/@angular/forms/src/directives.d.ts 下的文件 directives.d.ts，其中包含以下行：

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

因此，js 文件路径似乎已正确解析。但是，它指向的源映射文件没有。

好像找错地方了。有人知道如何解决这个问题吗？

存在一些错误：

the templateUrl is loaded relative to the root of the dev server instead of relative to the package.

使用 require 作为具有非静态资产的模板的解决方法：

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

some of the components have static assets which get served from the root and not relative to the package (node_modules/package_path/path/to/assets) nor does the bundler pick it up.

Basically, there's no decent way to bundle 3rd party libs that do not inline their html/css. At the moment we use some regex to figure it out for ts files, but it's somewhat risky... it might replace stuff it shouldn't.

It looks like changes in TS2.0+ prevent a relative sourceMapUrl from being generated despite the adding the mapRoot attribute in the tsconfig.json

参考资料