CODEWITHSUNDEEP
angular
Alessandro Celeghin
Alessandro Celeghin

Reputation: 4189

Angular 5 issue when routing in builded app

In my angular 5 application when I try the built app I have some problem, If I navigate normally through pages it is ok, but if I reload a detail page it seems like fonts are not loaded ( I load all fonts from my assets folder because the app has to work without online dependencies). And if I reload non detail page it works good, why?

app.routing

  {
    path: 'ticketBundles',
    loadChildren: './ticket-bundles/shared/ticket-bundle.module#TicketBundleModule',
    data: { roles: ['role.admin', 'role.backoffice'] }
  },

ticketBundleRouting.module

import { NgModule } from '@angular/core';
import {Routes, RouterModule} from '@angular/router';
import {TicketBundleListComponent} from '../ticket-bundle-list/ticket-bundle-list.component';
import {TicketBundleNewComponent} from '../ticket-bundle-new/ticket-bundle-new.component';
import {TicketBundleDetailComponent} from '../ticket-bundle-detail/ticket-bundle-detail.component';

const TicketBundleRoutes: Routes = [
  {
    path: '',
    component: TicketBundleListComponent
  },
  {
    path: 'new',
    component: TicketBundleNewComponent
  },
  {
    path: ':code',
    component: TicketBundleDetailComponent,
  },
  {
    path: ':code/copy',
    component: TicketBundleNewComponent
  }
];

@NgModule({
  imports: [
    RouterModule.forChild(TicketBundleRoutes)
  ],
  exports: [
    RouterModule
  ]
})

export class TicketBundleRoutingModule { }

And in angular-cli.json

"styles": [
                "app-styles.css",
                "./assets/css/fonts.css",
                .....

Upvotes: 2

Views: 41

Answers (2)

ForestG
ForestG

Reputation: 18085

change 

"styles": [... "./assets/css/fonts.css",

to 

"styles": [... "/assets/css/fonts.css",

if that does not help, try to load your font in scss files.

styles.scss: 

@font-face { font-family: "your font name"; src: url("/assets/source-of-font"); }

$globally-available-font-variable: "your font name";

in any component's scss:

@import './src/style.scss';

.somediv{
  font: $globally-available-font-variable
}

Upvotes: 0

Carnaru Valentin
Carnaru Valentin

Reputation: 1846

Try to add in of your index.html base path: 

<base href="/">

Upvotes: 1

Related Questions