Ionic-framework: ionic2 rc0 chrome browser cannot find typescript .ts file

duplicated https://github.com/driftyco/ionic/issues/8298

This is a duplicate of https://github.com/driftyco/ionic/issues/8292, so let's track it there. I'm going to close this for now.

Thanks,
Dan

Whoops, that is this issue, so let's leave it open. LOL!

Thanks,
Dan

if Source map file is not available in browser for debugging code. i will cannot work with ionic RC!!!!. i hope ionic team resolve this problem

So bad design

If I run ionic serve, I have source maps for/app, /pipes,/providers, and /pages is missing, no typescritp files

If I run ionic serve --lab, I have no /.tmp

We are working on this. This is a high priority item for us.

Thanks,
Dan

Great to see Ionic is working on this; just a +1 here because this is an issue for me as well, but I will work around this as best as I can and try to guess when I debug :)

FYI - This also affects trying to debug in Visual Studio Code using the cordova tools extension. Used to work like a dream in both the browser using serve and directly on a device. Now all I get is the console output coming through, no breakpoints will fire.

When I run ionic serve, I see source maps to transpiled JS. It is pretty straight forward to debug IMO. What are you seeing, and what would you like to see?

Thanks,
Dan

I can give you some screenshots of the issue if you would like. Basically in previous versions, the chrome debugger would show all the .ts files. Now it simply shows main.js. None of my pages .ts files appear. If you are getting map files with ionic serve and are able to debug code in your pages, then that's better than what I am experiencing.

@mirata, it is the same for me.
I'm using nvm and tried two different install of ionic and two different startup 'tabs' project, the pages.ts files does not appear both with node versions 4.6.0 and 6.7.0.

In all cases this is what I get:

Actually the scripts are transpiled , and i can able to see the scripts in the pages folder , but i am not able to see that pages folder in the sources tab,

just a suggesstion
i think the rollup remove the relation between the map file and the script file

@danbucholtz
I understand that is possible to debug the transpiled main.js file, with all the pages.ts inside it.
I also take for granted that rollup.js generates a code that is more optimized than webpack.

In any case could it be possible to have the previous ionic scripts of the webpack-gulp combination of tools so as to use them during the development?

In my opinion it is much simpler to debug with the separated .ts files, then to have the possibility to use rollup.js for a production build would be optimal and greatly appreciated.

@AntonioRossi, at this time, no. We will get source maps working. This is a high priority item for us.

I have a hunch the vast majority of changes for RC1 will be in app-scripts, unless there is a major bug found in the framework itself. We are iterating quickly on app-scripts as we're not satisfied with what we've produced so far.

Thanks,
Dan

@danbucholtz I'm not sure if you're saying that the source map issue won't be fixed until RC1?

If so, will a workaround be published beforehand? This is a really big problem, and I'd _really_ rather not wait for a new RC to be built, tested and published.

I was using Visual Studio to build and debug my ionic beta project. However, since rc0, I could not even build my project using Visual Studio anymore. Please note that I'm not even talking about debugging it.

@danielabbatt (or whoever else knows the answer), you mentioned that you also use VS. Do you have to change anything in your Visual Studio to be able to build Ionic2 rc0 project?

@eddyng8 did you follow the upgrade path in the Changelog?

Yes I did. I could build my project using "ionic build android" and ran it on my device using "ionic run android". So, I knew I followed everything in the Changelog correctly.

Let me back track a little bit. When I used ionic2 beta, I followed the following article to get my ionic2 project built and debugged in VS: https://blogs.msdn.microsoft.com/rido/2016/05/11/ionic2-and-visual-studio/. However, after upgraded my ionic2 to rc0 and followed the same steps again (minus the part that talked about gulp because the gulp built is removed in rc0), I got the following error when pressing F5 in VS:

MSB6006 tsc.exe exited with code 1. File: Microsoft MDA.FileMirroring.targets line 387

