2016-01-11 4 views
2

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

вот мой 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 } 
     ]); 
    } 
} 

нагружающие мой другой компонент, но когда я запускаю приложение givin g me ошибка.

enter image description here

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

+0

См http://stackoverflow.com/questions/34535163/angular-2-router-no-base-href-set/34535256#34535256 –

ответ

4

обновление (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'}) 
]); 

в вашем загрузчике.

+2

свою работу для меня – Rhushikesh

+0

Зачем вам нужен этот – dopatraman

+0

Это используется маршрутизатор и модуль Http для вычисления полного URL-адреса. Он настраивает, какая часть исправления URL-адреса. Я сам не знаю подробностей. –

Смежные вопросы