Soru Köşeli 2 yönlendirici yok taban href seti


Bir hata alıyorum ve nedenini bulamıyorum. İşte hata:

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)

Yönlendiricinin neden bunu attığını bilen var mı? Angular2 beta kullanıyorum

İşte benim kodum:

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

136
2017-12-30 18:34


Menşei




Cevaplar:


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

Taban elemanını hemen <head> etiket. Eğer app Bizim uygulama için olduğu gibi klasör, uygulama köktür href değer kesinlikle burada gösterildiği gibi.

<base href="/"> Köşeli yönlendiriciye URL'nin statik kısmı olduğunu söyler. Yönlendirici daha sonra sadece URL’nin kalan kısmını değiştirir.

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

Alternatif olarak ekle

> = Angular2 RC.6

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

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

senin bootstrap içinde.

Daha eski versiyonlarda ithalatlar şöyle olmalıydı:

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

<a1.17

import {APP_BASE_HREF} from 'angular2/router';

> = beta.17

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

Ayrıca bakınız Location ve HashLocationStrategy, beta sürümde çalışmayı durdurdu.


269
2017-12-30 18:40



İkinci yolun küçük bir örneği: bootstrap(AppComponent, [ROUTER_PROVIDERS, provide(APP_BASE_HREF, {useValue : '/'})]); - malloc4k
İthalat hattını eklemek zorundaydım import {provide} from 'angular2/core'; kullanabilmek için - CorayThan
Hattı almak zorundaydım import {APP_BASE_HREF} from 'angular2/router'; - jimmystormig
Güncellemeler için teşekkürler. Ben TS kullanmıyorum (sadece Dart) ve TS bilgim hala sınırlı. - Günter Zöchbauer
Projemde resim kalıpları ile dolu SVG öğeleri var. Görüntüler Firefox’ta hiçbir zaman gösterilmiyordu. <base href="/" /> dosyada ayarlandı (için "/", "./", "#" ya da görüntü yollarının desende kendileri nasıl belirlendiği fark etmeksizin başka herhangi bir temel yoldur). Sonunda işe yarayan tek çözüm kullanmaktı. APP_BASE_HREF yerine. Gerçek bir hayat koruyucu! - ConnorsFan


Angular4 ve Jasmine birim testleri ile benzer bir sorunla karşılaştım; aşağıda verilen çözüm benim için çalıştı

İçe aktarma ifadesini ekle

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

TestBed yapılandırması için aşağıdaki ifadeyi ekleyin:

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

26
2017-09-20 17:49





2.0 beta'dan beri :)

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

8
2018-05-12 13:23



Rc6'dan itibaren bu şu anda sağlayıcıda: angular.io/docs/ts/latest/api/common/index/... - Mark Kenny
Bu, Karma'daki özelliğim Hata ile başarısız olduğunda bana yardımcı oldu: Hiçbir temel href ayarlanmadı. Lütfen APP_BASE_HREF belirteci için bir değer belirtin veya belgeye temel bir öğe ekleyin. - Aligned


Ayrıca, app.module.ts dosyasında aşağıdakileri ekleyerek karma tabanlı gezinmeyi de kullanabilirsiniz.

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

ve @NgModule ({...}) dosyasına aşağıdakileri ekleyerek

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

Angular 2 Development with TypeScript

“HashLocationStrategy — URL'ye karma işaret (#) eklenir ve hash, web sayfası fragmanı olarak kullanılacak rotayı benzersiz bir şekilde tanımladıktan sonra URL segmenti. Bu strateji, eski olanlar da dahil olmak üzere tüm tarayıcılarla çalışır. ”

Alıntı: Yakov Fain Anton Moiseev. “TipScript ile Açısal 2 Geliştirme”


7
2018-02-21 01:10





Açısal 4 ile bu sorunu güncelleyerek düzeltebilirsiniz. app.module.ts aşağıdaki gibi dosya:

Üstte aşağıdaki gibi içe aktarma ifadesi ekleyin:

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

Ve aşağıdaki satırı ekleyin @NgModule

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

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


3
2018-02-02 12:20



UseValue neden '/ my / app' olmalıdır? - Dilip Nannaware


index.html başlık etiketinde aşağıdaki kodu ekleyin

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

Bu benim için bir cazibe gibi çalıştı.


1
2018-03-12 03:20