Also, I made sure that VS uses the same Node and npm version as when I did everything in command line by setting the path of the external tools as described in this article: https://blogs.msdn.microsoft.com/webdev/2015/03/19/customize-external-web-tools-in-visual-studio-2015/.

I hope somebody already figured out on how to use ionic2 rc0 in Visual Studio and can help me here. My goal is to be able to press F5 and run the app in the emulator via VS. And I know the debugging with ionic2 rc0 is not working. But when it works, of course I would like to be able to debug using VS again.

Amazing...

VS went fine with Ionic2 Beta, but after upgrading it to RC0 i get:

Build:Cannot find module './app.module.ngfactory'

however, ionic build passes and ionic serve works too

@xx0r thats in probably in the main.prod.ts, seams to me like the former Theme File linking to build directory, the file created at the build process and is available when you ionic serve under no-domain folder in the ChromeDevTools under scripts.

maybe you could comment it out and use the --dev parameter in package.json after build to force build with dev flag

Still no solution for this?

+1 Also seeing this issue. Any dirty workarounds until we see a fix?

@danbucholtz how soon can we expect to solve?

@konrin,

No timeline right now but this is high priority for us and we are moving fast with @ionic/app-scripts.

Thanks,
Dan

It seems the JS files are available for debugging when using an inline template: https://github.com/driftyco/ionic-app-scripts/issues/89

Debugging page components is impossible atm. however when I delete the js.map file I can at least set breakpoints in the main.js. otherwise I constantly get forwarded to those ngfactory files which are impossible to debug.

Are you expecting to release the patch as part of rc1, or will it be available before that via an update to @ionic/app-scripts?

This will hopefully be out soon - before RC1.

Thanks,
Dan

This is fixed now. Go ahead and update:

npm install @ionic/app-scripts@latest

Please let me know if there are still some issues.

I will re-open if needed.

Thanks,
Dan

Hey @danbucholtz ,

Thanks for the update 👍 , however it looks like the issue is not fully fixed. I'm seeing some issues when

1 - I add a breakpoint, the program flow doesnt stop at that point
2 - doesn't show all the .ts files.

Please have a look at the example below (steps to reproduce)

• create a new project ionic start demo --v2
• updated the scripts (npm install @ionic/app-scripts@latest)

This is what I see in the source maps

however this is the actual directory structure

or its possible I'm missing something here too. :). I've tested this with Chrome Version 53.0.2785.143 (64-bit)

Hope this will help for your investigation

cheers

Sam

@sameera207,

Good catch. Thanks for letting us know.

Thanks,
Dan

I just upgraded to this fix and now rollup isn't capable of finding some interfaces in my Model.ts file. removing the upgrade and going back to the previous version and it works. --> causing the whole build to not happen. it's hard for me to share this though. I'll try and see if the same happens with an ionic start project

_EDIT_ Clean ionic start works. It seems like rollup is having issues with typescript interfaces that extend other interfaces or something. However, unrelated

@danbucholtz after the upgrade, there was the same problem as in @pascalwhoop with finding some interfaces when building an application.

anyone has an Idea about how i can get debugging work with Visual Studio 2015? I ran the update for the ionic-app-scripts but still the breakpoint will not be triggered. Its however working with beta 11. Any Ideas? I almost gave up

@Rainson12 better give up with RC0 and keep working with Beta 11, it's way better!

@konrin, @pascalwhoop,

Can you provide a minimal example of how to recreate the situation. Can you check the @ionic/app-scripts package.json version attribute to let me know what version you're running?

Thanks,
Dan

@danbucholtz
Package version:
@ionic/app-scripts/package.json
"version": "0.0.29"

Example of error:

