Routing not working on Angular 4

Question

The home page works fine but when I access other routes in app throws error.

app.module.ts

import { environment } from './../environments/environment';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { APP_BASE_HREF } from '@angular/common';
import {HttpModule} from '@angular/http';
import {RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { NavheaderComponent } from './navheader/navheader.component';
 import { SwiperModule, SwiperConfigInterface } from 'ngx-swiper-wrapper';
import { SliderComponent } from './slider/slider.component';
import {HomeService} from './services/banner/home.service';
import { FeaturedProductComponent } from './featured-product/featured-product.component';
import { CurrencyChangePipe } from './pipe/currency-change.pipe';
import { FooterComponent } from './footer/footer.component';
import { CategoriesComponent } from './categories/categories.component';
import { ProductPageComponent } from './product-page/product-page.component';
  
const SWIPER_CONFIG: SwiperConfigInterface = {
  direction: 'horizontal',
  threshold: 50,
  spaceBetween: 5,
  slidesPerView: 1,
  centeredSlides: true,
  keyboardControl: true
};
@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    NavheaderComponent ,
    SliderComponent, 
    FeaturedProductComponent, 
    CurrencyChangePipe, 
    FooterComponent, 
    CategoriesComponent, 
    ProductPageComponent   
  ],
  imports: [
    BrowserModule,HttpModule,
    RouterModule.forRoot([
    {path:'', component: HomeComponent  },
    {path:'product', component: ProductPageComponent }
    ]),  
    SwiperModule.forRoot(SWIPER_CONFIG) 
 
  ],
  providers: [  {
            provide: APP_BASE_HREF,
            useValue: '/' + (window.location.pathname.split('/')[1] || '')
        },
        HomeService 
        ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Following is the error in console.

GET http://localhost:4200/product/assets/css/style.min.css net::ERR_ABORTED
(index):31 GET http://localhost:4200/product/polyfills.bundle.js net::ERR_ABORTED
(index):31 GET http://localhost:4200/product/inline.bundle.js net::ERR_ABORTED
(index):31 GET http://localhost:4200/product/styles.bundle.js net::ERR_ABORTED
(index):31 GET http://localhost:4200/product/scripts.bundle.js net::ERR_ABORTED
(index):31 GET http://localhost:4200/product/vendor.bundle.js net::ERR_ABORTED
(index):31 GET http://localhost:4200/product/main.bundle.js net::ERR_ABORTED
(index):31 GET http://localhost:4200/product/polyfills.bundle.js net::ERR_ABORTED
(index):31 GET http://localhost:4200/product/styles.bundle.js net::ERR_ABORTED
(index):31 GET http://localhost:4200/product/scripts.bundle.js net::ERR_ABORTED
(index):31 GET http://localhost:4200/product/vendor.bundle.js net::ERR_ABORTED
(index):31 GET http://localhost:4200/product/main.bundle.js net::ERR_ABORTED

The localhost:4200 works fine but localhost:4200/product does not. Seems like product component does not loads up. All the url are wrong here as they are not found. Correct should be like this.

http://localhost:4200/scripts.bundle.js

Have you added <base href="/"> to index.html?

user184994
– user184994

2018-02-18 15:16:59 +00:00
Commented Feb 18, 2018 at 15:16 — user184994
– user184994, Commented Feb 18, 2018 at 15:16

Sajeetharan · Accepted Answer · 2018-02-18 14:05:21Z

1

Try using useHash

RouterModule.forRoot([
{path:'', component: HomeComponent  },
{path:'product', component: ProductPageComponent }
], { useHash: true })

answered Feb 18, 2018 at 14:05

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Routing not working on Angular 4

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related