각도 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 {
}
https://angular.io/docs/ts/latest/guide/router.html
<head>
태그 바로 뒤에 기본 요소를 추가하십시오 .app
응용 프로그램 의 폴더와 같이 폴더가 응용 프로그램 루트 인 경우 여기에 표시된 대로 정확하게href
값을 설정 하십시오.
이 <base href="/">
URL의 정적 부분을 Angular 라우터에 알려줍니다. 그런 다음 라우터는 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';
베타에서 위치 및 HashLocationStrategy 작동이 중지 된 경우 도 참조하십시오 .16
I had faced similar issue with Angular4 and Jasmine unit tests; below given solution worked for me
Add below import statement
import { APP_BASE_HREF } from '@angular/common';
Add below statement for TestBed configuration:
TestBed.configureTestingModule({
providers: [
{ provide: APP_BASE_HREF, useValue : '/' }
]
})
You can also use hash-based navigation by including the following in app.module.ts
import { LocationStrategy, HashLocationStrategy } from '@angular/common';
and by adding the following to the @NgModule({ ... })
@NgModule({
...
providers: [
ProductService, {
provide: LocationStrategy, useClass: HashLocationStrategy
}
],
...
})
“HashLocationStrategy—A hash sign (#) is added to the URL, and the URL segment after the hash uniquely identifies the route to be used as a web page fragment. This strategy works with all browsers, including the old ones.”
Excerpt From: Yakov Fain Anton Moiseev. “Angular 2 Development with TypeScript.”
Since 2.0 beta :)
import { APP_BASE_HREF } from 'angular2/platform/common';
With angular 4 you can fix this issue by updating app.module.ts file as follows:
Add import statement at the top as below:
import {APP_BASE_HREF} from '@angular/common';
And add below line inside @NgModule
providers: [{provide: APP_BASE_HREF, useValue: '/my/app'}]
Reff: https://angular.io/api/common/APP_BASE_HREF
it is just that add below code in the index.html head tag
<html>
<head>
<base href="/">
...
that worked like a charm for me.
Check your index.html. If you have accidentally removed the following part, include it and it will be fine
<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
'Programing' 카테고리의 다른 글
javadoc에서 @ 문자를 어떻게 벗어날 수 있습니까? (0) | 2020.05.25 |
---|---|
Sublime Text 2에서 Ctrl + D를 사용하여 여러 항목을 선택할 때 일치 항목을 건너 뛰려면 어떻게합니까? (0) | 2020.05.24 |
안드로이드에서 모바일 장치의 위도와 경도를 얻는 방법? (0) | 2020.05.24 |
ANSI 색상 이스케이프 시퀀스 목록 (0) | 2020.05.24 |
APC 캐시 항목을 지우는 방법? (0) | 2020.05.24 |