Question

所以我从SystemJS转移到了Webpack（angular-cli），我必须说，对我来说真正令人不安的一件事是，对于webpack，错误没有引用原始文件名，因为它们都是捆绑在一起的。

我错过了一些东西，因为这对我来说是一个主要问题，而且我无法想象Webpack会像这样一个关键镜头一样受欢迎。所以我相信我错过了什么。

这是一个例子：

    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

但是它无处指示文件名？！？！？

我可以打开一些神奇的源映射吗？

感谢阅读，

肖恩。

Answer 1

我假设你得到的错误来自浏览器控制台。

如果您想在捆绑/编译时收到详细错误，可以使用stat配置webpack.config.js。

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

否则，如果您使用webpack CLI，则可以提供以下标志

webpack --colors --display-error-details

但似乎你分享的错误来自你的应用程序，而不是来自webpack。所以报告的错误不是由webpack而是你的应用程序。您的整个应用程序捆绑为单个文件，这就是为什么您没有获得有关无法执行的文件的任何信息。

从错误日志中可以清楚地看到，根据错误日志创建组件AppComponent的实例时出错。

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

由于在浏览器中运行应用程序时出现此错误，因此必须调试AppComponent。

此错误不是来自Webpack，而是来自您的应用程序。捆绑后，您将获得http://localhost:4201/main.bundle.js:96921:21。

要debug您的网络包，请启用devtool source-map值，如下所示。

{
    devtool: "source-map"
}

Webpack（angular cli）：无论如何都要获取导致异常的文件名？

1 个答案: