Angular 2ルーターのベースhrefが設定されていません

195

エラーが発生し、その理由がわかりません。ここにエラーがあります：

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 {
}
routing  angular 
— ジェイソンスピック
ソース

回答:

376

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

<head>タグの直後にベース要素を追加します。appフォルダーがアプリケーションのルートである場合、アプリケーションの場合と同様に、ここに示すように正確にhref値を設定します。

<base href="https://stackoverflow.com/">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';

LocationおよびHashLocationStrategyも参照してください。

— ギュンター・ツェヒバウアー
ソース
3
2番目の方法の小さな例：bootstrap(AppComponent, [ROUTER_PROVIDERS, provide(APP_BASE_HREF, {useValue : '/'})]);
— malloc4k
1
import {provide} from 'angular2/core';提供を使用できるようにするには、インポート行を追加する必要がありました。
— CorayThan
2
私はラインをインポートしなければなりimport {APP_BASE_HREF} from 'angular2/router';
— ませんでした
アップデートありがとうございます。私自身はTSを使用せず（ダートのみ）、TSの知識はまだ限られています。
— ギュンターZöchbauer
1
私のプロジェクトには、画像パターンで満たされたSVG要素があります。ときの画像は、Firefoxで表示されなかった<base href="https://stackoverflow.com/" />ファイルに設定された（のために"/"、"./"、"#"またはその他のベースパス、画像パス自体がパターンで指定されたかに関係なく）。最終的に機能した唯一の解決策は、APP_BASE_HREF代わりに使用することでした。本当の命の恩人！
— ConnorsFan 2017年
34

Angular4とJasmineの単体テストでも同様の問題に直面していました。以下の与えられた解決策は私のために働きました

インポートステートメントの下に追加

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

TestBed構成について以下のステートメントを追加します。

TestBed.configureTestingModule({
    providers: [
        { provide: APP_BASE_HREF, useValue : '/' }
    ]
})
— ディリップ・ナンナウェア
ソース
11

次をapp.module.tsに含めることで、ハッシュベースのナビゲーションを使用することもできます

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

以下を@NgModule（{...}）に追加する

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

TypeScriptによるAngular 2開発

「HashLocationStrategy-ハッシュ記号（＃）がURLに追加され、ハッシュの後のURLセグメントは、Webページフラグメントとして使用されるルートを一意に識別します。この戦略は、古いブラウザを含むすべてのブラウザで機能します。」

抜粋：Yakov Fain Anton Moiseev。「TypeScriptを使用したAngular 2開発。」

— ライオネル・モリソン
ソース
ライオネル、ありがとう！これは優れており、上記のAPP_BASE_HREFソリューションを使用していた "product /：id"などのURLパラメータを使用すると失敗する問題を解決しました。ありがとう！
— Stokely
8

2.0ベータ以降:)

import { APP_BASE_HREF } from 'angular2/platform/common';
— ファイアアクス
ソース
Rc6の時点で、これはすべてプロバイダーにあります。angular.io
— Mark Kenny
1
これは、Karmaの仕様がエラーで失敗したときに役立ちました。ベースhrefが設定されていません。APP_BASE_HREFトークンの値を指定するか、ドキュメントに基本要素を追加してください。
— 同盟
6

index.htmlヘッドタグのコードの下に追加するだけです。

   <html>
    <head>
     <base href="https://stackoverflow.com/">
      ...

それは私にとって魅力のように働きました。

— ナラムキラン
ソース
5

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

— スレッシュ・カムルシ
ソース
useValueが '/ my / app'である必要があるのはなぜですか？
— Dilip Nannaware
5

Angular 7,8の修正はapp.module.tsにあります 

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

@NgModule内部に追加

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

— 風水張
ソース
Angular Story Bookのコンポーネントをロードしようとしたときに、このエラーに直面しました。このコンポーネントにはルーター依存関係がありました。エラーを解決しました!!
— Arpan Banerjee
1

index.htmlを確認してください。次の部分を誤って取り外してしまった場合は、それを含めてください。

<base href="https://stackoverflow.com/">

<meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
— タデレ・アイレグン
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.