0

I have a simple angular routing module that looks like this: 

import { NgModule, ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './../../home/home.component';
import { LoginComponent } from './../../login/login.component';

const routes: Routes = [
  {
    path: '',
    component: HomeComponent
  },
  {
    path: 'login',
    component: LoginComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

The HomeComponent is loaded at first whenever I open the page. everything works fine until I switch to the login page. Both of them have certain parts that work with javascript. I added those in the .angular-cli.json file.

If I switch to the login page using the following button:

<li class="active"><a routerLink="">Home</a></li>

none of those functions seem to work, also whenever I switch back to the homepage component, the functions that did work before won't work here either.

So far i found out that the scripts are loaded once since the main application is loaded using "eager loading" and the compontens use "lazy loading".

Is there a way to load the scripts again or any other way to fix this?

Niels Peeren
  • 315
  • 1
  • 13
  • 2
    Without seeing your JavaScript I recon it's because probably you use the document load listener to trigger your JS. Angular only loads a page once, after that the document load event won't fire anymore until you do a full refresh of the page. – Ruud Voost Jan 26 '18 at 11:37

1 Answers1

0

I managed to fix the problem by using the solution given on the following page:

how to load js on component level in angular 4. I don't want to load all js file at app startup

given by Milad.

Niels Peeren
  • 315
  • 1
  • 13