use Angular routing in AngularJS/Angular hybrid app reload all page

I am trying to make Angular routing in my AngularJS/Angular hybrid application. I created app-routing.module.ts file :

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 app.module.ts I added routingModule to "imports" array and in app.component.html I added :

<button (click)="goto('sign-in')">go to home</button>
<button (click)="goto('activation')">go to product</button>

<router-outlet></router-outlet>


When insight by index.html i am using just Angular it works perfectly

<!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>


But when I am adding my AngularJS code just adding

this.upgrade.bootstrap(document.body, ['app']);


my current Angular routing instead reload content of "router-outlet" tag, reloads completely the page. If I remove

this.upgrade.bootstrap(document.body, ['app']);


it works fine. Does anybody had some similar issues and maybe someone can propose some scenario how to make Angular routing work appropriately insight hybrid AngularJS/Angular application? Thanks

Continue reading...