Angular-cli: Failed to parse SourceMap in Production

[vukhanhtruong]

My informations:

---

angular-cli: 1.0.0-beta.5
node: 5.10.0
os: linux x64

---

I got the following issues in console log

---

_Failed to parse SourceMap:_ https://my-site.com/vendor/reflect-metadata/Reflect.js.map
_Failed to parse SourceMap:_ https://my-site.com/system-config.js.map

---

Thanks for your support.

[josefduran]

Having same issue!

[joejordanbrown]

The errors are due to the js files having //# sourceMappingURL=*.js.map in them and the source map file not existing on the server.

Check your dist folder to see if the .map files exist. If not a work around I've used is to add them to angular-cli-build.js

Example:

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      'systemjs/dist/system-polyfills.js',
        'systemjs/dist/system-polyfills.js.map',
      'systemjs/dist/system.src.js',
        'systemjs/dist/system.src.js.map',
      'zone.js/dist/*.js',
        'zone.js/dist/*.js.map',
      'es6-shim/es6-shim.js',
        'es6-shim/es6-shim.js.map',
      'reflect-metadata/*.js',
        'reflect-metadata/*.js.map',
      'rxjs/**/*.js',
        'rxjs/**/*.js.map',
      '@angular/**/*.js',
        '@angular/**/*.js.map',
    ]
  });
};

Then run "ng build" and see if the files now exist.

[filipesilva]

This was fixed in https://github.com/angular/angular-cli/pull/839 and should be in beta.5 projects. Was your project created in beta.4?

If so, you can follow these steps to update your files to beta.5: https://github.com/angular/angular-cli/issues/847#issuecomment-220944072

[CrisGrec]

@filipesilva I'm still experiencing the issue.

Specifically the following when I load the page:

Failed to parse SourceMap: https://cosmos-ci.ats.itv.com/vendor/reflect-metadata/Reflect.js.map
Failed to parse SourceMap: https://cosmos-ci.ats.itv.com/system-config.js.map

The map files do not exist in the dist/vendor directory despite the fact that I've made the changes listed in #847 and I'm building with beta.5.

I had originally created the project with beta.0, is there some other change I need to make?

[filipesilva]

@CrisGrec hm.. can you verify that both the local and global angular-cli versions are beta.5?

[CrisGrec]

@filipesilva I don't have a global version installed, I build from the local angular-cli in node_modules.

[filipesilva]

Odd... If you can provide me with a repository or detailed reproduction instructions I can try to debug it myself.

[CrisGrec]

@filipesilva I've fixed the issue. Though the map files do not exist as mentioned in my previous comment, our web server would redirect these 404s to the index page which would result in parse errors.

The next issue we faced were 404s being generated from components imported in our main.ts. Without first exporting them in index.ts the loader would not find these files.

[alexpaluzzi]

@CrisGrec I'm still getting Failed to parse SourceMap on those same two files (Reflect.js.map and system-config.js.map). Can you elaborate on how you fixed this?

I am using beta.5.

This is a brand new fresh install of CLI and nothing in the code changed at all from original scaffolding.

[melquic]

Guys, same problem here. No .map in the vendor folder and a lot of "Failed to parse SourceMap" message on Chrome.

[CrisGrec]

@melquic If you're seeing a lot of those errors, chances are you haven't made the changes Felipe mentioned in this issue: #847 .

@alexpaluzzi For me the issue was how the web server was configured. It would redirect 404s to the index page. The missing map files would therefore redirect to the index page (HTML) which results in the error message 'Failed to parse SourceMap'.

What happens if you try to open the URL where the map file should be in your browser? When I tried I would see the 'loading...' page from Angular, which obviously wasn't correct.

The solution for me was to disable the redirect and instead return a 404 for map files. Reflect.js doesn't need the map file in order to work.

[peterwiebe]

I did a quick test using the beta.6 and this still seems to be an issue both on a brand new project and my original project which I updated to the latest release of angular-cli 1.0.0-beta.6. I made sure to go through the fixes @filipesilva mentioned very carefully as mentioned in issue: #847 but the map files are still not created.

The project is hosted on Firebase and the issue only appears for Chrome (although I believe that is because Chrome is the only one with SourceMaps really implemented). You can see the issue at lcfinancialtools.com in the console.

[filipesilva]

I misunderstood the issue initially. It seems related to how some servers are serving missing files, and a mention of an missing map file in the prod builds.

For instance, on @peterwiebe's example, https://lcfinancialtools.com/vendor/reflect-metadata/Reflect.js.map shows... the app itself. This is exactly what @CrisGrec mentioned.

There might be something we can do on CLI's side, namely not reference missing map files.

But this is very much a server configuration issue, mind you. Servers should 404 for missing files, not index.html.

[peterwiebe]

Thank you for opening this back up @filipesilva. For the time being, I am deleting the
//# sourceMappingURL=system-config.js.map line from system-config.js and the
//# sourceMappingURL=Reflect.js.map line from reflect.js from my production build to stop the errors from appearing in the console. This appears to be a short term solution.

[doovers]

Same issue for me in beta 10 with system-config.js.map & Reflect.js.map

[filipesilva]

Closed as obsolete due to #1455.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}