[18:09:30]  bundle dev failed:  Module C:/Projects/test/src/models/contact.ts does not export IContactHistory (imported by C:/Projects/test/src/components/contact-history
-item/contact-history-item.ts)                                                                                                                                                                  
[18:09:30]  Error: Module C:/Projects/test/src/models/contact.ts does not export IContactHistory (imported by C:/Projects/test/src/components/contact-history-item/contact
-history-item.ts)                                                                                                                                                                               
    at Module.trace (C:\Projects\test\node_modules\rollup\dist\rollup.js:7706:29)                                                                                                    
    at ModuleScope.findDeclaration (C:\Projects\test\node_modules\rollup\dist\rollup.js:7329:22)                                                                                     
    at Scope.findDeclaration (C:\Projects\test\node_modules\rollup\dist\rollup.js:5349:39)                                                                                           
    at Identifier.bind (C:\Projects\test\node_modules\rollup\dist\rollup.js:6497:29)                                                                                                 
    at C:\Projects\test\node_modules\rollup\dist\rollup.js:5149:50                                                                                                                   
    at UnaryExpression.eachChild (C:\Projects\test\node_modules\rollup\dist\rollup.js:5166:5)                                                                                        
    at UnaryExpression.bind (C:\Projects\test\node_modules\rollup\dist\rollup.js:5149:7)                                                                                             
    at UnaryExpression.bind (C:\Projects\test\node_modules\rollup\dist\rollup.js:6893:53)                                                                                            
    at C:\Projects\test\node_modules\rollup\dist\rollup.js:5149:50                                                                                                                   
    at BinaryExpression.eachChild (C:\Projects\test\node_modules\rollup\dist\rollup.js:5166:5)

Ionic info:

Cordova CLI: 6.3.1
Gulp version:  CLI version 3.9.1
Gulp local:
Ionic CLI Version: 2.1.0
Ionic App Lib Version: 2.1.0-beta.1
OS:
Node Version: v6.7.0

In the previous version the project build was successful

@konrin,

Thanks. I will try to recreate and see what's up.

Thanks,
Dan

We published some additional fixes here.

npm install @ionic/app-scripts@latest

It work's, I can debug pages and providers. great job @danbucholtz
thanks.

@danbucholtz sorry, but the latest version of app scripts does not resolve the interface issue mentioned by @konrin and @pascalwhoop

I have a standalone ts file that exports a single interface, and it doesn't seem like rollup can process it on ionic serve. Though I don't get any errors when running ionic build android so that's good at least. For reference, this is the error when running ionic serve

[13:45:59] bundle dev failed: Module edit-address/IAddress.ts does not export IAddress (imported by edit-address/edit-address.component.ts)

Even though that file does export that interface:

export interface IAddress { streetAddress: string, city: string, state: string, zip: string, lat: number, lng: number; }

I can debug in VSCode again, thanks!

Thanks so much to the Ionic team for the hard work!

I haven't made time to check out any of the new app-script solutions that were released recently because I'm working on some UI-related and back-end related stuff at the moment, but I do appreciate the work you guys are doing in squashing the bugs that came up after RC0.

@danbucholtz thanks for the update now it works with "ionic serve", we can debug again our ts files, but still we cannot inspect or log with chrome when we do "ionic run"

