Skip to content

Problem on refresh page in an ng2 route. #599

@link-geovani

Description

@link-geovani

Friends, I'm stuck on a problem that I can't solve.
I have a large project in AngularJS and I need to gradually migrate to Angular. I followed the integration steps, had several problems that I gradually overcame, but this last step has been pulling my hair out. I feel like it's become a patchwork quilt.
The application starts, I go to an AngularJS route with two levels (http://localhost:8080/Cadastro/Motivo).
My next route has already been declared in Angular (http://localhost:8080/Cadastro/Motivo/v2/Incluir) and opens normally if I navigate to it. If I refresh the page in the Angularjs route "Cadastro/Motivo", the page updates properly (Webpack is configured correctly to handle the url without hash). If I refresh the page from the Angular route "Cadastro/Motivo/v2/Incluir", it's like it can't find the route because "shouldProcessUrl()" isn't called, but I can't figure out why and the page doesn't open. This is the relevant part of my main.ts:

import '@angular/compiler';
import { NgModule, NgZone } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { UpgradeModule } from '@angular/upgrade/static';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { CommonModule } from '@angular/common';
import { UIRouter } from '@uirouter/core';
import { HttpHandleInterceptor } from './angular/core/handlers/http-handle-interceptor';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { setUpLocationSync } from '@angular/router/upgrade';
import { CadastrosModule } from './angular/Cadastros/Cadastros.module';
import { MensageriaService } from './angular/core/mensageria/mensageria.service';
import { Seguranca } from './angular/seguranca/seguranca';
import { UrlHandlingStrategy, UrlTree } from '@angular/router';

declare const angular: angular.IAngularStatic;

export class Ng1Ng2UrlHandlingStrategy implements UrlHandlingStrategy {
  shouldProcessUrl(url: UrlTree): boolean {
    return url.toString().includes('v2');
  }
  extract(url: UrlTree): UrlTree { return url }
  merge(newUrlPart: UrlTree, rawUrl: UrlTree): UrlTree { return newUrlPart }
}

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    CommonModule,
    UpgradeModule,
    CadastrosModule
  ],
  declarations: [],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: HttpHandleInterceptor,
      deps: [MensageriaService, Seguranca],
      multi: true,
    },
    { provide: UrlHandlingStrategy, useClass: Ng1Ng2UrlHandlingStrategy }
  ]
})
export class RootModule {
  constructor(private upgrade: UpgradeModule) { }
  ngDoBootstrap() {
    this.upgrade.bootstrap(document.body, ['GestaoAssistenciaSocial']);
  }
}
const app = angular.module('GestaoAssistenciaSocial', [
  'ui.router.upgrade',
]);

app.config(["$urlServiceProvider", "$locationProvider", ($urlService, $locationProvider) => {
  $urlService.deferIntercept()
  $locationProvider.html5Mode(true);
}]);

platformBrowserDynamic()
  .bootstrapModule(RootModule)
  .then((platformRef) => {
    platformRef.injector.get<NgZone>(NgZone).run(() => {
      const urlService = platformRef.injector.get(UIRouter).urlService;
      const upgrade = platformRef.injector.get(UpgradeModule);
      urlService.listen();
      urlService.sync();
      setUpLocationSync(upgrade);
    });
  });

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions