เราเตอร์เชิงมุม 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 เบต้า

นี่คือรหัสของฉัน:

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

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

เพิ่มองค์ประกอบพื้นฐานหลัง<head>แท็ก หากappโฟลเดอร์รากโปรแกรมที่มันเป็นสำหรับโปรแกรมของเราตั้งhrefค่าตรงตามที่แสดงไว้ที่นี่

The <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';

ดูเพิ่มเติมที่ตั้งและ HashLocationStrategy หยุดทำงานในรุ่นเบต้า 16

ฉันประสบปัญหาคล้ายกันกับการทดสอบหน่วย Angular4 และจัสมิน; วิธีการแก้ปัญหาด้านล่างที่ได้รับสำหรับฉัน

เพิ่มคำสั่งนำเข้าด้านล่าง

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

เพิ่มคำสั่งด้านล่างสำหรับการกำหนดค่า TestBed:

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

คุณยังสามารถใช้การนำทางแบบแฮชได้โดยรวมสิ่งต่อไปนี้ไว้ใน app.module.ts

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

และโดยการเพิ่มสิ่งต่อไปนี้ใน @NgModule ({... })

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

“ HashLocationStrategy - มีการเพิ่มเครื่องหมายแฮช (#) ลงใน URL และส่วน URL หลังจากแฮชระบุเส้นทางที่จะใช้เป็นส่วนย่อยของหน้าเว็บโดยไม่ซ้ำกัน กลยุทธ์นี้ใช้ได้กับเบราว์เซอร์ทั้งหมดรวมถึงเบราว์เซอร์เก่า”

ตัดตอนมาจาก: Yakov Fain Anton Moiseev “ การพัฒนา Angular 2 ด้วย TypeScript”

ตั้งแต่ 2.0 beta :)

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

มันเป็นเพียงการเพิ่มรหัสด้านล่างใน index.html แท็กหัว

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

ที่ได้ผลเหมือนมนต์เสน่ห์สำหรับฉัน

ด้วย angular 4 คุณสามารถแก้ไขปัญหานี้ได้โดยอัปเดตไฟล์app.module.tsดังนี้

เพิ่มคำสั่งการนำเข้าที่ด้านบนดังนี้:

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

และเพิ่มบรรทัดด้านล่างภายใน @NgModule

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

Reff: https://angular.io/api/common/APP_BASE_HREF

การแก้ไขเชิงมุม 7,8 อยู่ใน app.module.ts

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

ภายใน @NgModule เพิ่ม

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

ตรวจสอบ 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">