[Angular + Capacitor (without Ionic)] "Cannot destructure property 'routes' of '(intermediate value)` as it is undefined"

[gxolin]

I'm running a small angular application, with capacitor enabled for ios/android, and everything worked fine until I import this plugin.

Context : I'm totally new to the capacitor/cordova development but I have a significant angular app running. I'm making a small test app with cordova edit: Capacitor to investigate the possibility to add capacitor & in-app purchases to build my app for native markets. I can't remove or disable some angular features like SSR, because they are critical for my application.

Observed behavior

When I'm in a .ts file, when I add any of those two imports :

import 'cordova-plugin-purchase';
import 'cordova-plugin-purchase/www/store'

I can't build my application anymore :

> ng build
An unhandled exception occurred: Cannot destructure property 'routes' of '(intermediate value)' as it is undefined.
See "/tmp/ng-hmbK49/angular-errors.log" for further details.

> cat /tmp/ng-hmbK49/angular-errors.log
[error] TypeError: Cannot destructure property 'routes' of '(intermediate value)' as it is undefined.
    at getAllRoutes (/home/[...]/node_modules/@angular/build/src/utils/server-rendering/prerender.js:185:21)
    at async prerenderPages (/home/[...]/node_modules/@angular/build/src/utils/server-rendering/prerender.js:52:84)
    at async executePostBundleSteps (/home/[...]/node_modules/@angular/build/src/builders/application/execute-post-bundle.js:62:83)
    at async executeBuild (/home/[...]/node_modules/@angular/build/src/builders/application/execute-build.js:115:24)
    at async watch (/home/[...]/node_modules/@angular/build/src/builders/application/index.js:70:24)
    at async Task.task [as taskFn] (/home/[...]/node_modules/@angular/build/src/tools/esbuild/utils.js:126:26)
    at async Task.run (/home/[...]/node_modules/listr2/dist/index.cjs:2143:11)

(Removing this import allows the build to complete without errors)

Note : When using ng serve, the code compiles as expected.

Expected behavior

no errors during build

System Info

my (simplified) package.json :

{
  "name": "XXX",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "build-and-serve-android": "ng build --configuration development && npx cap sync && npx cap run android",
    "build-and-serve-ios": "ng build --configuration development && npx cap sync && npx cap run ios"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^18.2.0",
    "@angular/common": "^18.2.0",
    "@angular/compiler": "^18.2.0",
    "@angular/core": "^18.2.0",
    "@angular/forms": "^18.2.0",
    "@angular/platform-browser": "^18.2.0",
    "@angular/platform-browser-dynamic": "^18.2.0",
    "@angular/platform-server": "^18.2.0",
    "@angular/router": "^18.2.0",
    "@angular/service-worker": "^18.2.0",
    "@angular/ssr": "^18.2.5",
    "@capacitor/android": "^6.1.2",
    "@capacitor/angular": "^2.0.3",
    "@capacitor/core": "latest",
    "@capacitor/ios": "^6.1.2",
    "cordova-plugin-purchase": "^13.11.1",
    "express": "^4.18.2",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.10"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^18.2.5",
    "@angular/cli": "^18.2.5",
    "@angular/compiler-cli": "^18.2.0",
    "@capacitor/cli": "latest",
    "@types/express": "^4.17.17",
    "@types/jasmine": "~5.1.0",
    "@types/node": "^18.18.0",
    "jasmine-core": "~5.2.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.5.2"
  }
}

Output of cordova info.

> cordova info
cordova: command not found

> node -v
v20.13.1
> npm -v
10.9.0
> ng --version
18.2.7

[j3k0]

Would you mind sharing your small test app (in a git repository, or archive)? This way I don't have to recreate one in order to attempt to reproduce this (I don't have a capacitor + angular project ready to test this). Thanks!

[gxolin]

sure, I have some proprietary code at the moment, I'll try to make a cleaned up version as soon as possible, thanks

[gxolin]

@j3k0

> git clone [email protected]:gxolin/test.git
> cd test/
> npm i

launching ng build
should crash with :

> ng build
An unhandled exception occurred: Cannot destructure property 'routes' of '(intermediate value)' as it is undefined.
See "/tmp/ng-L2Kqxa/angular-errors.log" for further details.

Custom code not generated by angular/capacitor installation :

• updated paths in test/capacitor.config.ts to match angular output dir
• adding build-and-serve-android alias in test/package.json
• creating 1 abstract and 2 classes : test/src/app/services/iap.service.ts and it's iap-browser.service.ts and iap-node.service.ts implementations. This ensure i won't ever call iap code on my backend server while rendering SSR.
• registering iap-browser service in browser code : test/src/app/app.config.ts { provide: IapService, useClass: IapBrowserService }
• registering iap-node service in backend code : test/src/app/app.config.server.ts { provide: IapService, useClass: IapNodeService }
• just adding the import 'cordova-plugin-purchase'; here : test/src/app/services/iap.service.ts

let me know if you need something else or if I can help !

[gxolin]

It's not ideal, but as a workaround in the meantime, i've pushed a PR to the awesome-cordova-plugins repository (see mention just above).
I don't know how all of this works, but apparently the way awesome-cordova import the scripts don't throw the error mentioned before.

(Note for visitors : my workaround, is only lightly tested, I'm new to both capacitor and cordova-plugin-purchase. I'll test it more thoughtfully in the next days, I'm working on a angular + capacitor in app purchase integration.)