sourcemaps not working since 1.0.0 release

[billdwhite]

Bug Report or Feature Request (mark with an x)

- [ x ] bug report -> please search issues before submitting
- [ ] feature request

Versions.

@angular/cli: 1.0.1
node: 7.7.4
os: darwin x64

Repro steps.

ng build --watch -op=/myoutputfolder --base-href=/myhref --target=production --sourcemaps

The log given by the failure.

none

Desired functionality.

working sourcemaps that have accurate breakpoints

Mention any other details that might be useful.

Ever since the 1.0.0 release of angular-cli, my sourcemaps have stopped working. They get generated, but any breakpoints that I attempt to set are useless and never get hit. It is clear to me that the lines I am seeing in the Chrome debugger are not matching up with the generated sourcemaps. About 1/2 the time, when I open a source file in the debugger and set a breakpoint, it jumps to a bundle file with everything on a single line and then freezes up Chrome to the point where I have to force kill it and restart.

Back when I was using 1.0.0rc4 of angular-cli, the sourcemaps worked great. However once everything went 1.0.0, they immediately stopped working and all sourcemaps that were generated would not work correctly. I could not set breakpoints, I could not evaluate any variables by holding the mouse over them, nor could I evaluate anything with watches or console evaluations.

If I do a non-production build, the sourcemaps work just fine. It is very possible that I'm just not creating them correctly. However, troubleshooting the sourcemaps is very difficult given that webpack configurations are hidden and the angular-cli options for creating sourcemaps are limited.. I'm pasting my project files below in case that helps.

Any help is GREATLY appreciated!

package.json

{
  "name": "navigate",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "aot-compile": "./node_modules/.bin/ngc -p ./src/tsconfig-aot.json",
    "lint": "ng lint",
    "test": "ng test",
    "pree2e": "webdriver-manager update",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "4.0.3",
    "@angular/cli": "^1.0.1",
    "@angular/common": "4.0.3",
    "@angular/compiler": "4.0.3",
    "@angular/compiler-cli": "4.0.3",
    "@angular/core": "4.0.3",
    "@angular/forms": "4.0.3",
    "@angular/http": "4.0.3",
    "@angular/platform-browser": "4.0.3",
    "@angular/platform-browser-dynamic": "4.0.3",
    "@angular/platform-server": "4.0.3",
    "@angular/router": "4.0.3",
    "@ngui/datetime-picker": "0.16.2",
    "@types/greensock": "1.15.32",
    "@types/gsap": "1.19.1",
    "@types/lodash": "4.14.63",
    "ag-grid": "9.0.3",
    "ag-grid-angular": "9.0.3",
    "angular2-fontawesome": "0.9.0",
    "angular2-uuid": "1.1.1",
    "awesome-typescript-loader": "3.1.2",
    "bootstrap": "3.3.7",
    "core-js": "2.4.1",
    "d3": "4.8.0",
    "font-awesome": "4.7.0",
    "gsap": "1.19.1",
    "jquery": "3.2.1",
    "lodash": "4.17.4",
    "moment": "2.18.1",
    "mydatepicker": "1.9.11",
    "ng2-bootstrap": "1.6.3",
    "ng2-logger": "1.0.2",
    "ng2-toastr": "4.0.1",
    "ngx-color-picker": "4.0.0",
    "ngx-cookie": "1.0.0",
    "primeng": "4.0.0-rc.3",
    "primeui": "4.1.15",
    "reflect-metadata": "0.1.10",
    "rxjs": "5.3.0",
    "symbol-observable": "1.0.4",
    "tether": "1.4.0",
    "ts-helpers": "1.1.2",
    "typescript-collections": "1.2.3",
    "zone.js": "0.8.9"
  },
  "devDependencies": {
    "@angular/cli": "1.0.1",
    "@angular/compiler-cli": "4.0.3",
    "@ngtools/webpack": "1.3.1",
    "@angular/language-service": "4.0.3",
    "@types/chai": "3.5.1",
    "@types/d3": "4.8.0",
    "@types/jasmine": "2.5.47",
    "@types/protractor": "4.0.0",
    "codelyzer": "3.0.0",
    "jasmine-core": "2.6.0",
    "jasmine-spec-reporter": "4.0.0",
    "karma": "1.6.0",
    "karma-chrome-launcher": "2.0.0",
    "karma-cli": "1.0.1",
    "karma-jasmine": "1.1.0",
    "karma-remap-istanbul": "0.6.0",
    "protractor": "5.1.1",
    "source-map-explorer": "1.3.3",
    "ts-node": "3.0.2",
    "tslint": "5.1.0",
    "typescript": "2.2.2",
    "webdriver-manager": "12.0.5"
  }
}

.angular-cli.json

