Toxicable Toxicable - 5 months ago 12
Javascript Question

'reflectionCapabilities' of undefined Angular 2

Hey so im just starting out with Angular 2 using webpack and im getting this error when trying to start the app up


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();


I guess it's something to do with my webpack build/dependancies

so here's my webpack config file which im using from a tutorial I was looking at

/// <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];
}
}


And package.json file

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


Any ideas on what im doing wrong?

Answer

I happened to write that tutorial and I found the issue after seeing your reddit comment. I'm sorry you had to find this, but I'm glad you did because I learned something to watch out for :)

The issue is in the angular versions used in the package.json. If you look closely you'll see some are fixed at the rc1 version, but others (incorrectly) use the ^ version which allowed them to install the rc2 version:

"dependencies": {
    "@angular/common": "^2.0.0-rc.1",     <-- results in RC2 now
    "@angular/compiler": "^2.0.0-rc.1",   <-- results in RC2 now
    "@angular/core": "2.0.0-rc.1",
    "@angular/http": "2.0.0-rc.1",
    "@angular/platform-browser": "^2.0.0-rc.1",   <-- results in RC2 now
    "@angular/platform-browser-dynamic": "^2.0.0-rc.1",   <-- results in RC2 now
    "es6-shim": "^0.35.1",
    "reflect-metadata": "^0.1.2",
    "rxjs": "5.0.0-beta.6",
}

As you said upgrading to RC2 worked because this brought all the versions back in sync. RC2 didn't exist at the time I wrote that code sample, so I never hit this issue, but now I know to look for it.