Webpack (angular cli): is there anyway to get the filename that caused the exception?

Question

So I moved to Webpack (angular-cli) from SystemJS and I must say that the one things that is really troubling to me is that with webpack the errors have no reference to the original file name as they were all bundled up.

Am I missing something as this is a major issue for me and I just can't imagine Webpack being as popular as it is with such a critical shot coming; so I am sure I am missing something.

here is an example:

    Service Worker registered
App loaded ready
Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode.
EXCEPTION: Uncaught (in promise): Cannot decode base64
  ErrorHandler.handleError  
  next  
  schedulerFn   
  SafeSubscriber.__tryOrUnsub   
  SafeSubscriber.next   
  Subscriber._next  
  Subscriber.next   
  Subject.next  
  EventEmitter.emit 
  NgZone.triggerError   
  onHandleError 
  ZoneDelegate.handleError  
  Zone.runGuarded   
  _loop_1   
  drainMicroTaskQueue   
ORIGINAL STACKTRACE:
  ErrorHandler.handleError  
  next  
  schedulerFn   
  SafeSubscriber.__tryOrUnsub   
  SafeSubscriber.next   
  Subscriber._next  
  Subscriber.next   
  Subject.next  
  EventEmitter.emit 
  NgZone.triggerError   
  onHandleError 
  ZoneDelegate.handleError  
  Zone.runGuarded   
  _loop_1   
  drainMicroTaskQueue   
Error: Uncaught (in promise): Cannot decode base64
    at resolvePromise (http://localhost:4203/main.bundle.js:204090:31) [angular]
    at http://localhost:4203/main.bundle.js:204127:17 [angular]
    at Object.onInvokeTask (http://localhost:4203/main.bundle.js:64676:37) [angular]
    at ZoneDelegate.invokeTask (http://localhost:4203/main.bundle.js:203876:40) [angular]
    at Zone.runTask (http://localhost:4203/main.bundle.js:203766:47) [<root> => angular]
    at drainMicroTaskQueue (http://localhost:4203/main.bundle.js:204020:35) [<root>]
  ErrorHandler.handleError  
  next  
  schedulerFn   
  SafeSubscriber.__tryOrUnsub   
  SafeSubscriber.next   
  Subscriber._next  
  Subscriber.next   
  Subject.next  
  EventEmitter.emit 
  NgZone.triggerError   
  onHandleError 
  ZoneDelegate.handleError  
  Zone.runGuarded   
  _loop_1   
  drainMicroTaskQueue   
Unhandled Promise rejection: Cannot decode base64 ; Zone: angular ; Task: Promise.then ; Value: Cannot decode base64 
  consoleError  
  _loop_1   
  drainMicroTaskQueue   
Error: Uncaught (in promise): Cannot decode base64
    at resolvePromise (http://localhost:4203/main.bundle.js:204090:31) [angular]
    at http://localhost:4203/main.bundle.js:204127:17 [angular]
    at Object.onInvokeTask (http://localhost:4203/main.bundle.js:64676:37) [angular]
    at ZoneDelegate.invokeTask (http://localhost:4203/main.bundle.js:203876:40) [angular]
    at Zone.runTask (http://localhost:4203/main.bundle.js:203766:47) [<root> => angular]
    at drainMicroTaskQueue (http://localhost:4203/main.bundle.js:204020:35) [<root>]
  consoleError  
  _loop_1   
  drainMicroTaskQueue   

but nowhere does it indicate the file name ?!?!?

is there some magical source mapping that I can turn on?

thanks for reading,

Sean.

Answer 1

I assuming that the error you got is from Browser console.

If you want to get the detailed error at the time of bundling/compiling, you could use stat configuration with webpack.config.js.

...},
stats: {
 colors: true,
modules: true,
 reasons: true,
 errorDetails: true
},
...

Otherwise if you use webpack CLI, then you can provide the below flag,

webpack --colors --display-error-details

But it seems that the error you shared is from your Application not from webpack. So the error reported is not by webpack but your application. Your entire application is bundled as single file, thats why you are not getting any information about the file which is failed to execute.

From your error log, it is clear that there is an error while creating the instance of the component AppComponent as per the error log.

ReferenceError: foo is not defined
    at new AppComponent (http://localhost:4201/main.bundle.js:96921:21)

Since you are getting this error when you run the app in browser, you have to debug the AppComponent.

This error is not from Webpack but from your Application. As it is bundled, you are getting http://localhost:4201/main.bundle.js:96921:21.

To debug your webpack bundle, enable the devtool with source-map value as shown below.

{
    devtool: "source-map"
}