Angular 2 маршрутизатора без базового набора href

Я получаю сообщение об ошибке и не могу найти причину. Вот ошибка:

EXCEPTION: Error during instantiation of LocationStrategy! (RouterOutlet -> Router -> Location -> LocationStrategy).
    angular2.dev.js:23514 EXCEPTION: Error during instantiation of LocationStrategy! (RouterOutlet -> Router -> Location -> LocationStrategy).BrowserDomAdapter.logError @ angular2.dev.js:23514BrowserDomAdapter.logGroup @ angular2.dev.js:23525ExceptionHandler.call @ angular2.dev.js:1145(anonymous function) @ angular2.dev.js:14801NgZone._notifyOnError @ angular2.dev.js:5796collection_1.StringMapWrapper.merge.onError @ angular2.dev.js:5700run @ angular2-polyfills.js:141(anonymous function) @ angular2.dev.js:5719zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:1511lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:1523lib$es6$promise$$internal$$publish @ angular2-polyfills.js:1494(anonymous function) @ angular2-polyfills.js:243microtask @ angular2.dev.js:5751run @ angular2-polyfills.js:138(anonymous function) @ angular2.dev.js:5719zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$asap$$flush @ angular2-polyfills.js:1305
    angular2.dev.js:23514 ORIGINAL EXCEPTION: No base href set. Please provide a value for the APP_BASE_HREF token or add a base element to the document.BrowserDomAdapter.logError @ angular2.dev.js:23514ExceptionHandler.call @ angular2.dev.js:1154(anonymous function) @ angular2.dev.js:14801NgZone._notifyOnError @ angular2.dev.js:5796collection_1.StringMapWrapper.merge.onError @ angular2.dev.js:5700run @ angular2-polyfills.js:141(anonymous function) @ angular2.dev.js:5719zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:1511lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:1523lib$es6$promise$$internal$$publish @ angular2-polyfills.js:1494(anonymous function) @ angular2-polyfills.js:243microtask @ angular2.dev.js:5751run @ angular2-polyfills.js:138(anonymous function) @ angular2.dev.js:5719zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$asap$$flush @ angular2-polyfills.js:1305
    angular2.dev.js:23514 ORIGINAL STACKTRACE:BrowserDomAdapter.logError @ angular2.dev.js:23514ExceptionHandler.call @ angular2.dev.js:1157(anonymous function) @ angular2.dev.js:14801NgZone._notifyOnError @ angular2.dev.js:5796collection_1.StringMapWrapper.merge.onError @ angular2.dev.js:5700run @ angular2-polyfills.js:141(anonymous function) @ angular2.dev.js:5719zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:1511lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:1523lib$es6$promise$$internal$$publish @ angular2-polyfills.js:1494(anonymous function) @ angular2-polyfills.js:243microtask @ angular2.dev.js:5751run @ angular2-polyfills.js:138(anonymous function) @ angular2.dev.js:5719zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$asap$$flush @ angular2-polyfills.js:1305
    angular2.dev.js:23514 Error: No base href set. Please provide a value for the APP_BASE_HREF token or add a base element to the document.
        at new BaseException (angular2.dev.js:8080)
        at new PathLocationStrategy (router.dev.js:1203)
        at angular2.dev.js:1380
        at Injector._instantiate (angular2.dev.js:11923)
        at Injector._instantiateProvider (angular2.dev.js:11859)
        at Injector._new (angular2.dev.js:11849)
        at InjectorDynamicStrategy.getObjByKeyId (angular2.dev.js:11733)
        at Injector._getByKeyDefault (angular2.dev.js:12048)
        at Injector._getByKey (angular2.dev.js:12002)
        at Injector._getByDependency (angular2.dev.js:11990)

Кто-нибудь знает, почему маршрутизатор бросает это? Я использую angular2 beta​​p >

вот мой код:

import {Component} from 'angular2/core';
import { RouteConfig, ROUTER_DIRECTIVES } from 'angular2/router';
import {LoginComponent} from './pages/login/login.component';
import {DashboardComponent} from './pages/dashboard/dashboard.component';
@Component({
    selector: 'app',
    directives:[ROUTER_DIRECTIVES],
    template:`
        <div class="wrapper">
            <router-outlet></router-outlet>
        </div>`
})
@RouteConfig([
    { path: '/',redirectTo: '/dashboard' },
    { path: '/login',name:'login',component: LoginComponent },
    { path: '/dashboard',name:'dashboard',component: DashboardComponent,}
])
export class AppComponent {
}

