Question

尝试将有效的angular2打字稿应用程序迁移到webpack后，我得到以下运行时错误

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>

Answer 1

从tsconfig中删除"noEmitHelpers": true

Answer 2

我能够通过使用打字和模仿这个项目来实现它：https://github.com/preboot/angular2-webpack

以下是更改后的文件（请注意使用此答案的任何人我对angular / typescript / 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>

Angular2 + Webpack UncaughtReferenceError __decorate未定义

2 个答案: