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

我有一个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-is时，我发现它们几乎总是在各自的节点模块中

例如：

form\u group\u directive.js

的最后一行引用了

form\u group\u 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

，我发现以下内容：

在我的一个组件中，我导入了

反应式表单指令

，如下所示：

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

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

在组件模板中，我使用

formGroup

指令如下：

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

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

因此，js文件路径似乎得到了正确解析。但是，它指向的源映射文件不是

看起来他们被找错地方了。有人知道如何解决这个问题吗？

有几个错误：

templateUrl是相对于dev服务器的根而不是相对于包加载的

将require用作具有非静态资源的模板的变通方法：

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

一些组件具有静态资产，这些资产从根目录获得服务，并且与包（节点\模块/包\路径/路径/到/资产）无关，捆绑程序也不会拾取它

基本上，没有合适的方式捆绑不内嵌html/css的第三方LIB。目前，我们使用一些正则表达式来解决ts文件的问题，但这有点冒险。。。它可能会取代不该取代的东西

看起来TS2.0+中的更改阻止了相对sourceMapUrl的生成，尽管在tsconfig.json中添加了mapRoot属性

参考资料

---

请发布引用这些文件的记录。我个人在代码中没有引用这些文件。当我搜索When-is时，我发现它们几乎总是在各自的节点模块中。例如：

ng_model_group.js.map

在

ng_model_group.js

的最后一行引用为

/#sourceMappingURL=ng_model_group.js.map

节点模块>@angular>forms>esm>src>指令下的

但是。。文件的路径正确吗？我的意思是，如果你输入命令
cat/node\u modules/systemjs/dist/ng\u model\u group.js.map
你看到文件的内容了吗？我问这个问题是因为错误显示了文件的绝对位置…源映射文件与它们的js文件位于同一个目录中（即，在某些节点模块内。但是，由于某些原因，它们会在
systemjs>dist
下搜索。因此，按照我之前评论中的示例，源文件的正确位置是
node\u modules\@angular\forms\esm\src\directiveries\ng\u model\u group.js.map