Debugging still doesnt work with Visual Studio 2015. I installed VS 2015 npm task runner extension and placed the "watch" task after the build event (I also tried it with the build --dev event". But still breakpoint wont be hit. When hovering over the breakpoints while debugging it even says: "The breakpoint will currently not be hit. No code has been loaded for this code location.". Any suggestions?

@joshgarwood @konrin @pascalwhoop,

Can you provide a repo of the interface thing, or tell me what I'm doing wrong?

I made a file called interface-one.ts

export interface One {
   testOne();
}

Then I made another file called interface-two.ts

import { One }  from './interface-one';
export interface Two extends One {
   testTwo();
}

I created another interface to describe the shape of an object called shape.ts

export interface Shape {
  fieldOne: string;
  fieldTwo: string;
}

Then my Page/Component looks like this:

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

import { Two } from '../interfaceTwo';

import { Shape } from '../shape';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage implements Two {

  constructor(public navCtrl: NavController) {
  }

  test() {
    console.log('testOne');
  }

  testTwo() {
    this.interfaceMethodTest({
      fieldOne: "test",
      fieldTwo: "testTwo"
    });
  }

  interfaceMethodTest(shape: Shape) {
    console.log('shape: ', shape);
  }
}

I implemented the interface correctly. It is an extended interface. I can run ionic serve without issue. What am I doing wrong?

Thanks,
Dan

Hey Dan!

Thanks for the quick follow-up, and all of the work to get everything wrapped up!

For me, I'm using the interface purely as a type. So it doesn't have any functions and nothing "implements" it. So I have:

IAddress.ts file

export interface IAddress { streetAddress: string, city: string, state: string }

Then I have a settings-address component file

import {Component, Input, OnInit} from '@angular/core';
import {NavController, NavParams, Events} from 'ionic-angular';
import {IAddress} from '../../user/directives/edit-address/IAddress';

@Component({
    templateUrl: 'settings-address.html'    
})

export class SettingsAddress {
    address: IAddress =
    {
        city: '',
        lat: 0,
        lng: 0,
        state: '',
        streetAddress: '',
        zip: ''
    };

    constructor(public nav: NavController, private navParams: NavParams, private accountService: AccountService, private events: Events, private alertService: AlertService) {

    }

    ngOnInit() {
      // init stuff here
    }
}

@joshgarwood, can you see my updated test. Hmm, I am doing the same thing with the shape interface. I wonder what is different.

Thanks,
Dan

Hey Dan! Hmm, is it the test in your comment, or in a repo somewhere? I can't find a shape interface in the comment above, so I'm likely missing something.

Also, I'm using ionic-app-scripts version 30, so maybe I don't have the latest? The package.json in source control has 30, so I thiiiink I'm up to date.

@danbucholtz i prepared a test project reproducing the error. If you try to build the project through tsc, the error does not occur.

https://github.com/konrin/ion-interface-test

@joshgarwood, @konrin, and @pascalwhoop,

We think we know what the issue is and are working to resolve it.

Thanks,
Dan

Debugging _in the browser_ works like a charm now. Thanks!

_Debugging on the device still doesn't work :(_

@danbucholtz thanks for the quick resolving of this issue! When you're sure what was the case, would you mind sharing? For educational purposes.

I'm trying to implement SQLite in my project, it returns an error "Unable to execute sql", source: file:///android_asset/www/build/main.js"

Implementation inside a constructor :


this.database = new SQLite();

this.database.openDatabase({
name: "data.db",
location: "default"
}).then(() => {
this.database.executeSql("create table if not exists people(id INTEGER PRIMARY KEY AUTOINCREMENT, firstname TEXT, lastname TEXT)", [] ).then(() => {
console.log("TABLE CREATED: ");
}, (error) => {
console.error("Unable to execute sql", error);
}) }, (error) => {
console.error("Unable to open database", error);
});

@danbucholtz any news about the error when building interfaces?

@konrin, working on it as we speak.

Thanks,
Dan

Thanks!

@danbucholtz are these interrelated? https://github.com/rollup/rollup-plugin-typescript/issues/65

I've ran npm install @ionic/app-scripts@latest on my project, and Typescript breakpoints are being hit if I run ionic serve. Unfortunately, when I run Ionic Serve from Visual Studio code, the breakpoints are hit in the transpiled main.js and not the source Typescript :( Is anything else needed for VSCode?

Before when an error occurred in the browser the console showed me that line of .ts, but now only show me the line in main.js Is right that?

@adamdbradley and @danbucholtz how to deal with error interfaces imports? I can not for a long time to build the project - for me it is a big problem. It is waiting for an update CLI.

Thank you

@konrin It seems that this happens only when interfaces are used in @Input(). I'm hoping that they fix it ASAP too.

As a workaround I'm using @Input() inputName: null | MyInterface (for some reason this works for me, and when they fix it I'll search for all occurences of null | in my project, remove them and let only the interfaces).

