각도 2 라우터 기본 href 세트 없음

각도 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값은 여기에 표시된 대로입니다.

그<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 : '/' });
]); 

< 베타.17

import {APP_BASE_HREF} from 'angular2/router';

>= 베타.17

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

자세한 내용은 위치 및 해시 위치 전략이 베타에서 작동을 중지했음을 참조하십시오.16

저는 Angular4와 Jasmine 유닛 테스트에서 비슷한 문제에 직면한 적이 있습니다. 아래 주어진 솔루션이 저에게 효과가 있었습니다.

아래 가져오기 문 추가

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

TestBed 구성에 대한 아래 문장 추가:

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

Angular 7.8 fix는 app.module.ts에 있습니다.

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

내부 @NgModule 추가

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 세그먼트는 웹 페이지 조각으로 사용할 경로를 고유하게 식별합니다.이 전략은 이전 브라우저를 포함한 모든 브라우저에서 작동합니다."

발췌: 야코프 파인 안톤 모이제브."TypeScript를 사용한 Angular 2 개발"

2.0 베타 이후 :)

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

단지 인덱스에 아래 코드를 추가하는 것입니다. 헤드 태그.

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

그것은 나에게 매력적으로 작용했습니다.

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

index.html을 확인합니다.다음 부품을 실수로 제거한 경우 포함하면 됩니다.

<base href="/">

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

언급URL : https://stackoverflow.com/questions/34535163/angular-2-router-no-base-href-set