Angular 2 Router No Base Href Set
Answer :
https://angular.io/docs/ts/latest/guide/router.html
Add the base element just after the
<head>tag. If theappfolder is the application root, as it is for our application, set thehrefvalue exactly as shown here.
The <base href="/"> tells the Angular router what is the static part of the URL. The router then only modifies the remaining part of the URL.
<head> <base href="/"> ... </head> Alternatively add
>= Angular2 RC.6
import {APP_BASE_HREF} from '@angular/common'; @NgModule({ declarations: [AppComponent], imports: [routing /* or RouterModule */], providers: [{provide: APP_BASE_HREF, useValue : '/' }] ]); in your bootstrap.
In older versions the imports had to be like
< 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'; See also Location and HashLocationStrategy stopped working in beta.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.”
Comments
Post a Comment