【问题标题】:Error location.createComponent is not a function since Angular2 beta 17 [duplicate]自Angular2 beta 17以来,错误location.createComponent不是一个函数[重复]
【发布时间】:2016-08-27 03:47:25
【问题描述】:

我已经升级到 Angular2 beta17,从这个版本开始出现以下错误:location.createComponent is not a function 错误。这个 SO question "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() {}
}

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

【问题讨论】:

  • 为什么你认为它是一样的。似乎您收到了不同的错误消息。您是否在代码中的某处使用了createComponent
  • 你的问题似乎与github issue有关
  • @GünterZöchbauer 不,我不会在任何地方使用 createComponent
  • @PankajParkar 问题解决了!你想写一个答案,我会把它标记为正确吗?
  • 当然,我会在一两个小时内完成。谢谢 ;)

标签: angular


【解决方案1】:

一些类从路由器转移到通用:

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';

【讨论】:

    猜你喜欢
    • 2016-10-20
    • 2016-05-01
    • 2017-05-20
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-06-20
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多