কৌণিক 2 রাউটার কোনও বেস href সেট

195

আমি একটি ত্রুটি পাচ্ছি এবং কেন তা খুঁজে পাচ্ছি না। ত্রুটি এখানে:

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 {
}
routing  angular 
— জেসন স্পিক
সূত্র

উত্তর:

376

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

<head>ট্যাগের ঠিক পরে বেস উপাদান যুক্ত করুন । যদি appফোল্ডারটি অ্যাপ্লিকেশন রুট হয় তবে এটি আমাদের অ্যাপ্লিকেশনের মতো, এখানে প্রদর্শিত হিসাবে ঠিকhref মানটি সেট করুন।

<base href="https://stackoverflow.com/">কৌণিক রাউটার কোন URL এর স্ট্যাটিক অংশ বলে। রাউটারটি তখন কেবলমাত্র URL এর অবশিষ্ট অংশটি সংশোধন করে।

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

বিকল্পভাবে যুক্ত করুন

> = কৌণিক 2 আরসি .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 : '/' });
]);

<আরসি.0

import {provide} from 'angular2/core';
bootstrap(AppComponent, [
  ROUTER_PROVIDERS, 
  provide(APP_BASE_HREF, {useValue : '/' });
]);

<বিটা .১7

import {APP_BASE_HREF} from 'angular2/router';

> = বিটা.17

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

এছাড়াও দেখুন অবস্থান এবং হ্যাশলোকেশনস্ট্রেটজি বিটা ১6 এ কাজ করা বন্ধ করে দিয়েছে

— গন্টার জ্যাচবাউয়ার
সূত্র
3
দ্বিতীয় bootstrap(AppComponent, [ROUTER_PROVIDERS, provide(APP_BASE_HREF, {useValue : '/'})]);
— উপায়ের
1
সরবরাহ সরবরাহ import {provide} from 'angular2/core';করতে সক্ষম হতে আমাকে আমদানি লাইন যুক্ত করতে হয়েছিল।
— CorayThan
2
আমাকে লাইন আমদানি করতে হয়েছিলimport {APP_BASE_HREF} from 'angular2/router';
— জিমিস্টর্মিগ
আপডেটের জন্য ধন্যবাদ। আমি নিজে টিএস ব্যবহার করি না (কেবলমাত্র ডার্ট) এবং আমার টিএস জ্ঞান এখনও সীমাবদ্ধ।
— গন্টার জ্যাচবাউয়ার
1
আমার প্রকল্পে চিত্রের নিদর্শনগুলিতে ভরা এসভিজি উপাদান রয়েছে। চিত্র ফায়ারফক্স প্রদর্শিত না হয় যখন <base href="https://stackoverflow.com/" />ফাইলে হয় (জন্য "/", "./", "#"বা অন্য কোন বেস পাথ, কোন ব্যাপার কিভাবে ইমেজ পাথ নিজেদের প্যাটার্ন উল্লেখিত হয়েছে)। অবশেষে কাজ করা একমাত্র সমাধানটি APP_BASE_HREFপরিবর্তে ব্যবহার করা হয়েছিল। একজন বাস্তব জীবন রক্ষাকারী!
— কনারফ্যান
34

আমি Angular4 এবং জেসমিন ইউনিট পরীক্ষার সাথে একই ধরণের সমস্যার মুখোমুখি হয়েছি; নীচে প্রদত্ত সমাধানটি আমার পক্ষে কাজ করেছে

আমদানির বিবৃতি নীচে যুক্ত করুন

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

টেস্টবেড কনফিগারেশনের জন্য নীচে বিবৃতি যুক্ত করুন:

TestBed.configureTestingModule({
    providers: [
        { provide: APP_BASE_HREF, useValue : '/' }
    ]
})
— দিলীপ নন্নওয়ারে
সূত্র
11

আপনি app.module.ts এ নিম্নলিখিতগুলি অন্তর্ভুক্ত করে হ্যাশ-ভিত্তিক নেভিগেশনও ব্যবহার করতে পারেন

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

এবং @NgModule ({...}) এ নিম্নলিখিতগুলি যুক্ত করে

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

টাইপস্ক্রিপ্ট সহ কৌনিক 2 বিকাশ

“হ্যাশলোকেশনস্ট্রেজি — একটি হ্যাশ চিহ্ন (#) ইউআরএলতে যুক্ত করা হয়েছে, এবং হ্যাশের পরে ইউআরএল বিভাগটি ওয়েব পৃষ্ঠার খণ্ড হিসাবে ব্যবহৃত রুটটিকে অনন্যভাবে সনাক্ত করে। এই কৌশলটি পুরানোগুলি সহ সমস্ত ব্রাউজারের সাথে কাজ করে।

এর থেকে অংশ: ইয়াকভ ফেইন আন্তন মোইসেভ। "টাইপস্ক্রিপ্ট সহ কৌনিক 2 বিকাশ।"

— লিওনেল মরিসন
সূত্র
ধন্যবাদ লিওনেল! এটি সর্বোত্তম এবং আমার উপরের APP_BASE_HREF সমাধানটি ব্যবহার করা একটি সমস্যার সমাধান হয়েছে যা "প্রোডাক্ট /: আইডি" এর মতো ইউআরএল পরামিতি ব্যবহার করার পরে ব্যর্থ হয়। ধন্যবাদ!
— স্টোকলি
8

2.0 বিটা থেকে :)

import { APP_BASE_HREF } from 'angular2/platform/common';
— fireaxe
সূত্র
আরসি 6 এর হিসাবে এটি এখন সরবরাহকারীর মধ্যে সমস্তই রয়েছে
— মার্ক কেনি
1
এটি যখন আমাকে কর্মে আমার অনুমানটি ত্রুটির সাথে ব্যর্থ হয়েছিল: কোনও বেস href সেট নয় তখন এটি আমাকে সাহায্য করেছিল। দয়া করে APP_BASE_HREF টোকেনের জন্য একটি মান সরবরাহ করুন বা দস্তাবেজে একটি বেস উপাদান যুক্ত করুন।
— সারিবদ্ধ
6

এটি কেবলমাত্র সূচিপত্রের নীচে কোড যুক্ত করুন html হেড ট্যাগ

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

যে আমার জন্য একটি কবজ মত কাজ।

— নারম কিরণ
সূত্র
5

কৌণিক 4 দিয়ে আপনি নীচের মত app.module.ts ফাইল আপডেট করে এই সমস্যাটি সমাধান করতে পারেন :

নীচে হিসাবে শীর্ষে আমদানি বিবৃতি যুক্ত করুন:

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

এবং ভিতরে ভিতরে লাইন যুক্ত করুন @NgModule

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

রেফ: https://angular.io/api/common/APP_BASE_HREF

— সুরেশ কামরুশি
সূত্র
কেন ইউজভ্যালুতে '/ আমার / অ্যাপ' হওয়া দরকার?
— দিলীপ নন্নওয়ারে
5

কৌণিক 7,8 ফিক্সটি app.module.ts এ রয়েছে 

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

@NgModule এর ভিতরে

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

— ফেং ঝাং
সূত্র
কৌনিক গল্পের বইয়ের জন্য একটি উপাদান লোড করার চেষ্টা করার সময় আমি এই ত্রুটির মুখোমুখি হয়েছি। এই উপাদানটির রাউটার নির্ভরতা ছিল। এটি ত্রুটি সমাধান করেছে !!
— অর্পণ বন্দ্যোপাধ্যায়
1

আপনার সূচী। 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">
— টেডেল আইলেগেন
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.