Search code examples
angularhttp-status-code-404systemjsnode-modulessource-maps

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

I have an angular 2 project, which, while running, gives a lot of 404s for source maps of various node modules as seen below:

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

I personally am not referencing them (at least not directly) in my code. When I searched for when they are, I found them almost always within their respective node modules.

For example:

form_group_directive.js.map is referenced in the last line of form_group_directive.js shown below:

//# sourceMappingURL=form_group_directive.js.map

form_group_directive.js itself is located under node_modules/@angular/forms/src/directives/reactive_directives/form_group_directive.js

Looking further into my code to identify how form_group_directive.js.map may be referenced, I find the following:

In one of my components, I have imported REACTIVE_FORM_DIRECTIVES as follows:

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

In the component template, I use the formGroup directive as follows:

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

Tracing REACTIVE_FORM_DIRECTIVES in @angular/forms leads the file directives.d.ts under node_modules/@angular/forms/src/directives.d.ts, which has this line:

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

So, the js file path seems to get correctly resolved. However, source map file it points does not.

It seems like they are being searched for in the wrong place. Anyone knows how to fix this?

Solution

  • There are a few bugs:

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

    Use require as a workaround for templates with non-static assets:

    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

    References