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 #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: #847 (comment)

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