कोणीय 2 यूनिवर्सल SourceMap को पार्स करने में विफल: http: // localhost: 3000 / dist / client / toSubscriber.js.map - कोणीय

मैं अपने 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 डेवलपर टूल में मैं देखता हूं:

स्रोत मैप पार्स करने में विफल: http://localhost:3000/dist/client/toSubscriber.js.map

मुझे लगता है कि मैं उसी मुद्दे को देख रहा हूं जिस पर दस्तावेज दिया गया है GitHub, लेकिन मैं "किसी भी संकल्प को नहीं ढूँढ सकता। मैं त्रुटि को कैसे ठीक करूं? (या इसे सुरक्षित रूप से अनदेखा किया जा सकता है?"

उत्तर:

अपने वेबपैक कॉन्फ़िगर फ़ाइल में निम्नलिखित पंक्तियों को जोड़ने का प्रयास करें

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"))
)
]

};

और अंत में वेब चर मर्ज में इस चर का उपयोग किया जाता है:

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

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