if loading chunk failed it will not work anymore

[alaa-alshamy]

Ionic version: (check one with "x")
(For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[x] 3.x
[ ] 4.x

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request

Current behavior:

if loading any chunk when using lazy loading failed for any reason (ex: lost connection for seconds) the app will not try to load it again and the page or modal will not open till the user refresh the app

Expected behavior:

the app should try to load it again

Steps to reproduce:

1- run project with lazy loading feature
2- make ur device offline
3- click on new page or modal to open (the app will try to load the chunk of that page or modal)
4- back online
5- click again on the page or modal to open (it will not open anymore)

Related code:

insert short code snippets here

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

cli packages: 

    @ionic/cli-utils  : 1.19.0
    ionic (Ionic CLI) : 3.19.0

global packages:

    cordova (Cordova CLI) : 7.1.0 

local packages:

    @ionic/app-scripts : 3.1.0
    Cordova Platforms  : android 6.3.0 ios 4.5.3
    Ionic Framework    : ionic-angular 3.9.2

System:

    Node : v6.12.2
    npm  : 3.10.10 
    OS   : Linux 4.4

Environment Variables:

    ANDROID_HOME : not set

Misc:

    backend : legacy

[longgt]

@alaa-alshamy I think your problem is coming from ionic-angular\util\module-loader.js

ModuleLoader.prototype.load = function (modulePath) {
        var _this = this;
        var splitString = modulePath.split(SPLITTER);
        var promise = this._promiseMap.get(modulePath);
        if (!promise) {
            promise = this._ngModuleLoader.load(splitString[0], splitString[1]);
            this._promiseMap.set(modulePath, promise);
        }
        return promise.then(function (loadedModule) {
            var ref = loadedModule.create(_this._injector);
            var component = ref.injector.get(LAZY_LOADED_TOKEN);
            _this._cfrMap.set(component, ref.componentFactoryResolver);
            return {
                componentFactoryResolver: ref.componentFactoryResolver,
                component: component
            };
        });
    };

Workaround for now is do another check on promise.__zone_symbol__state, if lazy chunk was loaded successfully, it will be true, in another case, it will be false. Or remove module from cache map on promise.catch.

ModuleLoader.prototype.load = function (modulePath) {
        var _this = this;
        (void 0) /* console.time */;
        var splitString = modulePath.split(SPLITTER);
        var promise = this._promiseMap.get(modulePath);
        if (!promise) {
            promise = this._ngModuleLoader.load(splitString[0], splitString[1]);
            this._promiseMap.set(modulePath, promise);
            promise.catch(function () {
                _this._promiseMap.delete(modulePath);
            });
        }
        return promise.then(function (loadedModule) {
            (void 0) /* console.timeEnd */;
            var ref = loadedModule.create(_this._injector);
            var component = ref.injector.get(LAZY_LOADED_TOKEN);
            _this._cfrMap.set(component, ref.componentFactoryResolver);
            return {
                componentFactoryResolver: ref.componentFactoryResolver,
                component: component
            };
        });
    };

[alaa-alshamy]

@longgt That's great mate, make it a PR if u tested it so it gonna be merged faster

[ionitron-bot]

This issue has been automatically identified as an Ionic 3 issue. We recently moved Ionic 3 to its own repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

If I've made a mistake, and if this issue is still relevant to Ionic 4, please let the Ionic Framework team know!

Thank you for using Ionic!

[ionitron-bot]

Issue moved to: ionic-team/ionic-v3#530