Problem with Initial Navigation in RouterModule

[DavidCMeier]

I'm submitting a ... (check one with "x")

[X] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if similar feature request does not exist
[ ] support request => Suggested place for help and support is [stackoverflow](https://stackoverflow.com/), search for similar question before posting

Description

When we use InitialNavigation: 'enabled' our routings (without using universal) doesn't work. Just work with Universal.

🔬 Minimal Reproduction (if applicable)

app-routing.module.ts

export class LocalizeBrowserLoader extends LocalizeParser {
  inited = false

  constructor(translate: TranslateService,
              location: Location,
              settings: LocalizeRouterSettings,
              public transferState: TransferState,
  ) {
    super(translate, location, settings)
  }

  public load(routes: Routes): Promise<any> {
    if (this.inited) return // <-- We do that because load is running twice time and the second time have just 2 routes.
    const ROUTES_KEY = makeStateKey('ROUTES')
    const {locales, prefix} = this.transferState.get(ROUTES_KEY, null)
    this.locales = locales
    this.prefix = prefix
    this.inited = true
    return this.init(routes)
  }
}

export function localizeLoaderFactory(
  translate: TranslateService,
  location: Location,
  settings: LocalizeRouterSettings,
  transferState: TransferState,
  http: HttpClient,
) {
  const ROUTES_KEY = makeStateKey('ROUTES')
  if (transferState.hasKey(ROUTES_KEY)) {
    return new LocalizeBrowserLoader(translate, location, settings, transferState)
  }
  return new LocalizeRouterHttpLoader(translate, location, settings, http)
}

@NgModule({
  imports: [
    LocalizeRouterModule.forRoot(routes, {
      parser: {
        provide: LocalizeParser,
        useFactory: localizeLoaderFactory,
        deps: [TranslateService, Location, LocalizeRouterSettings, TransferState, HttpClient],
      },
    }),
    RouterModule.forRoot(routes, {initialNavigation: 'enabled'}),

  ],
  exports: [RouterModule],

})

🌍 Your Environment

Angular Version:

Angular CLI: 8.0.1
Node: 12.13.0
OS: darwin x64
Angular: 8.0.0
... animations, cdk, common, compiler, compiler-cli, core, forms
... language-service, material, material-moment-adapter, router

Package                                    Version
--------------------------------------------------------------------
@angular-devkit/architect                  0.800.1
@angular-devkit/build-angular              0.800.1
@angular-devkit/build-optimizer            0.800.1
@angular-devkit/build-webpack              0.800.1
@angular-devkit/core                       8.0.1
@angular-devkit/schematics                 8.0.1
@angular/cli                               8.0.1
@angular/platform-browser                  8.2.14
@angular/platform-browser-dynamic          8.2.14
@angular/platform-server                   8.2.14
@ngtools/webpack                           8.0.1
@nguniversal/common                        8.1.1
@nguniversal/express-engine                8.1.1
@nguniversal/module-map-ngfactory-loader   8.1.1
@schematics/angular                        8.0.1
@schematics/update                         0.800.1
rxjs                                       6.5.2
typescript                                 3.4.5
webpack                                    4.41.2

Localize Router Version:

    "localize-router": "^2.0.0-RC.3",
    "localize-router-http-loader": "^1.0.2",

Anything else relevant?

[DavidCMeier]

Ok, I know that is not a perfect solution but...

@NgModule({
  imports: [
    LocalizeRouterModule.forRoot(routes, {
      parser: {
        provide: LocalizeParser,
        useFactory: localizeLoaderFactory,
        deps: [TranslateService, Location, LocalizeRouterSettings, TransferState, HttpClient],
      },
    }),
    RouterModule.forRoot(routes),

  ],
  exports: [RouterModule],

})
export class AppRoutingModule {
  constructor(@Inject(ROUTER_CONFIGURATION) private config: ExtraOptions, transferState: TransferState) {
    const ROUTES_KEY = makeStateKey('ROUTES')
    if (transferState.hasKey(ROUTES_KEY)) {
      config.initialNavigation = 'enabled'
    }
    console.log('AppRoutingModule', config)
  }
}

With that code into the class of the Module, depends if we have the data into transferState or not we can modify the config.

[hymenoby]

@DavidCMeier , i have the same problem, can you please explain me how your solution works so i can try to use it?

[DavidCMeier]

hi @hymenoby of course.

When the constructor initialize we inject the ROUTER_CONFIGURATION token and if i have the KEY into the transferState is because we are on server (because we set the key on app.server.module.ts).

So if this is right, we modify the initiaNavigation to 'enable'.

Of course, probably yo can do that:

export class AppRoutingModule {
  constructor(@Inject(ROUTER_CONFIGURATION) private config: ExtraOptions, 
                        @Inject(PLATFORM_ID) private platformId: Object) {
    const ROUTES_KEY = makeStateKey('ROUTES')
   if(isPlatformServer(this.platformId) config.initialNavigation = 'enabled'
  }
}

[DavidCMeier]

Because this repo es abbandoned i close the Issue. If anybody need continue using I recomend looking for a fork like https://github.com/gilsdav/localize-router