I am upgrading my angular1 application using the bootstrapModule. Everything seems working as it should. I can see my angular1 UI on the angular2 but having issue with the angular2 routing overriding the angular1.
For example:
I go to angular1 page and it directs me to login page if not logged in (this works as expected), after logging in it is suppose to direct me to angular1 dashboard but it is not because the angular2 kicks in and goes to the home directory. Angular1 login path => www.localhost:4200/dev/#/login After logging in it should direct to www.localhost:4200/dev/#/ but instead it directs to www.localhost:4200/#/ (notice the /dev is out) which route back to the login page since the url changed but now will be www.localhost:4200/#/login (without the /dev).
I am using the UrlHandlingStrategy but that does not fix the issue. I believe the routing back to the home url without the /dev is caused by the on the index.html. I have tried using UIRouterUpgradeModule but that did not work either.
I don't know how much i cna post here but please let me know what you need me to post to help with this issue
main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
my package.json file
{
"name": "ng2TestCompanyName",
"version": "1.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --configuration production",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
"private": true,
"dependencies": {
"@angular/animations": "^15.2.0",
"@angular/common": "^15.2.0",
"@angular/compiler": "^15.2.0",
"@angular/core": "^15.2.0",
"@angular/forms": "^15.2.0",
"@angular/platform-browser": "^15.2.0",
"@angular/platform-browser-dynamic": "^15.2.0",
"@angular/router": "^15.2.0",
"@angular/upgrade": "^15.2.2",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.12.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "^15.2.2",
"@angular/cli": "~15.2.2",
"@angular/compiler-cli": "^15.2.0",
"@types/angular": "^1.8.4",
"@types/jasmine": "~4.3.0",
"jasmine-core": "~4.5.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.0.0",
"typescript": "~4.9.4"
}
}
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { UpgradeModule } from '@angular/upgrade/static';
import { RouterModule, UrlHandlingStrategy, UrlTree, Routes } from '@angular/router';
import { setUpLocationSync } from "@angular/router/upgrade";
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
export class CustomHandlingStrategy implements UrlHandlingStrategy {
shouldProcessUrl(url: UrlTree): boolean {
const shouldProcess = url.toString().startsWith("/home");
return shouldProcess;
}
extract(url: UrlTree): UrlTree {
return url;
}
merge(url: UrlTree, whole: UrlTree): UrlTree {
return url;
}
}
@NgModule({
declarations: [
AppComponent,
HomeComponent
],
imports: [
BrowserModule,
UpgradeModule,
AppRoutingModule,
RouterModule.forRoot(
[
{
path: 'home',
component: HomeComponent
}
],
{
useHash: true,
initialNavigation: 'enabledBlocking',
enableTracing: true
}
)
],
entryComponents: [
HomeComponent
],
providers: [
{provide: UrlHandlingStrategy, useClass: CustomHandlingStrategy}
],
bootstrap: [AppComponent]
})
export class AppModule {
constructor(public upgrade: UpgradeModule){}
}
//Bootstrap using the UpgradeModule
platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
console.log("Bootstrapping in Hybrid mode with Angular & AngularJS");
const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
upgrade.bootstrap(document.body, ['ng1TestCompanyName']);
setUpLocationSync(upgrade);
});
app.component.html
<router-outlet></router-outlet>
<div class="view-container">
<div ng-view class="view-frame"></div>
</div>
index.html
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta charset="utf-8">
<title>Ng2 Test Company</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>
angular1 routes
angular.module('routesConfig', [])
.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider){
$locationProvider.hashPrefix('');
if(window.location.href.indexOf("dev") > -1){
$routeProvider.
when('/apidoc', {
templateUrl: 'ng1/src/apiPostmanCollection/apiPostmanCollectionView.html',
controller: 'apiPostmanCollectionController'
}).
when('/login', {
templateUrl: 'ng1/src/pageLogin/pageLoginView.html',
controller: 'pageLoginController'
}).
when('/', {
templateUrl: 'ng1/src/pageMain/pageMainView.html',
controller: 'pageMainController'
}).
otherwise({
template: ''
});
} else {
$routeProvider.
when('/apidoc', {
templateUrl: 'ng1/src/apiPostmanCollection/apiPostmanCollectionView.html',
controller: 'apiPostmanCollectionController'
}).
when('/login', {
templateUrl: 'ng1/src/pageLogin/pageLoginView.html',
controller: 'pageLoginController'
}).
when('/', {
templateUrl: 'ng1/src/pageMain/pageMainView.html',
controller: 'pageMainController'
}).
otherwise({
template: ''
});
}
}
]);
I have tried using APP_BASE_HREF by adding the below code to the app.module.ts
{provide: APP_BASE_HREF, useValue: (window as any)['_app_base'] || '/'}
and adding the below to the head of the index.html but still did not work
<script>
(function() {
window['_app_base'] = '/' + window.location.pathname.split('/')[1];
})();
</script>
I also tried using the UIRouterUpgradeModule but still did not work. Any help will be appreciated because I have been on this for days
