Angular 2 Universal无法解析SourceMap：http：// localhost：3000 / dist / client / toSubscriber.js.map

Question

我在Angular2应用程序中使用这些依赖项：

"dependencies": {
    "@angular/common": "2.0.0-rc.3",
    "@angular/compiler": "2.0.0-rc.3",
    "@angular/core": "2.0.0-rc.3",
    "@angular/http": "2.0.0-rc.3",
    "@angular/platform-browser": "2.0.0-rc.3",
    "@angular/platform-browser-dynamic": "2.0.0-rc.3",
    "@angular/platform-server": "2.0.0-rc.3",
    "@angular/router": "3.0.0-alpha.8",
    "angular2-universal": "~0.104.1",
    "parse5": "^1.5.0",

    "body-parser": "^1.15.1",
    "express": "^4.13.4",
    "preboot": "^2.1.2",
    "rxjs": "5.0.0-beta.6",

    "angulartics2": "^1.1.1"
  },
  "devDependencies": {
    "nodemon": "^1.9.2",
    "raw-loader": "^0.5.1",
    "rimraf": "^2.5.2",
    "source-map-loader": "^0.1.5",
    "ts-loader": "^0.8.2",
    "typescript": "^1.8.9",
    "typings": "~1.0.5",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.0",
    "webpack-merge": "^0.13.0"
  }

当我加载应用程序时，在F5开发人员工具中，我看到：

  

无法解析SourceMap：   http://localhost:3000/dist/client/toSubscriber.js.map

我认为我看到的问题与GitHub中记载的问题相同，但我找不到任何解决方案。我该如何修复错误？ （或者可以安全地忽略它吗？）

Answer 1

尝试在webpack配置文件中添加以下行

preLoaders: [
  { test: /\.js$/, loader: 'source-map-loader' }
],

在我的结尾，它放在这里：

var commonConfig = {
  resolve: {
    extensions: ['.ts', '.js', '.json']
  },
  module: {
    loaders: [
      // TypeScript
      { test: /\.ts$/, loaders: ['ts-loader', 'angular2-template-loader'] },
      { test: /\.html$/, loader: 'raw-loader' },
      { test: /\.css$/, loader: 'raw-loader' },
      { test: /\.json$/, loader: 'json-loader' }
    ],
    preLoaders: [
      // needed to lower the filesize of angular due to inline source-maps
      { test: /\.js$/, loader: 'source-map-loader' },
      { test:/node_modules\/@angular2-material/, loader: 'source-map-loader'}
    ],
  },
  plugins: [
    new webpack.ContextReplacementPlugin(
      // The (\\|\/) piece accounts for path separators in *nix and Windows
      /angular(\\|\/)core(\\|\/)src(\\|\/)linker/,
      root('./src'),
      resolveNgRoute(root('./src'))
    )
  ]

};

最后这个变量用于webpack merge：

var webpackMerge = require('webpack-merge');
module.exports = [
  // Client
  webpackMerge({}, defaultConfig, commonConfig, clientConfig),

  // Server
  webpackMerge({}, defaultConfig, commonConfig, serverConfig)
];