@konrin, we just pushed a fix and are going to start testing it out shortly. Hoping to ship soon.

Thanks,
Dan

@cocowalla : Can you give me a hint how to set up debugging from VS Code. Just new to it but would be great if i can set breakpoints there (regardless of the current prolem :))
Thanks in advance
Ralph

@ralph-fuechtenkort : I suggest you have a look at this.

@lucasbasquerotto great tip this fixes both the compiling and since its a union we get full typing support. very smart :-)

@ralph-fuechtenkort I don't want to derail this thread by going off-topic, but unfortunately GitHub doesn't have a PM facility. Anyway, you just need to install the cordova extension. More info.

Be aware though that it doesn't appear to be working with VSCode in the RC, even with @danbucholtz latest command.

Same issue with ionic run browser. No ts source map in dev tools.

Sometimes I have the problem that after a livereload the sourcemaps are gone and debugging is impossible. If no livereload happens, debugging works fine.

Seems like the latest script changes have fixed the typescript debugging issue for me. However changing html files does not update automatically if using ionic serve. I need to restart each time which is a massive pain. Anyone experiencing this?

@mirata,

What version are you on? We published two versions tonight. I think this should be fixed in 0.0.32, but I could be wrong.

Thanks,
Dan

@danbucholtz Sorry, never mind. I cleared my npm cache, reinstalled dependencies and the issue seems to be resolved.

Sorry to bump in a closed issue, but is this solved?

I'm on RC1 with app-script 0.0.39, deleted the whole node-modules directory, and run npm install again. I can't find any ts source in Chrome, just a bunch of transpiled js files under webpack://./.tmp/

Hi, I just updated app-scripts and I got the same problem again somehow...

no ts files to debug
The command I use is ionic serve with:
"build": "ionic-app-scripts build --dev",
"watch": "ionic-app-scripts watch --dev",
"serve:before": "watch",

This was fixed and now its not.

I tested it using app-scripts version 0.0.36 and it works. But using app-scripts / versions 0.0.37, 0.0.38 and 0.0.39 it fails.

Hope this helps.

When updating app-scripts or ionic, I always delete the folders /.tmp ,
/www, and /node_modules, then run 'npm install', this avoids me a lot of
issues.

On Sat, 5 Nov 2016, 3:14 a.m. Jose Blanco, [email protected] wrote:

I tested it using the version 0.0.36 and it works. But using the versions
0.0.37, 0.0.38 and 0.0.39 it fails.

Hope this helps.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/driftyco/ionic/issues/8292#issuecomment-258593897,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABCQy7lec8ol_EOePINBErSm1TYrKCg4ks5q7B7HgaJpZM4KJ6V6
.

It looks like the plan is for souremaps to be fixed in app-scripts version 0.0.40.

You can see this thread, skip to the bottom -

https://github.com/driftyco/ionic-app-scripts/issues/289

debugging again doesn't work with RC2 and Appscripts 0.0.43. Tested it in VS 2015

@Rainson12, use Chrome or a browser for debugging for now. We are using the default Webpack sourcemap set-up so it may or may not work with various IDEs. We will get this fixed ASAP.

Thanks,
Dan

I tried 0.0.43 in Chrome. I could see the *.ts files. But the content was a somewhat modified version of my *.ts files (it looks like WebPack modified them because it has a lot of WebPack decorators in there). I just want to know whether this is expected since WebPack is used instead of rollup? Back in 0.0.36, I saw the original content of *.ts files when debugging. I can live with this if this is the expected results. I just want to make sure that I didn't miss anything.

@eddyng8,

We are using cheaper/faster eval source maps right now by default. You can change them to be the original Typescript source map but the build will be slower. See this blog for more info.

Thanks,
Dan