sourcemaps not working since 1.0.0 release #6084
Description
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"
]
}
}