{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "project": {
        "name": "navigate"
    },
    "apps": [
        {
            "root": "src",
            "outDir": "dist",
            "assets": [
                "assets",
                "index.jsp",
                "WEB-INF",
                "META-INF"
            ],
            "index": "index.html",
            "main": "main.ts",
            "polyfills": "polyfills.ts",
            "test": "test.ts",
            "tsconfig": "tsconfig.app.json",
            "prefix": "app",
            "styles": [
                "../node_modules/ag-grid/dist/styles/ag-grid.css",
                "../node_modules/ag-grid/dist/styles/theme-dark.css",
                "../node_modules/ag-grid/dist/styles/theme-material.css",
                "../node_modules/ag-grid/dist/styles/theme-bootstrap.css",
                "../node_modules/tether/dist/css/tether.min.css",
                "../node_modules/bootstrap/dist/css/bootstrap.min.css",
                "../node_modules/primeui/themes/bootstrap/theme.css",
                "../node_modules/font-awesome/css/font-awesome.min.css",
                "../node_modules/primeui/primeui-ng-all.css",
                "../node_modules/ng2-toastr/ng2-toastr.css",
                "styles.css"
            ],
            "scripts": [
                "../node_modules/jquery/dist/jquery.min.js",
                "../node_modules/moment/min/moment.min.js",
                "../node_modules/bootstrap/dist/js/bootstrap.min.js",
                "../node_modules/tether/dist/js/tether.min.js",
                "../node_modules/gsap/src/minified/TweenMax.min.js",
                "../node_modules/gsap/src/minified/TimelineMax.min.js",
                "assets/scripts/vendor/odoo/odoo.js",
                "assets/scripts/vendor/modernizr/modernizr-custom.min.js"
            ],
            "environmentSource": "environments/environment.ts",
            "environments": {
                "dev": "environments/environment.ts",
                "prod": "environments/environment.prod.ts"
            }
        }
    ],
    "addons": [],
    "packages": [
        {
            "odoo": {
                "defaultExtension": "js",
                "main": "odoo.js"
            },
            "modernizr": {
                "defaultExtension": "js",
                "main": "modernizer.min.js"
            },
            "gsap": {
                "defaultExtension": "js",
                "main": "TweenMax.min.js"
            }
        }
    ],
    "e2e": {
        "protractor": {
            "config": "./protractor.conf.js"
        }
    },
  "lint": [
    {
      "files": "src/**/*.ts",
      "project": "src/tsconfig.app.json"
    }
  ],
    "test": {
        "karma": {
            "config": "./karma.conf.js"
        }
    },
    "defaults": {
        "styleExt": "css",
        "prefixInterfaces": false,
        "inline": {
          "style": false,
          "template": false
        },
        "spec": {
          "class": false,
          "component": true,
          "directive": true,
          "module": false,
          "pipe": true,
          "service": true
        }
    }
}

main.ts

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {enableProdMode} from '@angular/core';
import {environment} from './environments/environment';
import {AppModule} from './app/app.module';
import {Log, Level} from 'ng2-logger';
import 'gsap';

const log = Log.create('log');
let url = window.parent.parent.parent.location.href;  // @TODO: fix this to be more robust
if (url.indexOf('betaMode') > -1) {
    window['beta'] = true;
}
if ((environment.production && url.indexOf('debug') < 0)
     ||
     (url.indexOf('production') > -1)) {
    enableProdMode();
    Log.setProductionMode();
} else {
    log.i('RUNNING IN DEVELOPMENT MODE');
}
platformBrowserDynamic().bootstrapModule(AppModule);

tsconfig.app.json

{
  "compilerOptions": {
    "baseUrl": "",
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es6", "dom"],
    "mapRoot": "../",
    "module": "commonjs",
    "moduleResolution": "node",
    "outDir": "../dist",
    "sourceMap": true,
    "target": "es5",
    "typeRoots": [
      "../node_modules/@types",
      "src/typings"
    ]
  }
}

[jvbianchi]

I think I have the same problem, but started after I updated to version 1.0.1

[pjir]

Just downgrade zonejs to 0.8.7 and it will be working again.

[billdwhite]

@pjir that didn't work for me; same behavior as before....

[damoqiongqiu]

Same problem on Windows 10 and angular/cli v1.0.1

[filipesilva]

So this only happens on production builds, right?

[billdwhite]

@filipesilva Yes, that's correct.

[sumitarora]

@billdwhite Seems to be an issue with UglifyJsPlugin webpack plugin. Removing that and running the prod build works fine and I can see the breakpoints and work with them.

[billdwhite]

@sumitarora how do I remove that plugin? it seems that webpack configuration is pretty limited for angular-cli users so I'm not sure how to disable that....

[BenoitFroment]

Hello there, how do we disable UglifyJsPlugin please ?

[billdwhite]

Anyone know how to disable the UglifyJsPlugin?

[kingjordan]

same issue on windows 10 cli v 1.0.2

now that the ts config files are split into multiple files like tsconfig.app.json and tsconfig.spec.json I noticed that the tsconfig.app.json within a default new project for angular cli 1.0.2 is as follows:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "module": "es2015",
    "baseUrl": "",
    "types": []
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

So source maps are not listed here. So I added "sourceMap": true, to the compiler options. Source maps are still not being created for the prod build.

I tested this on a brand new cli 1.0.2 project and only changed the tsconfig.app.json file to include sourceMap = true. Then I built using ng build --prod.

Maybe I am missing the intention, but I think the previous versions of cli included .map files with production build. This was helpful for local debugging and could be removed when deploying the app.

[ddehghan]

it seems that they added a new option to turn off sourcemaps in prod build. I get the source maps generated on cli v 1.0.3 using this:

ng build --prod --aot false --sourcemap --environment=prod --base-href=/dist/index.html

[kingjordan]

@billdwhite and @ddehghan I found the build flag for settings a couple days ago as well and forgot to post here. The default for build --prod is now including AOT and not including source maps. By using the flags I was able to get the sourcemaps I wanted. I think this can be closed now.

[billdwhite]

@kingjordan I actually had this problem even when I included the --sourcemap flag. However, after reading the response from @sumitarora , I did some searching and read a few articles where some folks believed the UglifyJsPlugin did not work well with es6. So I changed the tsconfig file's line: "lib": ["es6", "dom"] to "lib": ["es2015", "dom"] and that worked. I have since updated to 1.0.3 and then went back to es6 to test and it still seems to work. So perhaps this is resolved but I wonder if this also works for others....

[filipesilva]

Closing as it seems to be sorted.

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