Error location.createComponent is not a function since Angular2 beta 17

Question

I've upgraded to Angular2 beta17, and since this version I have the following error: location.createComponent is not a function error. This SO question "Location and HashLocationStrategy stopped working in beta.16" is exactly the same, but I did what it said (see code below), and I still have the same error.

///<reference path="../node_modules/angular2/typings/browser.d.ts"/>
// https://github.com/angular/angular/issues/4902

import {bootstrap} from 'angular2/platform/browser';
import {ROUTER_PROVIDERS} from 'angular2/router';
import {AppComponent} from './app.component';

import {provide} from 'angular2/core';
import {LocationStrategy, HashLocationStrategy} from 'angular2/platform/common';

bootstrap(AppComponent, [
  ROUTER_PROVIDERS,
  provide(LocationStrategy,
         {useClass: HashLocationStrategy})
]);

And here's the app.component.ts

import {Component, provide} from 'angular2/core';
import {ROUTER_PROVIDERS, RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
// import {LocationStrategy, HashLocationStrategy} from 'angular2/platform/common';
import {HTTP_PROVIDERS} from 'angular2/http';

import {ApiService} from './services/api/api.service';
import {AlertService} from './services/alert/alert.service';
import {AuthService} from './services/auth/auth.service';
import {NavbarService} from './services/navbar/navbar.service';

import {LoggedInRouterOutlet} from './directives/router-outlet'

import {HomeComponent} from './components/pages/home/home.component';
import {LoginComponent} from './components/login/login.component';
import {AlertContainerComponent} from './components/alert-container/alert-container.component'

import {OrdersListComponent} from './components/pages/orders/shared/list/orders-list.component';
import {OrdersDetailsComponent} from './components/pages/orders/shared/details/orders-details.component';

import {CustomersComponent} from './components/pages/customers/customers.component';
import {CustomerDetailedPageComponent} from './components/pages/customers/detailed-page/customer-detailed-page.component';

import {ShopsComponent} from './components/pages/shops/shops.component';
import {ShopDetailsComponent} from './components/pages/shops/details/shop-details.component';

import {MailTemplateComponent} from "./components/pages/settings/mail-template/mail-template.component";
import {AlertComponent} from "./components/pages/settings/alert/alert.component";

import {NavbarComponent} from './components/menu/navbar/navbar.component';

@Component({
    selector: 'main',
    template:`
        <navbar>Loading navbar...</navbar>
        <div class="content-wrapper">
            <alert-container id="alert-container"></alert-container>
            <router-outlet></router-outlet>
        </div>
    `,
    directives: [
        LoggedInRouterOutlet,
        HomeComponent,
        LoginComponent,
        AlertContainerComponent,
        OrdersListComponent,
        OrdersDetailsComponent,
        CustomersComponent,
        CustomerDetailedPageComponent,
        ShopsComponent,
        ShopDetailsComponent,
        MailTemplateComponent,
        AlertComponent,
        NavbarComponent],
    providers: [
        //ROUTER_PROVIDERS,
        //provide(LocationStrategy, {useClass: HashLocationStrategy}),
        HTTP_PROVIDERS,
        ApiService,
        AlertService,
        AuthService,
        NavbarService]
})

@RouteConfig([
    {path:'/',                              name: 'Home',                        component: HomeComponent,                        useAsDefault: true},
    {path:'/login',                         name: 'Login',                       component: LoginComponent },
    {path:'/orders/:state',                 name: 'OrdersList',                  component: OrdersListComponent },
    {path:'/order/:id',                     name: 'OrdersDetails',               component: OrdersDetailsComponent},
    {path:'/customer',                      name: 'Customers',                   component: CustomersComponent},
    {path:'/customer/:id',                  name: 'CustomerDetails',             component: CustomerDetailedPageComponent},
    {path:'/shop',                          name: 'Shops',                       component: ShopsComponent},
    {path:'/shop/:id',                      name: 'ShopDetails',                 component: ShopDetailsComponent},
    {path:'/settings/mail_templates',       name: 'MailTemplates',               component: MailTemplateComponent},
    {path:'/settings/alerts',               name: 'Alerts',                      component: AlertComponent }
])

export class AppComponent {
    constructor() {}
}

If you have any clue I'll be grateful!

Why do you think it's the same. Seems you got a different error message. Do you use `createComponent` somewhere in your code? — Günter Zöchbauer, May 02 '16 at 11:39
You question seems related to this [github issue](https://github.com/angular/angular/issues/8238) — Pankaj Parkar, May 02 '16 at 11:43
@PankajParkar That's solved the issue! Do you want to write an answer and I'll mark it as correct? — jeanpaul62, May 02 '16 at 11:56
http://stackoverflow.com/questions/36861628/location-and-hashlocationstrategy-stopped-working-in-beta-16 — Günter Zöchbauer, May 02 '16 at 17:17

score 0 · Answer 1 · answered May 02 '16 at 17:15

some classes moved from router to common:

before and after beta.16: before:

import {
  PlatformLocation,
  Location,
  LocationStrategy,
  HashLocationStrategy,
  PathLocationStrategy,
  APP_BASE_HREF}
from 'angular2/router';

After:

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

Error location.createComponent is not a function since Angular2 beta 17

1 Answers1