Angular2 +的WebPack UncaughtReferenceError __decorate沒有定義

試圖遷移功能angular2打字稿應用的WebPack我得到以下運行時錯誤Angular2 +的WebPack UncaughtReferenceError __decorate沒有定義

app.js:38016Uncaught ReferenceError: __decorate is not defined

在該行的代碼，它打擊了這個樣子的

後

NpnPortalService = __decorate([ 
      core_1.Injectable(), 
      __metadata('design:paramtypes', [http_1.Http]) 
     ], NpnPortalService);

Webpack不抱怨當我做一個構建，我沒有看到任何打字稿編譯錯誤。這裏是我的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' ] 
    } 
};

這裏是我的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 
}

這裏是我的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>

來源

2016-04-25 apricity

可能的重複http://stackoverflow.com/questions/36808303/webpackangular2-error-uncaught-referenceerror-decorate-is-not-defined – yurzui

刪除"noEmitHelpers": true從tsconfig

來源

2016-04-25 18:50:28 xphong

是的，我看到了其他stackoverflow，並試圖已經沒有運氣:( – apricity

@apricity我已經構建了你的配置，並在刪除noEmitHelpers之後就能正常工作。 – yurzui

@xphong，奇怪它以前不適合我......但在做出所有我在答案中發佈的更改之後，我嘗試添加「noEmitHelpers」：真的回來了，它確實再次破壞了。也許有些東西被緩存了，或者還有其他問題。 – apricity

我能夠通過使用類型和模仿這個項目得到它的工作：https://github.com/preboot/angular2-webpack

下面是修改過的文件（注意，任何人誰使用這個答案我很新的角度/打字稿/的WebPack所以我可能會錯誤地做一些事情）：

webpack.config.js

module.exports = { 
    entry: { 
     polyfills: ['es6-shim/es6-shim.js', 'angular2/bundles/angular2-polyfills'], 
     app: "./app/boot.ts" 
    }, 
    output: { 
     path: __dirname + '/dist', 
     filename: "[name].js" 
    }, 
    resolve: { 
     extensions: ['', '.js', '.ts'] 
    }, 
    module: { 
     loaders: [{ 
      test: /\.ts$/, 
      loaders: ['ts-loader'], 
      exclude: /node_modules/ 
     }] 
    } 
};

tsconfig.json

{ 
    "compilerOptions": { 
    "target": "es5", 
    "module": "commonjs", 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "sourceMap": true 
    }, 
    "exclude": [ 
    "node_modules", 
    "typings/main", 
    "typings/main.d.ts" 
    ], 
    "compileOnSave": false, 
    "buildOnSave": false 
}

的index.html

<!DOCTYPE html> 
<html> 
    <head> 

    <!--<meta name="viewport" content="width=device-width, initial-scale=1.0">--> 

    <!-- Set the base href --> 
    <!--<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>

來源

2016-04-25 19:57:15 apricity

Angular2 +的WebPack UncaughtReferenceError __decorate沒有定義

回答

相關問題