CODEWITHSUNDEEP
javascriptangular
Akhil Sahu
Akhil Sahu

Reputation: 637

Routing not working on Angular 4

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

Upvotes: 0

Views: 123

Answers (1)

Sajeetharan
Sajeetharan

Reputation: 222582

Try using useHash

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

Upvotes: 1

Related Questions