Fix module loading to handle interaction between route preload strategy and route navigation

[pgammans]

PR Checklist

• The commit message follows our guidelines: https://github.com/angular/angular/blob/master/CONTRIBUTING.md#commit
• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

• Bugfix
• Feature

What is the current behaviour?

This PR addresses the issues found in the issues #22842, and pr #26557

It also replaces the PR for #26557 which has a number of issues

• By forcing the subscription to close if a module has a lazy sub-module then the these are passed to the PreloadingStrategy class as the observable has already terminated.
• It doesn't actually prevent the load as the fetch may overlap with the preload fetch. Ie both the pre-loader and navigation can start a load both will finish .

Issue Number: #26557, #22842

What is the new behaviour?

By Prevent loading a route module twice, we prevent the sending of multiple RouteConfigLoadEnd events, and the duplicate console log as show in the stackbiz example on #26557

We also add a new feature to SpyNgModuleFactoryLoader to enable us to emulate slow loading modules, this is required for testing.

Does this PR introduce a breaking change?

• Yes
• No

Other information / Questions

• I have a version of this based on feat(router): Add RouteConfigReady #36654
• I need to add test to enable the and support error in loading the module. Ie if the initial load request fails, the stored load-observable need to be removed so a new one is created.
• I need suggestions for the name of the private var attached to the route to store the loading observable currently named '_loader'. It attached to the route as both the preloader and router create the own instance of the RouterConfigLoader

[atscott]

The implementation is simple enough and looks relatively good to me. The tests need some work though so I'll re-review the implementation once those are redone. Please see the comments.

[atscott]

Can we flip this to be an early return instead to reduce nesting of the main path?

if (route._loader$) {
  return route._loader$;
}

[atscott]

I don't think the SpyNgModuleFactoryLoader should be extended in this way. All of your tests can simply be rewritten to spy on the load method and decide what to do on a case-by-case basis.

Additionally, the SpyNgModuleFactoryLoader should be seen as deprecated anyways because it is using the string method of lazy loading children, which is deprecated. Instead, you can rewrite the tests to use spys for the loadChildren functions like this:

    const subLoadChildrenSpy = jasmine.createSpy();
    const lazyLoadChildrenSpy = jasmine.createSpy();

{path: 'sub', loadChildren: subLoadChildrenSpy}
{path: 'lazy', loadChildren: lazyLoadChildrenSpy},

and then the following test could be:

    fit('and cope with the loader throwing exceptions',
       fakeAsync(inject(
           [RouterPreloader, Router, NgModuleRef, Compiler],
           ( preloader: RouterPreloader, router: Router) => {
             router.events.subscribe(e => {
               if (e instanceof RouteConfigLoadEnd || e instanceof RouteConfigLoadStart) {
                 events.push(e);
               }
             });


             let loadedConfig: LoadedRouterConfig;
             const c = router.config;
             loadedConfig = (c[0] as any)._loadedConfig;
             expect(loadedConfig).toBeUndefined();

             lazyLoadChildrenSpy.and.returnValue(throwError('Error: Fake module load error (expectedreload)'));

             preloader.preload().subscribe((x) => {});

             tick();
             loadedConfig = (c[0] as any)._loadedConfig;
             expect(loadedConfig).toBeUndefined();

             router.navigateByUrl('/lazy/LoadedModule1').catch((reason) => {
               expect(reason).toEqual('Error: Fake module load error (expectedreload)');
             });
             tick();
             loadedConfig = (c[0] as any)._loadedConfig;
             expect(loadedConfig).toBeUndefined();
             expect((c[0] as any)._loader$).toBeUndefined();

             lazyLoadChildrenSpy.and.returnValue(of(LoadedModule1));
             router.navigateByUrl('/lazy/LoadedModule1').catch(() => {
               expect('Not to get here').toBeUndefined('Not to throw');
             });
             tick();

             expect(events.map(e => e.toString())).toEqual([
               'RouteConfigLoadStart(path: lazy)', 'RouteConfigLoadStart(path: lazy)',
               'RouteConfigLoadEnd(path: lazy)'
             ]);
           })));

[atscott]

These tests are too complicated. Please refactor them to be more simple and limit the assertions you're making in each one. It's hard to follow what assertions you're actually making in each one. You shouldn't be needing to share so many lines of assertions and setup for each one. Additionally, these should be rewritten to not use the SpyNgModuleFactoryLoader as described below.

[atscott]

Closing due to lack of activity. If you still want to contribute a change, please open a new PR and I'd be happy to review it. Thanks!

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}