Search code examples
angularpolyfills

Angular2 updating from beta15 to beta16


After editing my package.json and running npm install, I get this error when I try to run my app in the browser:

angular2-polyfills.min.js:1 Unhandled Promise rejection: Error: Trying to create a class provider but "undefined" is not a class!
        at new BaseException (http://localhost:3000/angular2/src/facade/exceptions.js:17:23)
        at ProviderBuilder.toClass (http://localhost:3000/angular2/src/core/di/provider.js:197:19)
        at Object.eval (http://localhost:3000/js/app.js:62:44)
        at eval (http://localhost:3000/js/app.js:67:4)
    Evaluating http://localhost:3000/js/app.js
    Error loading http://localhost:3000/js/app.js ; Zone: <root> ; Task: Promise.then ; Value: Error: Error: Trying to create a class provider but "undefined" is not a class!(…)

I am a bit lost on where to look for my error. I am very grateful for your help in pointing me in the right direction.

code per request in comments:

(function(require, exports, module, __filename, __dirname, global, GLOBAL) {'use strict';"use strict";
var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var base_wrapped_exception_1 = require('./base_wrapped_exception');
var exception_handler_1 = require('./exception_handler');
var exception_handler_2 = require('./exception_handler');
exports.ExceptionHandler = exception_handler_2.ExceptionHandler;
var BaseException = (function (_super) {
    __extends(BaseException, _super);
    function BaseException(message) {
        if (message === void 0) { message = "--"; }
        _super.call(this, message);
        this.message = message;
        this.stack = (new Error(message)).stack;
    }
    BaseException.prototype.toString = function () { return this.message; };
    return BaseException;
}(Error));
exports.BaseException = BaseException;

second edit:

{
  "name": "angular2-express-starter",
  "version": "1.0.0",
  "description": "Starter application of Angular2 on Express",
  "main": "gulpfile.js",
  "private": true,
  "scripts": {
    "watch": "gulp watch",
    "start": "node ./server/bin/www",
    "postinstall": "gulp"
  },
  "author": "Benjamin McFerren",
  "license": "",
  "dependencies": {
    "angular2": "2.0.0-beta.17",
    "body-parser": "~1.13.2",
    "cookie-parser": "~1.3.5",
    "del": "^2.2.0",
    "es6-promise": "^3.1.2",
    "es6-shim": "^0.35.0",
    "express": "^4.13.4",
    "gulp": "^3.9.1",
    "gulp-sourcemaps": "^1.6.0",
    "gulp-tslint": "^3.6.0",
    "gulp-typescript": "^2.11.0",
    "jsonwebtoken": "^5.5.4",
    "morgan": "~1.6.1",
    "ng-semantic": "^1.0.15",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.6",
    "serve-favicon": "~2.3.0",
    "systemjs": "^0.19.20",
    "zone.js": "0.6.12"
  },
  "devDependencies": {
    "underscore": "^1.8.3"
  }

}

edit three:

app.ts

import { Component, View, bind } from "angular2/core";
import { HTTP_PROVIDERS } from "angular2/http";
import { bootstrap } from "angular2/platform/browser";
import { ROUTER_PROVIDERS, RouterOutlet, LocationStrategy, RouteConfig, HashLocationStrategy } from "angular2/router";

import { Container } from "./components/container/container";

import {DATA_BINDINGS} from "./service/dataservice";
import ...
...

@Component({
    selector: "app",
    directives: [RouterOutlet],
    template: `<router-outlet></router-outlet>`
})
@RouteConfig([
    { component: Container, path: "/" },
    ...
])


bootstrap(AppComponent, [
    ROUTER_PROVIDERS,
    // [HTTP_PROVIDERS, provide(RequestOptions, {useClass: MyOptions})],
    HTTP_PROVIDERS,
    DATA_BINDINGS,
    ...
    bind(LocationStrategy).toClass(HashLocationStrategy)
]);

dataservice.ts

import {Injectable, EventEmitter} from "angular2/core";
import {Http} from "angular2/http";
import {Location} from "angular2/router";
import {Observable} from "rxjs/Observable";
import "rxjs/Rx";

...


@Injectable()
export class DataService {

    result: Object;
    error: Object;
    http: Http;
    items: Array<any>;
    ...

    constructor(http: Http,
                location: Location,
                public ...,
                ...) {

         ...


    }
     ...
}

export var DATA_BINDINGS: Array<any> = [
    DataService
];

Solution

  • Location-related bits were moved

    import {  
      PlatformLocation,  
      Location,  
      LocationStrategy,  
      HashLocationStrategy,  
      PathLocationStrategy,  
      APP_BASE_HREF}  
    from 'angular2/platform/common'
    

    See also Location and HashLocationStrategy stopped working in beta.16