कोणीय 2 राउटर कोई बेस href सेट नहीं है

Question

मुझे एक त्रुटि मिल रही है और मैं ऐसा क्यों नहीं कर सकता। यहाँ त्रुटि है:

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)

क्या किसी को पता है कि राउटर इसे क्यों फेंक रहा है? मैं कोणीय 2 बीटा का उपयोग कर रहा हूं

यहाँ मेरा कोड है:

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

Answer 1

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

अपने बूटस्ट्रैप में।

पुराने संस्करणों में आयात जैसा होना था

<अंगुल 2 आरसी 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 : '/' });
]); 

<बीटा .१.1

import {APP_BASE_HREF} from 'angular2/router';

> = बीटा ।१7

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

स्थान भी देखें और HashLocationStrategy ने बीटा.16 में काम करना बंद कर दिया

Comments

दूसरे तरीके का छोटा उदाहरण:bootstrap(AppComponent, [ROUTER_PROVIDERS, provide(APP_BASE_HREF, {useValue : '/'})]);

— malloc4k

मुझे import {provide} from 'angular2/core';प्रदान करने में सक्षम होने के लिए आयात लाइन को जोड़ना था ।

— CorayThan

मुझे import {APP_BASE_HREF} from 'angular2/router';

— बजे

अपडेट के लिए धन्यवाद। मैं स्वयं टीएस (केवल डार्ट) का उपयोग नहीं करता हूं और मेरा टीएस ज्ञान अभी भी सीमित है।

— गुंटर Zöchbauer

मेरी परियोजना में एसवीजी तत्व छवि पैटर्न से भरे हुए हैं। जब <base href="https://stackoverflow.com/" />फ़ाइल में सेट किया गया था ( "/"तो "./", "#"या किसी अन्य आधार पथ के लिए, कोई फर्क नहीं पड़ता कि कैसे छवि पथ खुद पैटर्न में निर्दिष्ट थे)। एकमात्र समाधान जो अंततः काम करता था, APP_BASE_HREFइसके बजाय उपयोग करना था। एक वास्तविक जीवन रक्षक!

— कॉनरसफ़ान

Answer 2

मुझे Angular4 और जैस्मीन यूनिट परीक्षणों के साथ इसी तरह के मुद्दे का सामना करना पड़ा था; नीचे दिए गए समाधान ने मेरे लिए काम किया

आयात विवरण नीचे जोड़ें

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

TestBed कॉन्फ़िगरेशन के लिए नीचे कथन जोड़ें:

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

Answer 3

आप app.module.ts में निम्नलिखित को शामिल करके हैश-आधारित नेविगेशन का भी उपयोग कर सकते हैं

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

और नीचे @NgModule ({...}) जोड़कर

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

“HashLocationStrategy- URL में एक हैश साइन (#) जोड़ा गया है, और हैश के बाद URL सेगमेंट विशिष्ट रूप से वेब पेज के टुकड़े के रूप में उपयोग किए जाने वाले मार्ग की पहचान करता है। यह रणनीति पुराने सहित सभी ब्राउज़रों के साथ काम करती है। ”

अंश: याकोव फेन एंटोन मोइसेव। "टाइपस्क्रिप्ट के साथ कोणीय 2 विकास।"

Comments

धन्यवाद लियोनेल! यह उत्कृष्ट और एक समस्या है जिसका मैंने ऊपर APP_BASE_HREF समाधान का उपयोग किया है जो "उत्पाद /: id" जैसे url मापदंडों का उपयोग करते समय विफल रहता है। धन्यवाद!

— Stokely

Answer 4

2.0 बीटा के बाद से :)

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

Comments

Rc6 के

— मार्क केनी

इससे मुझे मदद मिली जब कर्मा में मेरा त्रुटि त्रुटि के साथ विफल हो रहा था: कोई आधार href सेट नहीं। कृपया APP_BASE_HREF टोकन के लिए एक मान प्रदान करें या दस्तावेज़ में एक आधार तत्व जोड़ें।

— संरेखित

Answer 5

यह सिर्फ यह है कि index.html हेड टैग में नीचे कोड जोड़ें

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

जो मेरे लिए एक आकर्षण की तरह काम करता है।

Answer 6

कोणीय 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

Comments

UseValue को use / my / app ’होने की आवश्यकता क्यों है?

— दिलीप नन्नवरे

Answer 7

कोणीय 7,8 फिक्स app.module.ts में है

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

@NgModule के अंदर

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

Comments

कोणीय कहानी की किताब के लिए एक घटक को लोड करने की कोशिश करते समय मुझे इस त्रुटि का सामना करना पड़ा। इस घटक में राउटर निर्भरता थी। इसने त्रुटि को हल किया !!

— अर्पण बैनर्जी

Answer 8

अपने 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">