Router angolare 2 senza base href impostata

195

Ricevo un errore e non riesco a trovare il perché. Ecco l'errore:

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)

Qualcuno sa perché il router sta lanciando questo? Sto usando angular2 beta

ecco il mio codice:

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 
— Jason Spick
fonte

Risposte:

376

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

Aggiungi l'elemento base subito dopo il <head>tag. Se la appcartella è la radice dell'applicazione, così come lo è per la nostra applicazione, imposta il hrefvalore esattamente come mostrato qui.

Il <base href="https://stackoverflow.com/">dice al router angolare qual è la parte statica dell'URL. Il router quindi modifica solo la parte rimanente dell'URL.

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

In alternativa aggiungi

> = Angular2 RC.6

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

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

nel tuo bootstrap.

Nelle versioni precedenti le importazioni dovevano essere simili

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

<beta.17

import {APP_BASE_HREF} from 'angular2/router';

> = beta.17

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

Vedi anche Location e HashLocationStrategy hanno smesso di funzionare in beta.16

— Günter Zöchbauer
fonte
3
Piccolo esempio di seconda via:bootstrap(AppComponent, [ROUTER_PROVIDERS, provide(APP_BASE_HREF, {useValue : '/'})]);
— malloc4k il
1
Ho dovuto aggiungere la riga di importazione import {provide} from 'angular2/core';per poter utilizzare fornire.
— Coray:
2
Ho dovuto importare la rigaimport {APP_BASE_HREF} from 'angular2/router';
— jimmystormig il
Grazie per gli aggiornamenti Non uso TS da solo (solo Dart) e la mia conoscenza di TS è ancora limitata.
— Günter Zöchbauer,
1
Il mio progetto ha elementi SVG pieni di motivi di immagini. Le immagini non sono mai stati esposti in Firefox quando <base href="https://stackoverflow.com/" />è stato impostato nel file (per "/", "./", "#"o qualsiasi altro percorso di base, non importa quanto i percorsi delle immagini stesse sono stati specificati nel modello). L'unica soluzione che alla fine ha funzionato è stata APP_BASE_HREFinvece quella di utilizzare . Un vero salvavita!
— ConnorsFan
34

Avevo affrontato problemi simili con i test unitari di Angular4 e Jasmine; sotto la soluzione data ha funzionato per me

Aggiungi sotto la dichiarazione di importazione

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

Aggiungi l'istruzione seguente per la configurazione TestBed:

TestBed.configureTestingModule({
    providers: [
        { provide: APP_BASE_HREF, useValue : '/' }
    ]
})
— Dilip Nannaware
fonte
11

Puoi anche utilizzare la navigazione basata su hash includendo quanto segue in app.module.ts

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

e aggiungendo quanto segue a @NgModule ({...})

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

Sviluppo angolare 2 con TypeScript

"HashLocationStrategy: un segno di hash (#) viene aggiunto all'URL e il segmento URL dopo l'hash identifica in modo univoco la route da utilizzare come frammento di una pagina Web. Questa strategia funziona con tutti i browser, compresi quelli vecchi. "

Estratto da: Yakov Fain Anton Moiseev. "Sviluppo angolare 2 con TypeScript."

— Lionel Morrison
fonte
Grazie Lionel! Questo è eccellente e ho risolto un problema che ho avuto usando la soluzione APP_BASE_HREF sopra la quale fallisce quando si usano parametri url come "product /: id". Grazie!
— Stokely
6

è solo che aggiungi sotto il codice nel tag head index.html

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

che ha funzionato come un incanto per me.

— naram kiran
fonte
5

Con angular 4 è possibile risolvere questo problema aggiornando il file app.module.ts come segue:

Aggiungi la dichiarazione di importazione in alto come di seguito:

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

E aggiungi la riga sotto all'interno @NgModule

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

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

— Suresh Kamrushi
fonte
Perché useValue deve essere '/ my / app'?
— Dilip Nannaware,
5

La correzione angolare 7,8 è in app.module.ts 

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

all'interno di @NgModule aggiungere

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

— Feng Zhang
fonte
Ho riscontrato questo errore durante il tentativo di caricare un componente per il libro di storie angolare. Questo componente dipendeva dal router. Ha risolto l'errore !!
— Arpan Banerjee,
1

Controlla il tuo index.html. Se hai rimosso accidentalmente la parte seguente, includila e andrà bene

<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">
— Tadele Ayelegn
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.