错误location.createComponent自Angular2 beta 17以来不是一个函数

时间:2016-05-02 11:32:16

标签: angular

我已升级到Angular2 beta17,从此版本开始,我遇到以下错误:location.createComponent is not a function错误。这个问题" Location and HashLocationStrategy stopped working in beta.16"是完全相同的,但我做了它所说的(见下面的代码),我仍然有同样的错误。

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

这是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() {}
}

如果您有任何线索,我将不胜感激!

1 个答案:

答案 0 :(得分:0)

某些类从路由器转移到公共端:

在beta.16之前和之后

: 之前:

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

后:

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