Ionic-app-scripts: Incorrect line numbers of the source files.

[amreladawy]

Short description of the problem:

Some of the components are mapped to wrong line numbers. That is making dubbing on chrome very difficult.

Some of the classes are correctly mapped to original line numbers, some are not. There is always a shift but in a variable number of lines.

What behavior are you expecting?

The source mapped files should match the original *.ts files.

Which @ionic/app-scripts version are you using?
@ionic/cli-utils : 1.18.0
ionic (Ionic CLI) : 3.18.0

global packages:

cordova (Cordova CLI) : not installed

local packages:

@ionic/app-scripts : 3.1.0
Cordova Platforms  : browser 4.1.0 ios 4.5.1
Ionic Framework    : ionic-angular 3.9.2

System:

Android SDK Tools : 26.1.1
Node              : v6.11.2
npm               : 5.5.1
OS                : Windows 10

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)

There was a reported issue on angular that is closed.
https://github.com/angular/angular-cli/issues/2811

[danbucholtz]

Can you provide a sample project to reproduce the issue?

Thanks,
Dan

[amreladawy]

Hi Dan,
Thanks for the prompt response. here is what I tried.

ionic start test tabs
cd test
ionic g page test

Then edit the test.ts as following:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

/**
 * Generated class for the TestPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage({
  name: "test",
  segment: "test"
}) @Component({
  selector: 'page-test',
  templateUrl: 'test.html',
})
export class TestPage {

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }


  ionViewDidLoad() {
    console.log('ionViewDidLoad TestPage');
    console.log("Line26")
    console.log("Line27")
    console.log("Line28")
    console.log("Line29")
    console.log("Line30")


    console.log("Line33")
    console.log("Line34")
    console.log("Line35")
    console.log("Line36")


    console.log("Line39")
    console.log("Line40")
    console.log("Line41")
    console.log("Line42")

  }

}

The log statements match the line number in the test.ts file.

running the app will show the following

Inspecting the source code shows the following

Please note that the line number showed next to the statement is correct, however, if you set a breakpoint next to line 26, for example, it is in fact at line 29 where lines 26,27,28 are executed before hitting the breakpoint.

You may also notice how the line numbers on the side of the source files are active and inactive according to a shifted basis.

[thedang]

Can you try, add lines in file package.json

"config": {
    "ionic_bundler": "webpack",
    "ionic_source_map_type": "eval"
  }

[amreladawy]

Hi,
I tried what you suggested, and the src folder disappeared from chrome. also, lines are shifted by two lines .

[keyz182]

I'm also seeing the same behaviour as @amreladawy

[danbucholtz]

This is fixed in the 3.1.5 release.

Thanks,
Dan

[amreladawy]

Here is the change

https://github.com/ionic-team/ionic-app-scripts/commit/a5df139

[amreladawy]

Hi Dan,

I still see this issue again on my current project event after updating to latest app-scripts. It is not happening when starting a new project.

[amreladawy]

Hi Dan,
I still have the same issue. Should I do anything?

[amjadyahya]

same here with ionic 3.19.1

[snortblt]

Also seeing with ionic 3.9.2

[marcellkiss]

No success after updating to the latest version:
ionic/app-scripts: 3.1.9
Debugging is unusable :(

[mydoal]

Using action script 3.1.8
Ionic 3.19.1

This issue still persists.
There is a difference of two lines in the Chrome debugger.
All imports are done in the same line (no breaking up imports across several lines).

Why is this issue closed?
Did someone find a solution?

[exequielc]

same issue here. There is any help ?

[pcsantana]

Hi!
I was facing the same problem.
To solve this issue make sure that:

1. Imports are defined in one line! Example:

Do:

import { ChangeDetectorRef, Component, Injector, ViewChild, ElementRef } from '@angular/core';

Avoid:

import { 
    ChangeDetectorRef, 
    Component, 
    Injector, 
    ViewChild, 
    ElementRef 
} from '@angular/core';

2. @IonicPage decorator is defined in one line:

Do:

@IonicPage({name: 'TestPage', segment: 'test-page'})

Avoid:

@IonicPage({
    name: 'TestPage,
    segment: 'test-page'
})

Why? I don´t know, but worked for me! :D

[keyz182]

@pcsantana I guess I'm disabling "max-line-length" in tslint then if this works!

[synnottd]

I'm experiencing this on 3.2.0. Is there any fix for this apart from moving imports and decorators onto one line?

[leegee]

Same issue in "@ionic/angular": "4.0.0-beta.12" -- presumably using faulty webpack source mapper, but I have no idea where that is configured....