2016-04-25 8 views
3

definiert Nach dem Versuch, eine funktionierende angular2 Typoskript App webpack zu migrieren ich die folgenden LaufzeitfehlerAngular2 + Webpack UncaughtReferenceError __decorate nicht

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

Der Code an der Linie, wo es aussieht explodiert wie diese

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

Webpack beschwert sich nicht, wenn ich einen Build ausführe, und ich sehe keine Fehler beim Kompilieren von Typoskripten. Hier ist meine 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' ] 
    } 
}; 

hier mein tsconfig.js ist

{ 
    "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 
} 

und hier ist meine 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> 
+0

Mögliches Duplikat http://stackoverflow.com/questions/36808303/webpackangular2-error-uncaught-referenceerror-decorate-is-not-defined – yurzui

Antwort

14

entfernen "noEmitHelpers": true von Ihrem TSconfig

+0

yeah Ich sah das andere stackoverflow und versuchte das schon ohne Glück :( – apricity

+0

@apricity Ich habe Ihre Konfiguration erstellt und nach dem Entfernen von NoEmitHelpers funktioniert es. – yurzui

+0

@xphong, seltsam, es funktionierte nicht für mich früher .... aber nachdem ich alle Änderungen vorgenommen habe, die ich in der Antwort geschrieben habe, habe ich versucht, "noEmitHelpers" hinzuzufügen: true zurück und es tat tatsächlich wieder zu brechen. Vielleicht wurde etwas zwischengespeichert oder vielleicht gab es zusätzliche Probleme. – apricity

0

Ich konnte es mit der Verwendung von Typings und der Nachahmung dieses Projekts arbeiten: https://github.com/preboot/angular2-webpack

Hier sind die geänderten Dateien (für jeden Hinweis, die diese Antwort verwendet I Winkel/Typoskript zu sehr neu bin/webpack so könnte ich einige Dinge falsch tun):

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> 
Verwandte Themen