CODEWITHSUNDEEP
angularangular2-routing
Aravind
Aravind

Reputation: 41571

please provide a value for APP_BASE_HREF token exception Angular2

I am developing the first Angular 2 application and have the following code

AppModule.ts code

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import {RouterModule} from '@angular/router';

import { AppComponent }  from './app.component';
import { MenuComponent} from './home/menu/menu.component';
import { FooterComponent} from './home/footer/footer.component';
import { AboutComponent} from './personalDetails/about/about.component';
@NgModule({
  imports:  [ 
              BrowserModule,
              RouterModule.forRoot([
                  {path: '' , component : AboutComponent},
                  {path: 'about' , component : AboutComponent}

                ])
            ],
  declarations: [ 
                AppComponent, 
                MenuComponent, 
                FooterComponent,
                AboutComponent,


                ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

AppComponent.ts code

import { Component } from '@angular/core';

@Component({
    selector: 'app',
    template:   `
                <menu></menu>
                <router-outlet></router-outlet>
                <footer></footer>

                `

})
export class AppComponent { }

My console says the following error enter image description here

Upvotes: 2

Views: 4894

Answers (1)

Aravind
Aravind

Reputation: 41571

The fix is simple and I forgot to add the base href tag in the index.html,

<base href="/"/>

When I researched why should we add base href by default which is not the case in angular1. I found the following

  1. By default Angular2 uses HTML5
  2. No hash symbol is needed.
  3. URL Rewriting is necessary, if the application runs in any of the server which are different for each server and can be found in the documentation which are separate for Tomcat, IIS etc.

Upvotes: 3

Related Questions