Ответы

Ответ 1

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

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

<base href="/"> сообщает маршрутизатору Angular, что является статической частью URL. Затем маршрутизатор изменяет только оставшуюся часть URL-адреса.

<head>
  <base href="/">
  ...
</head>

Альтернативно добавьте

= Angular2 RC.6

import {APP_BASE_HREF} from '@angular/common';

@NgModule({
  declarations: [AppComponent],
  imports: [routing /* or RouterModule */], 
  providers: [{provide: APP_BASE_HREF, useValue : '/' }]
]);

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

В старых версиях импорт должен был быть как

< Angular2 RC.6

import {APP_BASE_HREF} from '@angular/common';
bootstrap(AppComponent, [
  ROUTER_PROVIDERS, 
  {provide: APP_BASE_HREF, useValue : '/' });
]);

< Rc.0

import {provide} from 'angular2/core';
bootstrap(AppComponent, [
  ROUTER_PROVIDERS, 
  provide(APP_BASE_HREF, {useValue : '/' });
]);

< beta.17

import {APP_BASE_HREF} from 'angular2/router';

= beta.17

import {APP_BASE_HREF} from 'angular2/platform/common';

См. также Местоположение и HashLocationStrategy перестали работать в бета-версии 16

Ответ 2

Я столкнулся с аналогичной проблемой с модульными испытаниями Angular4 и Jasmine; ниже данного решения работало для меня

Добавьте описание импорта

import { APP_BASE_HREF } from '@angular/common';

Добавить инструкцию для конфигурации TestBed:

TestBed.configureTestingModule({
    providers: [
        { provide: APP_BASE_HREF, useValue : '/' }
    ]
})

Ответ 3

Вы также можете использовать навигацию на основе хэшей, включив в app.module.ts следующее:

import { LocationStrategy, HashLocationStrategy } from '@angular/common';

и добавив следующее к @NgModule ({...})

@NgModule({
  ...
  providers:    [
      ProductService, {
          provide: LocationStrategy, useClass: HashLocationStrategy
      }
  ],
  ...
})

Angular 2 Разработка с помощью TypeScript

"HashLocationStrategy-Хэш-знак (#) добавляется в URL-адрес, а сегмент URL-адреса после хеша однозначно идентифицирует маршрут, который будет использоваться в качестве фрагмента веб-страницы. Эта стратегия работает со всеми браузерами, включая старые."

Отрывок из: Яков Файн Антон Моисеев. "Angular 2 Разработка с помощью TypeScript".

Ответ 4

Так как 2.0 beta:)

import { APP_BASE_HREF } from 'angular2/platform/common';

Ответ 5

В angular 4 вы можете решить эту проблему, обновив файл app.module.ts следующим образом:

Добавьте оператор импорта вверху, как показано ниже:

import {APP_BASE_HREF} from '@angular/common';

И добавьте @NgModule строку внутри @NgModule

providers: [{provide: APP_BASE_HREF, useValue: '/my/app'}]

Рефф: https://angular.io/api/common/APP_BASE_HREF

Ответ 6

просто добавьте приведенный ниже код в тег head index.html

   <html>
    <head>
     <base href="/">
      ...

это сработало как очарование для меня.

Ответ 7

Проверьте ваш index.html. Если вы случайно удалили следующую часть, включите ее, и все будет хорошо

<base href="/">

<meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">

Ответ 8

APP_BASE_HREF действительно великолепен

Я пытаюсь сделать то же самое, но динамически, чтобы получить доступ к версионному приложению на стороне сервера (у меня есть папка для версии (v0.0, v0.1... v1.3...))

В index.html:

<script type='text/javascript'>
    let firstPathname = window.location.pathname.split('/')[1]
    console.log(firstPathname)

    let regexVersioningTag = new RegExp("^v");
    let result = regexVersioningTag.test(firstPathname);
    // if there is a version number
    if(result){ window['_app_base_href'] = '/' + firstPathname; }
</script>

И в app.module

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    IonicModule.forRoot(),
    IonicStorageModule.forRoot(),
    AppRoutingModule,
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    { provide: APP_BASE_HREF, useValue: window['_app_base_href'] || '/' }
  ],
  bootstrap: [AppComponent],
  schemas: [NO_ERRORS_SCHEMA]
})

Базовый тег работает, но это не приложение 2.8, которое я вижу...