Menu
After trying to migrate a functioning angular2 typescript app to webpack I get the following runtime error
app.js:38016Uncaught ReferenceError: __decorate is not defined
The code at the line where it blows up looks like this
NpnPortalService = __decorate([
core_1.Injectable(),
__metadata('design:paramtypes', [http_1.Http])
], NpnPortalService);
Webpack doesn't complain when I do a build and I'm not seeing any typescript compile errors. Here is my webpack.config.js
module.exports = {
entry: {
app: "./app/boot",
polyfills: ['./node_modules/es6-shim/es6-shim.min.js', './node_modules/zone.js/dist/zone.min.js']
},
output: {
path: __dirname + '/dist',
filename: "[name].js"
},
resolve: {
extensions: ['', '.js', '.ts']
},
module: {
loaders: [{
test: /\.ts/, loader: 'ts-loader', exclude: /node_modules/
}],
noParse: [ './node_modules/es6-shim/es6-shim.min.js' ]
}
};
Here is my tsconfig.js
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"sourceMap": true,
"noEmitHelpers": true
},
"files": [
"app.component.ts",
"../node_modules/angular2/typings/browser.d.ts"
],
"compileOnSave": false,
"buildOnSave": false
}
and here is my index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>
<!-- Set the base href -->
<script>document.write('<base href="' + document.location + '" />');</script>
<title>NPN Data Download Tool</title>
<script src="dist/polyfills.js"></script>
<!-- Google Maps Initialization -->
<script>
function initMap() {
var mapDiv = document.getElementById('map_canvas');
console.log(mapDiv.getAttribute("intialized"));
if (!mapDiv.getAttribute("intialized")) {
console.log("intializing google map");
var map = new google.maps.Map(mapDiv, {
center: {lat: 40.750289, lng: -89.583163},
zoom: 5
});
map.enableKeyDragZoom();
var dz = map.getDragZoomObject();
google.maps.event.addListener(dz, "dragend", function(bnds) {
document.getElementById("ObservationBottomLeftX1").value = bnds.getSouthWest().lat();
document.getElementById("ObservationBottomLeftY1").value = bnds.getSouthWest().lng();
document.getElementById("ObservationUpperRightX2").value = bnds.getNorthEast().lat();
document.getElementById("ObservationUpperRightY2").value = bnds.getNorthEast().lng();
document.getElementById("necoords").innerHTML = "<span style='font-weight:bold'>North East Corner</span>: " + bnds.getNorthEast().lat() + ", " + bnds.getNorthEast().lng();
document.getElementById("swcoords").innerHTML = "<span style='font-weight:bold'>South West Corner</span>: " + bnds.getSouthWest().lat() + ", " + bnds.getSouthWest().lng();
});
google.maps.event.addListener(map, 'zoom_changed',
function() {
if (map.getZoom() < 3) {
map.setZoom(3);
};
});
document.getElementById('map_canvas').setAttribute("intialized", true);
}
}
</script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="./keydragzoom.js" type="text/javascript"></script>
</head>
<body>
<my-app>loading...</my-app>
</body>
<script src="dist/app.js"></script>
<!-- Bootstrap -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Override Bootstrap css here -->
<link rel="stylesheet" href="styles.css">
</html>
476
Remove "noEmitHelpers": true from your tsconfig
103
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
