javascript - 未定义的 Angular 2 的“reflectionCapability”

Question

嘿，我刚刚开始使用 webpack 来使用 Angular 2，在尝试启动应用程序时遇到此错误

index.js:93 Uncaught TypeError: Cannot set property 'reflectionCapabilities' of undefined which is this line here

core_private_1.reflector.reflectionCapabilities = new core_private_1.ReflectionCapabilities();

我想这与我的 webpack 构建/依赖项有关

这是我的 webpack 配置文件，我使用的是我正在查看的教程

/// <binding BeforeBuild='Run - Development' />
// An attempt at a very simple webpack config file that shows
//  the minimum required to "compile" an angular app using
//  Sass (with view encapsulation), and external HTML templates
//
var autoprefixer = require("autoprefixer");

module.exports = {
    // Define the entry points for our application so webpack knows what to 
    //  use as inputs
    //
    entry: {
        app: ["./App/main"]
    },

    // Define where the resulting file should go
    //
    output: {
        filename: "content/[name].bundle.js"
    },

    // Define the extensions that we want webpack to resolve (we need to 
    //  override the default to ensure .ts files are included)
    //
    resolve: {
        extensions: ["", ".ts", ".js"]
    },

    // Turn on source maps for all applicable files.
    //
    devtool: "source-map",

    module: {
        loaders: [
            // Process any typescript or typescript-jsx files using the ts-loader
            //
            {
                test: /\.tsx?$/,
                loaders: ["ts-loader"]
            },

            // Process Sass files using the sass-loader first, and then with postcss,
            //  and finally with the raw-loader so we can convert the result into a 
            //  string and inject them into the 'styles' property of components (to 
            //  take advantage of view encapsulation)
            //
            {
                test: /\.scss$/,
                exclude: /node_modules/,
                loaders: ["raw-loader", "postcss-loader", "sass-loader"]
            },

            // Load any HTML files into raw strings so they can be included with
            //  the angular components in-line
            //
            {
                test: /\.html$/,
                loaders: ["html-loader"]
            }
        ]
    },

    // Configure postcss to run the autoprefixer plugin
    //
    postcss: function () {
        return [autoprefixer];
    }
}

和package.json文件

{
  "name": "app",
  "version": "1.0.0",
  "main": "index.js",
  "dependencies": {
    "@angular/common": "^2.0.0-rc.1",
    "@angular/compiler": "^2.0.0-rc.1",
    "@angular/core": "2.0.0-rc.1",
    "@angular/http": "2.0.0-rc.1",
    "@angular/platform-browser": "^2.0.0-rc.1",
    "@angular/platform-browser-dynamic": "^2.0.0-rc.1",
    "es6-shim": "^0.35.1",
    "reflect-metadata": "^0.1.2",
    "rxjs": "5.0.0-beta.6",

  },
  "devDependencies": {
    "autoprefixer": "^6.3.6",
    "html-loader": "^0.4.3",
    "node-sass": "^3.7.0",
    "postcss-loader": "^0.9.1",
    "raw-loader": "^0.5.1",
    "sass-loader": "^3.2.0",
    "ts-loader": "^0.8.2",
    "typescript": "^1.8.10",
    "webpack": "^1.13.1"
  },
  "scripts": {
    "build": "typings install && webpack",
    "build-watch": "typings install && webpack --watch",
    "test": "echo \"Error: no test specified\" && exit 1"
  }
}

关于我做错了什么有什么想法吗？

Answer 1

通过从 rc.1 升级到 rc.2 修复了这个问题，这给了我一个不同的错误:

Uncaught EXCEPTION: Error during instantiation of NgZone! (ApplicationRef -> ApplicationRef_ -> NgZone).

然后我通过在 main.ts 顶部添加 import "zone.js"; 来修复该问题，这不是最好的解决方案，但看起来现在可以使用