Bộ định tuyến góc 2 không có bộ cơ sở

195

Tôi đang nhận được một lỗi và không thể tìm thấy lý do tại sao. Đây là lỗi:

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)

Có ai biết tại sao các bộ định tuyến đang ném này? Tôi đang sử dụng angular2 beta

đây là mã của tôi:

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 
— Jason Spick
nguồn

Câu trả lời:

376

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

Thêm phần tử cơ sở ngay sau <head>thẻ. Nếu appthư mục là root ứng dụng, vì nó dành cho ứng dụng của chúng tôi, hãy đặt hrefgiá trị chính xác như hiển thị ở đây.

Nó <base href="https://stackoverflow.com/">cho bộ định tuyến Angular phần tĩnh của URL là gì. Sau đó, bộ định tuyến chỉ sửa đổi phần còn lại của URL.

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

Hoặc thêm

> = Angular2 RC.6

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

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

trong bootstrap của bạn.

Trong các phiên bản cũ hơn, việc nhập khẩu phải giống như

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

Xem thêm Vị trí và HashLocationStrargety ngừng hoạt động trong phiên bản beta.16

— Günter Zöchbauer
nguồn
3
Ví dụ nhỏ về cách thứ hai:bootstrap(AppComponent, [ROUTER_PROVIDERS, provide(APP_BASE_HREF, {useValue : '/'})]);
— malloc4k
1
Tôi đã phải thêm dòng nhập khẩu import {provide} from 'angular2/core';để có thể sử dụng cung cấp.
— CorayThan
2
Tôi đã phải nhập dòngimport {APP_BASE_HREF} from 'angular2/router';
— jimmystormig 4/2/2016
Cảm ơn các bản cập nhật. Bản thân tôi không sử dụng TS (chỉ có Dart) và kiến ​​thức TS của tôi vẫn còn hạn chế.
— Günter Zöchbauer
1
Dự án của tôi có các yếu tố SVG chứa đầy các mẫu hình ảnh. Những hình ảnh chưa bao giờ được hiển thị trong Firefox khi <base href="https://stackoverflow.com/" />được thành lập trong file (ví "/", "./", "#"hoặc bất kỳ đường dẫn cơ sở khác, bất kể như thế nào những con đường hình ảnh bản thân được quy định trong mẫu). Giải pháp duy nhất cuối cùng có hiệu quả là sử dụng APP_BASE_HREFthay thế. Một người tiết kiệm thực sự!
— ConnorsFan
34

Tôi đã phải đối mặt với vấn đề tương tự với các bài kiểm tra đơn vị Angular4 và Jasmine; giải pháp dưới đây đã làm việc cho tôi

Thêm bên dưới báo cáo nhập khẩu

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

Thêm câu lệnh dưới đây cho cấu hình TestBed:

TestBed.configureTestingModule({
    providers: [
        { provide: APP_BASE_HREF, useValue : '/' }
    ]
})
— Dilip Nann biết
nguồn
11

Bạn cũng có thể sử dụng điều hướng dựa trên hàm băm bằng cách đưa vào phần sau trong app.module.ts

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

và bằng cách thêm dòng sau vào @NgModule ({...})

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

Phát triển góc 2 với TypeScript

Hash HashLocationStrargety Một dấu băm (#) được thêm vào URL và phân đoạn URL sau khi băm xác định duy nhất tuyến đường sẽ được sử dụng như một đoạn của trang web. Chiến lược này hoạt động với tất cả các trình duyệt, bao gồm cả các trình duyệt cũ.

Trích từ: Yakov Fain Anton Moiseev. Phát triển Angular 2 với TypeScript.

— Lionel Morrison
nguồn
Cảm ơn Lionel! Điều này thật tuyệt vời và đã giải quyết được một vấn đề tôi gặp phải khi sử dụng giải pháp APP_BASE_HREF ở trên mà không thành công khi sử dụng các tham số url như "sản phẩm /: id". Cảm ơn!
— Stokely
8

Kể từ phiên bản 2.0 :)

import { APP_BASE_HREF } from 'angular2/platform/common';
— Fireaxe
nguồn
Kể từ Rc6, đây là tất cả trong nhà cung cấp: angular.io/docs/ts/latest/api/common/index/ mẹo
— Mark Kenny
1
Điều này giúp tôi khi thông số trong Karma của tôi không thành công với Lỗi: Không có cơ sở. Vui lòng cung cấp giá trị cho mã thông báo APP_BASE_HREF hoặc thêm một yếu tố cơ bản vào tài liệu.
— Sắp xếp
6

chỉ là thêm mã dưới đây vào thẻ index.html

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

Điều đó làm việc như một cơ duyên đối với tôi.

— naram kiran
nguồn
5

Với angular 4, bạn có thể khắc phục sự cố này bằng cách cập nhật tệp app.module.ts như sau:

Thêm câu lệnh nhập ở trên cùng như dưới đây:

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

Và thêm dòng dưới đây vào bên trong @NgModule

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

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

— Suresh Kamrushi
nguồn
Tại sao useValue cần phải là '/ my / app'?
— Dilip Nann biết
5

Sửa lỗi Angular 7,8 là trong app.module.ts 

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

bên trong @NgModule thêm

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

— Phong Trương
nguồn
Tôi đã đối mặt với lỗi này trong khi cố gắng tải một thành phần cho cuốn sách câu chuyện góc cạnh. Thành phần này có phụ thuộc bộ định tuyến. Nó đã giải quyết được lỗi !!
— Arpan Banerjee
1

Kiểm tra index.html của bạn. Nếu bạn đã vô tình loại bỏ phần sau, hãy bao gồm nó và nó sẽ ổn thôi

<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">
— Tadele Ayelegn
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.