Угловой маршрутизатор 2 без базового набора

Question

Угловой маршрутизатор 2 без базового набора

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

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 бета

вот мой код:

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 {
}

229

angular routes routing href

Источник

user752447 30 дек '15 в 18:34

6 ответов

Решение

Я сталкивался с подобной проблемой в модульных тестах Angular4 и Jasmine; ниже данное решение работало на меня
Добавить ниже заявление на импорт
import { APP_BASE_HREF } from '@angular/common';
Добавьте ниже заявление для конфигурации TestBed:
TestBed.configureTestingModule({ providers: [ { provide: APP_BASE_HREF, useValue : '/' } ] })

38

Источник Поделиться

user3926504 20 сен '17 в 17:49 2017-09-20 17:49

2017-09-20 17:49

Исправление Angular 7,8 находится в app.module.ts
import {APP_BASE_HREF} from '@angular/common';
внутри @NgModule добавить
providers: [{provide: APP_BASE_HREF, useValue: '/'}]

16

Источник Поделиться

user2208909 24 янв '20 в 17:50 2020-01-24 17:50

2020-01-24 17:50

Вы также можете использовать навигацию на основе хеша, включив в app.module.ts следующее
import { LocationStrategy, HashLocationStrategy } from '@angular/common';
и добавив следующее в @NgModule({ ... })
@NgModule({ ... providers: [ ProductService, { provide: LocationStrategy, useClass: HashLocationStrategy } ], ... })

"HashLocationStrategy - к URL добавляется знак хеша (#), а сегмент URL после хеша однозначно определяет маршрут, который будет использоваться в качестве фрагмента веб-страницы. Эта стратегия работает со всеми браузерами, включая старые ".
Выдержка из: Яков Файн, Антон Моисеев. "Разработка Angular 2 с использованием TypeScript."

12

Источник Поделиться

user1229520 21 фев '17 в 01:10 2017-02-21 01:10

2017-02-21 01:10

С 2.0 бета:)
import { APP_BASE_HREF } from 'angular2/platform/common';

8

Источник Поделиться

user3532083 12 май '16 в 13:23 2016-05-12 13:23

2016-05-12 13:23

Просто добавьте приведенный ниже код в тег head index.html
<html> <head> <base href="/"> ...
это сработало как очарование для меня.

7

Источник Поделиться

user6223106 12 мар '18 в 03:20 2018-03-12 03:20

2018-03-12 03:20

В angular 4 вы можете решить эту проблему, обновив файл app.module.ts следующим образом:
Добавьте оператор импорта вверху, как показано ниже:
import {APP_BASE_HREF} from '@angular/common';
И добавьте ниже строку внутри @NgModule
providers: [{provide: APP_BASE_HREF, useValue: '/my/app'}]
Рефф: https://angular.io/api/common/APP_BASE_HREF

6

Источник Поделиться

user1900692 02 фев '18 в 12:20 2018-02-02 12:20

2018-02-02 12:20

Проверьте ваш index.html. Если вы случайно удалили следующую часть, включите ее, и все будет хорошо
<base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico">

2

Источник Поделиться

user3738831 25 фев '19 в 07:09 2019-02-25 07:09

2019-02-25 07:09

Другие вопросы по тегам angular routes routing href

user217408 30 дек '15 в 18:40 2015-12-30 18:40 · Accepted Answer · 2015-12-30 18:40

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

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

<base href="/"> сообщает Angular router, что является статической частью 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 : '/' }]
]);

в твоей начальной загрузке.

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

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

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

import {APP_BASE_HREF} from 'angular2/router';

> = бета.17

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

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