I am working on implementing Angular routing in my hybrid AngularJS/Angular application. I have created an app-routing.module.ts file with the following configuration:
import { ModuleWithProviders } from "@angular/core";
import { Routes, RouterModule, ExtraOptions } from '@angular/router';
import {SignInComponent} from "./modules/login/components/sign-in/sign-in.component";
import {ActivationComponent} from "./modules/login/components/activation/activation.component";
const routes: Routes = [
{
path: 'sign-in',
component: SignInComponent
},
{
path: 'activation',
component: ActivationComponent
},
{
path: '',
pathMatch: 'full',
redirectTo: '/activation'
},
{
path: '**',
pathMatch: 'full',
redirectTo: '/activation'
}
];
export const routingModule: ModuleWithProviders = RouterModule.forRoot(routes);
In my app.module.ts file, I added the routingModule to the "imports" array and in app.component.html, I included the following buttons:
<button (click)="goto('sign-in')">go to sign in</button>
<button (click)="goto('activation')">go to activation</button>
<router-outlet></router-outlet>
The Angular routing works perfectly when using just Angular without any issues.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8>
<title>Angular</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
However, when I add my AngularJS code by including
this.upgrade.bootstrap(document.body, ['app']);
the Angular routing no longer just refreshes the content of the "router-outlet" tag, but reloads the entire page instead. Removing the above line resolves the issue.
Has anyone encountered a similar problem and can suggest a solution for making Angular routing function correctly within a hybrid AngularJS/Angular application? Thank you.