0
Hello, I’m working with Angular where I have a structure like this:
|-app
|-fooModule (fooPage1, fooPage2)
|-barModule (barPage1, barPage2)
These two modules are being loaded using lazyLoad in the route file as shown below:
app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{ path: 'bar', loadChildren: './foo/foo.module#FooModule' },
{ path: '' , loadChildren: './bar/bar.module#BarModule' }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
The module AppRoutingModule is loaded into the initial module of the project, the AppModule together with others, and both in foo how much in bar the same structure but, instead of loading modules with lazyLoad, I load components, like this:
example: foo-routing.module (bar-routing.module.ts has the same structure)
import { FooPage1Component } from './foo-page-1/foo-page-1.component';
import { FooPage2Component } from './foo-page-2/foo-page-2.component';
const routes: Routes = [
{ path: 'page2', component: FooPage2Component },
{ path: '' , component: FooPage1Component }
];
My problem is that when I’m on the route www.meusite.com/page2 and try to force a routing to Barmodule, Angular does not remove the already loaded components from the Foopage2component. It’s like he didn’t update on <router-outlet>. The way I call another module can be seen in the Foopage2component:
foo-page-2.Component
import { Component } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'foo-page-2',
templateUrl: './foo-page-2.component.html',
styleUrls: ['./foo-page-2.component.scss']
})
export class FooPage2Component {
constructor(
private router:Router
){
// depois de 2 segundos, redirecione para o módulo bar na pagina 2
setTimeout(()=> router.navigate(['../bar/page2']), 2000);
}
}
When I compile the above code, and do the test, the result on my page when doing the redirect is like this:
structure rendered in browser
<html>
<head>
</head>
<body>
<app>
<router-outlet></router-outlet>
<foo-page-2></foo-page-2>
<bar-page-2></bar-page-2>
</app>
</body>
</html>
So here’s the question: if I have 2 different modules that have their own routes and are dynamically loaded (with lazyLoad on loadChildren) how can I tell at the angle I want, from the Foopage2 component that is in Foomodule, redirect to a Barpage2 component in Barmodule?
Note: I’ve tried using the Router.navigate, Router.navigateByUrl, I tried to force the navigation by passing the parameters of Navigationextra.relativeTo and yet, it doesn’t work. Unfortunately my solution so far is being a (horrible)
window.location.href = window.location.href.replace('/page2','/bar/page2);
Can someone help me?