Ionic-app-scripts: During Ionic serving when sources changed sourcemaps are not updated in RC1

[jgw96]

_From @agasbzj on October 18, 2016 3:34_

Hello:
I find that in ionic serve or livereload mode, when you change some source code, the transpile starts perfectly but the related sourcemaps are not updated. This will make Chrome to stop at the false breakpoint.
I wonder if it is a ionic's problem or a ionic compile script's problem.

Thanks.

_Copied from original issue: driftyco/ionic#8768_

[JustinPierce]

All I want for Christmas is for this issue to be fixed. It's the worst!

[konrin]

I confirm that I have the exact same situation!

[PhilippRath]

@JustinPierce @konrin do you have them at all? i don't have sourcemaps no matter what parameter or config option i use in the latest latest

[JustinPierce]

@rathgeber2 The first time I debug the app after running ionic serve, I have perfect sourcemaps. As soon as it updates the bundle, the sourcemaps start getting out of sync. They seem to degrade with each update.

I'd honestly prefer having _no_ sourcemaps, at this point, because I can at least debug that. With a broken sourcemap, debugging is impossible.

[konrin]

@danbucholtz, this bug will be fixed in the next version? This error is very hinders the development.

[seangwright]

$ ionic info
--------------------------------
--------------------------------

Your system information:

Cordova CLI: 6.4.0
Gulp version:  CLI version 3.9.1
Gulp local:
Ionic Framework Version: 2.0.0-rc.1
Ionic CLI Version: 2.1.4
Ionic App Lib Version: 2.1.2
Ionic App Scripts Version: 0.0.36
OS:
Node Version: v6.6.0

I started through the tutorial and have immediately encountered this issue. I also took screenshots to show the weird stuff happening.

I started off running ionic serve

$ ionic serve                                                     

Running 'serve:before' npm script before serve                    


> ionic-hello-world@ watch E:\dev\tutorials\ionic-2-tutorial      
> ionic-app-scripts watch                                         

[23:02:06]  ionic-app-scripts 0.0.36                              
[23:02:06]  watch started ...                                     
[23:02:06]  build dev started ...                                 
[23:02:06]  clean started ...                                     
[23:02:06]  clean finished in 10 ms                               
[23:02:06]  copy started ...                                      
[23:02:06]  transpile started ...                                 
[23:02:07]  lint started ...                                      
[23:02:10]  lint finished in 2.75 s                               
[23:02:11]  transpile finished in 4.90 s                          
[23:02:11]  bundle started ...                                    
[23:02:11]  copy finished in 5.10 s                               
[23:02:22]  bundle finished in 10.55 s                            
[23:02:22]  sass started ...                                      
[23:02:24]  sass finished in 2.33 s                               
[23:02:24]  build dev finished in 17.81 s                         
[23:02:24]  watch ready in 17.90 s                                
Running live reload server: http://192.168.0.16:35729             
Watching: www/**/*, !www/lib/**/*, !www/**/*.map                  
√ Running dev server:  http://192.168.0.16:8100                   
Ionic server commands, enter:                                     
  restart or r to restart the client app from the root            
  goto or g and a url to have the app navigate to the given url   
  consolelogs or c to enable/disable console log output           
  serverlogs or s to enable/disable server log output             
  quit or q to shutdown the server and exit                       

At this point I opened dev tools in Chrome and looked at app.component.ts in the sources

Then I edited out the 2 console.table calls I had added in the openPage method of app.component.ts and waited for the reload...

ionic $ [23:04:55]  copy started ...                              
[23:04:55]  transpile update started ...                          
[23:05:00]  transpile update finished in 4.78 s                   
[23:05:00]  bundle update started ...                             
[23:05:00]  copy finished in 4.81 s                               
JS changed:   E:\dev\tutorials\ionic-2-tutorial\www\build\main.js 
[23:05:12]  bundle update finished in 11.84 s                     
[23:05:12]  watch ready                                           
[23:05:12]  transpile update started ...                          
[23:05:15]  transpile update finished in 3.35 s                   
[23:05:15]  bundle update started ...                             
JS changed:   E:\dev\tutorials\ionic-2-tutorial\www\build\main.js 
JS changed:   E:\dev\tutorials\ionic-2-tutorial\www\build\main.js 
[23:05:28]  bundle update finished in 13.18 s                     
[23:05:28]  watch ready                                           

At this point I looked at app.component.ts in dev tools again and you can see I can only set a breakpoint on line 42 where previously I could set breakpoints on all valid lines.

You can also see that all files other than list.ts are now gone from my sources view in dev tools.

[danbucholtz]

I believe this issue is resolved. Please let me know if it's not. Please runnpm install @ionic/app-scripts@latest to validate. I'll re-open if needed.

Thanks,
Dan