bug: Blank-screen while launching app on iOS 16

[corentinmenoux]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

I'm trying to upgrade my ionic/capacitor/angular app to ionic 7 / Angular 16. Since upgrade, i can't launch my app on iOS 16 (16.2) in my case. I got this error in XCode when launching app :

⚡️  ------ STARTUP JS ERROR ------

⚡️  SyntaxError: Unexpected token '{'
⚡️  URL: capacitor://localhost/main.js
⚡️  [error] - {"line":10767,"sourceURL":"capacitor://localhost/main.js"}
⚡️  main.js:10767:0

At this line, we have "static {" :

let AppRoutingModule = /*#__PURE__*/(() => {
  class AppRoutingModule {
    static {
      this.ɵfac = function AppRoutingModule_Factory(t) {
        return new (t || AppRoutingModule)();
      };
    }
    static {
      this.ɵmod = /*@__PURE__*/_angular_core__WEBPACK_IMPORTED_MODULE_1__["ɵɵdefineNgModule"]({
        type: AppRoutingModule
      });
    }
    static {
      this.ɵinj = /*@__PURE__*/_angular_core__WEBPACK_IMPORTED_MODULE_1__["ɵɵdefineInjector"]({
        imports: [_angular_router__WEBPACK_IMPORTED_MODULE_2__.RouterModule.forRoot(routes, {
          preloadingStrategy: _angular_router__WEBPACK_IMPORTED_MODULE_2__.PreloadAllModules
        }), _angular_router__WEBPACK_IMPORTED_MODULE_2__.RouterModule]
      });
    }
  }
  return AppRoutingModule;
})();
(function () {
  (typeof ngJitMode === "undefined" || ngJitMode) && _angular_core__WEBPACK_IMPORTED_MODULE_1__["ɵɵsetNgModuleScope"](AppRoutingModule, {
    imports: [_angular_router__WEBPACK_IMPORTED_MODULE_2__.RouterModule],
    exports: [_angular_router__WEBPACK_IMPORTED_MODULE_2__.RouterModule]
  });
})();

This part of generated code is related to app-routing.module.ts :

import { inject, NgModule } from '@angular/core'
import { PreloadAllModules, RouterModule, Routes } from '@angular/router'
import { AuthService } from '@core/auth/auth.service'

const routes: Routes = [
    {
        path: 'auth',
        loadChildren: () =>
            import('./auth/auth.module').then((m) => m.AuthModule),
    },
    {
        path: '',
        loadChildren: () =>
            import('./private/private.module').then((m) => m.PrivateModule),
        canMatch: [() => inject(AuthService).checkIfLoggedIn()],
        canActivate: [() => inject(AuthService).checkIfLoggedIn()],
        canActivateChild: [() => inject(AuthService).checkIfLoggedIn()],
    },
]

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

I can't figure out why generated code is working in 17+ iOS versions but not in iOS 16.

Expected Behavior

App launch correctly without being stuck on blank-screen.

Steps to Reproduce

1. Ionic/Capacitor/Angular app with any app-routing.module.ts inside it.
2. ionic capacitor build ios --configuration=hmr
3. Try launch app on real iOS device with Xcode
4. Look inside Xcode console.

Code Reproduction URL

incoming...

Ionic Info

Ionic:

   Ionic CLI                     : 7.2.0 (/Users/cmenoux/.nvm/versions/node/v18.20.2/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 7.8.6
   @angular-devkit/build-angular : 16.2.14
   @angular-devkit/schematics    : 16.2.14
   @angular/cli                  : 16.2.14
   @ionic/angular-toolkit        : 10.0.0

Capacitor:

   Capacitor CLI      : 6.1.1
   @capacitor/android : 6.1.1
   @capacitor/core    : 6.1.1
   @capacitor/ios     : 6.1.1

Utility:

   cordova-res : not installed globally
   native-run  : 2.0.1

System:

   NodeJS : v18.20.2 (/Users/cmenoux/.nvm/versions/node/v18.20.2/bin/node)
   npm    : 10.5.0
   OS     : macOS Unknown

Additional Information

I have another ionic/capacitor/angular app that have the same "app-routing.module.ts" structure :

import { inject, NgModule } from '@angular/core'
import {
    ActivatedRouteSnapshot,
    PreloadAllModules,
    RouterModule,
    Routes,
} from '@angular/router'
import { TutorialService } from '@services/tutorial/tutorial.service'

const routes: Routes = [
    {
        path: '',
        loadChildren: () =>
            import('src/app/pages/tabs/tabs.module').then((m) => m.TabsModule),
        canMatch: [() => inject(TutorialService).isTutorialDone()],
        canActivate: [() => inject(TutorialService).isTutorialDone()],
        canActivateChild: [() => inject(TutorialService).isTutorialDone()],
    },
]

@NgModule({
    imports: [
        RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }),
    ],
    exports: [RouterModule],
    providers: [
        {
            provide: 'externalUrlRedirectResolver',
            useValue: (route: ActivatedRouteSnapshot) => {
                window.location.href = route.data.externalUrl
            },
        },
    ],
})
export class AppRoutingModule {}

and is compiled in main.js to :

let AppRoutingModule = /*#__PURE__*/(() => {
  var _class;
  class AppRoutingModule {}
  _class = AppRoutingModule;
  _class.ɵfac = function AppRoutingModule_Factory(t) {
    return new (t || _class)();
  };
  _class.ɵmod = /*@__PURE__*/_angular_core__WEBPACK_IMPORTED_MODULE_1__["ɵɵdefineNgModule"]({
    type: _class
  });
  _class.ɵinj = /*@__PURE__*/_angular_core__WEBPACK_IMPORTED_MODULE_1__["ɵɵdefineInjector"]({
    providers: [{
      provide: 'externalUrlRedirectResolver',
      useValue: route => {
        window.location.href = route.data.externalUrl;
      }
    }],
    imports: [_angular_router__WEBPACK_IMPORTED_MODULE_2__.RouterModule.forRoot(routes, {
      preloadingStrategy: _angular_router__WEBPACK_IMPORTED_MODULE_2__.PreloadAllModules
    }), _angular_router__WEBPACK_IMPORTED_MODULE_2__.RouterModule]
  });
  return AppRoutingModule;
})();
(function () {
  (typeof ngJitMode === "undefined" || ngJitMode) && _angular_core__WEBPACK_IMPORTED_MODULE_1__["ɵɵsetNgModuleScope"](AppRoutingModule, {
    imports: [_angular_router__WEBPACK_IMPORTED_MODULE_2__.RouterModule],
    exports: [_angular_router__WEBPACK_IMPORTED_MODULE_2__.RouterModule]
  });
})();

that works perfectly in iOS 16. Why this two differents codes don't have the same generated code structure (all packages versions are the pretty much the same) ?