Can't load a module in iOS after upgrading to webpack

[cerealexx]

Environment Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

• CLI: 5.4.0
• Android Runtime: 5.4.0
• iOS Runtime: 5.4.1
• Plugin(s): "nativescript-barcodescanner": "^3.1.3", "nativescript-checkbox": "^3.0.3", "nativescript-facebook": "^2.2.2", "nativescript-fcuuid": "^1.0.2", "nativescript-iqkeyboardmanager": "^1.3.0", "nativescript-localstorage": "^1.1.5", "nativescript-mixpanel": "^2.0.1", "nativescript-ngx-shadow": "^6.1.0", "nativescript-ngx-slides": "^6.1.0", "nativescript-orientation": "^2.2.1", "nativescript-pedometer": "^2.0.2", "nativescript-plugin-firebase": "^8.3.2", "nativescript-speech-recognition": "^1.4.1", "nativescript-texttospeech": "^2.0.2", "nativescript-theme-core": "~1.0.4", "nativescript-toasty": "^1.3.0", "nativescript-ui-gauge": "^3.7.1", "nativescript-ui-sidedrawer": "^5.0.0",
• NativeScript-Angular: 6.0.0
• Angular: 6.0.0

Describe the bug Since the project was upgraded to webpack, when navigating to a concrete module the console returns Error: Cannot find 'ForMeModule' in '~/for-me/for-me.module' It is a lazy loaded module, it is imported as all the other route modules which work fine and the error only happens in iOS.

app.routing.ts

import { NgModule } from "@angular/core";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { Routes, PreloadAllModules } from "@angular/router";
import { LocalizationResolve } from "~/services/l10n.service";

const routes: Routes = [
    { path: "", redirectTo: "/splash", pathMatch: "full", resolve: { localization: LocalizationResolve } },
    { path: "login", loadChildren: "~/login/login.module#LoginModule", resolve: { localization: LocalizationResolve } },
    { path: "user", loadChildren: "~/user/user.module#UserModule", resolve: { localization: LocalizationResolve }},
    { path: "products", loadChildren: "~/products/home/home.module#HomeModule", resolve: { localization: LocalizationResolve }},
    { path: "categories", loadChildren: "~/products/categories/categories.module#CategoriesModule", resolve: { localization: LocalizationResolve }},
    { path: "list", loadChildren: "~/products/list/list.module#ListModule", resolve: { localization: LocalizationResolve }},
    { path: "splash", loadChildren: "~/splash/splash.module#SplashModule", resolve: { localization: LocalizationResolve }},
    { path: "for-me", loadChildren: "~/for-me/for-me.module#ForMeModule", resolve: { localization: LocalizationResolve }},
    { path: "scan", loadChildren: "~/scan/scan.module#ScanModule", resolve: { localization: LocalizationResolve }}
];

@NgModule({
    imports: [NativeScriptRouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })],
    exports: [NativeScriptRouterModule]
})
export class AppRoutingModule { }

for-me.module.ts

import { TipComponent } from '~/shared/tip-modal/tip.component';
import { L10nModule } from '@localization/l10n';
import { ForMeComponent } from '~/for-me/for-me.component';
import { ForMeRoutingModule } from '~/for-me/for-me.routing';
import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptCommonModule } from "nativescript-angular/common";
import { DirectivesModule } from '~/directives/directives.module';
import { NativeScriptUISideDrawerModule } from "nativescript-ui-sidedrawer/angular";
import { TipsService } from '~/services/tips.service';
import { NativeScriptFormsModule } from 'nativescript-angular/forms';
import { SharedModule } from '~/shared/shared.module';

@NgModule({
    imports: [
        ForMeRoutingModule,
        NativeScriptCommonModule,
        DirectivesModule,
        NativeScriptUISideDrawerModule,
        NativeScriptFormsModule,
        L10nModule,
        SharedModule
    ],
    declarations: [
        ForMeComponent
    ],
    providers: [
        TipsService
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ], 
    entryComponents: [
        TipComponent
    ]
})

export class ForMeModule { }

for-me.routing.ts

import { NgModule } from "@angular/core";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { Routes } from "@angular/router";
import { ForMeComponent } from "~/for-me/for-me.component";

const routes: Routes = [
    { path: "", component: ForMeComponent },
    { path: "recipe/:recipe", loadChildren: "~/for-me/recipe/recipe.module#RecipeModule" }
];

@NgModule({
    imports: [NativeScriptRouterModule.forChild(routes)],
    exports: [NativeScriptRouterModule]
})
export class ForMeRoutingModule { }

To Reproduce

Tap on any link to for-me route.

Expected behavior

Load the view.

[tsonevn]

Hi @cerealexx, I checked your case with our sdk example, however, was unable to recreate such an issue. Can you send us a sample project, that can be used for recreating the problem?

[cerealexx]

Hey @tsonevn. Unfortunately this is production app. I cannot send the code. I already knew you wouldn't be able to recreate it just with the module code I added since it makes no sense that it doesn't work and I'm not able myself. But it's really weird that this only happens in iOS, only with this module and only after upgrading NS to use webpack. I just hoped for a clue to try to find the problem by myself providing this info. Thanks anyway.

[cerealexx]

I isolated the bug until I found there is some kind of incompatibility with the Text to Speech plugin. The error thrown was really cryptic though and seemed to had to do with module routing and webpack. Everything is good now, thanks.

[tsonevn]

Hi @cerealexx, In my opinion, we can close this issue for now. We can reopen it when we have a stable way to reproduce the problem.