Ошибка при создании экземпляра LocationStrategy в Angular2

Я разрабатываю приложение в angular-2, в котором у меня есть индексная страница, которая будет загружать мой компонент приложения. Компонент приложения содержит маршрутизацию для загрузки домой или входа в систему.

вот мой index.html

<!doctype HTML>
<html>

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
    <script src="/angular2/bundles/angular2-polyfills.js"></script>
    <script src="/systemjs/dist/system.src.js"></script>
    <script src="/rxjs/bundles/Rx.js"></script>
    <script src="/angular2/bundles/angular2.dev.js"></script>
    <script src="/angular2/bundles/upgrade.dev.js"></script>
    <style>
       *{
            border-radius: 0px !important;
        }
    </style>
</head>

<body>
    <div class="container">
      <app>Loading......</app>
    </div>
    <script>
       System.config({
            defaultJSExtensions: true,
        packages: {        
          app: {
            defaultExtension: 'js'
          }
        },
        paths: {
            'angular2/upgrade': '../node_modules/angular2/upgrade'
          }

      });
        System.import('scripts/src/bootstrap');
    </script>
</body>

</html>

вот мой bootstrap.ts

//import {bootstrap} from 'angular2/angular2';
///<reference path="../node_modules/angular2/typings/node/node.d.ts" />
import {UpgradeAdapter} from 'angular2/upgrade';
import {bootstrap} from 'angular2/platform/browser';
import {ROUTER_PROVIDERS} from 'angular2/router';
import {HTTP_PROVIDERS} from 'angular2/http';


import {App} from './components/app/app';
import {LoginService} from './services/loginService';
import {HttpService} from './services/httpServices';

bootstrap(App, [HTTP_PROVIDERS, ROUTER_PROVIDERS, LoginService, HttpService]);

вот мой app.ts

import {Component, View, Inject} from 'angular2/core';
import {Router, RouteConfig, RouterLink, RouterOutlet,  ROUTER_PROVIDERS} from 'angular2/router';


import {HomeComponent} from '../home/home';
import {LoginComponent} from '../login/login';

@Component({
    selector: 'app',
})
@View({
    templateUrl: '/scripts/src/components/app/app.html',
    directives: [RouterLink, RouterOutlet]
})
export class App {
    constructor( @Inject(Router) router: Router) {
        router.config([
            { path: '', as: 'home', component: HomeComponent },
            { path: '/login', as: 'login', component: LoginComponent }
        ]);
    }
}

которые загружают мой другой компонент, но когда я запускаю свое приложение, я получаю ошибку.

введите здесь описание изображения

пожалуйста, поправьте меня, что мне здесь не хватает.


angular angular2-routing angular2-services
person Rhushikesh    schedule 11.01.2016    source источник
comment
См. stackoverflow. ком/вопросы/34535163/   -  person Günter Zöchbauer    schedule 11.01.2016

Ответы (1)


arrow_upward
4
arrow_downward

обновление (последняя версия 2.0.0)

@NgModule({
  providers [
    RouterModule.forRoot(myRoutes), 
    { provide: APP_BASE_HREF, useValue : 'path'}
  ],
  bootstrap: [AppComponent]
]);

исходный

https://angular.io/docs/ts/latest/guide/router.html

Добавьте базовый элемент сразу после тега <head>. Если папка app является корнем приложения, как для нашего приложения, установите значение href точно, как показано здесь.

<base href="/">

В качестве альтернативы добавьте

bootstrap(AppComponent, [
  ROUTER_PROVIDERS, 
  provide(APP_BASE_HREF, {useValue : 'path'})
]);

в вашем бутстрапе.

person Günter Zöchbauer    schedule 11.01.2016
comment
Зачем тебе это нужно - person dopatraman; 05.08.2016
comment
Это используется маршрутизатором и модулем HTTP для расчета полного URL-адреса. Он настраивает часть исправления URL-адреса. Я сам не знаю всех подробностей. - person Günter Zöchbauer; 05.08.2016