ionic-framework: bug: angular, cannot read property of 'whenDefined' with ssr

Any updates?

Hi @liamdebeasi are there any work in progress on this issue? Or maybe an idea on how it should be fixed?

It is reproducible by following https://ionicframework.com/blog/ssr-with-angular-universal-and-ionic/ but with the sidemenu starter instead of blank. So you do:

1. Create the project

ionic start myApp sidemenu --type angular
cd myApp
npm install @angular/animations
ng add @nguniversal/express-engine
npm install @ionic/angular-server

(you might need to run npx ionic start ...)

2. Enable Ionic SSR

And updating app.server.module.ts with:

 import { NgModule } from '@angular/core';
 import { ServerModule } from '@angular/platform-server';
 import { AppModule } from './app.module';
 import { AppComponent } from './app.component';

+ import { IonicServerModule } from '@ionic/angular-server';

 @NgModule({
   imports: [
     AppModule,
     ServerModule,
+    IonicServerModule
   ],
   bootstrap: [AppComponent],
 })
 export class AppServerModule {}

3. Run

Build & serve the application with:

npm run build:ssr
npm run serve:ssr

(npm run dev:ssr is broken because some of the angular.json is missing a development configuration)

4. Visit localhost:4000

When you visit localhost with javascript off (on chrome, Ctrl + Shift + P and run the “disable javascript” action), you will not see the sidebar. If you enable javascript, you will see the sidebar) The error logged to the console is:

unhandledRejection TypeError: Cannot read properties of null (reading 'whenDefined')
    at [hidden]\myApp\dist\app\server\main.js:1:1639791
    at Generator.next (<anonymous>)
    at asyncGeneratorStep ([hidden]\myApp\dist\app\server\main.js:1:3331301)
    at _next ([hidden]\myApp\dist\app\server\main.js:1:3331604)
    at [hidden]\myApp\dist\app\server\main.js:1:3331800
    at new ZoneAwarePromise ([hidden]\myApp\dist\app\server\main.js:1:3303629)
    at [hidden]\myApp\dist\app\server\main.js:1:3331516
    at SplitPane.connectedCallback ([hidden]\myApp\dist\app\server\main.js:1:1639871)
    at safeCall$1 ([hidden]\myApp\dist\app\server\main.js:1:596714)
    at fireConnectedCallback ([hidden]\myApp\dist\app\server\main.js:1:601780)

I hope this helps 🙂

Hello Liam, thanks again for your support. I’ve cloned my repo (I’ve made for reproduction in my folder, in order to assure it was working, before submitting to you.), tried installing the dev packages, got a dependency error, though (please, find the logs below). I was able to install the dependencies (first the @ionic/angular, then @ionic/angular-server with --force argument). I’ve got some errors, deleted node_modules and package-lock.json, run npm install again, and in order for it to work I had to use --force argument too. Then it installed correctly, the code run, but so far, I’m still getting this error in browser console: Uncaught SyntaxError: Strict mode code may not include a with statement. I’m also getting this error in server console:

TypeError: Cannot read properties of null (reading 'whenDefined') The ion-menu-button doesn’t show its icon and also is not working. I’m pretty sure that’s not my code fault, since with regular npm run start command it does.

Please let me know if you need anything else from me, and again, thanks for your support.

ps.: I’ve updated the repo with latest changes

---------- npm install full log

0 verbose cli [
0 verbose cli   '/home/dina/.nvm/versions/node/v16.13.2/bin/node',
0 verbose cli   '/home/dina/.nvm/versions/node/v16.13.2/bin/npm',
0 verbose cli   'install',
0 verbose cli   '@ionic/angular@6.0.6-dev.1643984927.f5c5c3c',
0 verbose cli   '@ionic/angular-server@6.0.6-dev.1643984927.f5c5c3c'
0 verbose cli ]
1 info using npm@8.1.2
2 info using node@v16.13.2
3 timing npm:load:whichnode Completed in 0ms
4 timing config:load:defaults Completed in 1ms
5 timing config:load:file:/home/dina/.nvm/versions/node/v16.13.2/lib/node_modules/npm/npmrc Completed in 1ms
6 timing config:load:builtin Completed in 1ms
7 timing config:load:cli Completed in 0ms
8 timing config:load:env Completed in 1ms
9 timing config:load:file:/home/dina/dev/apps/confraria-do-temaki/confraria-do-temaki-app/test repo/confraria/.npmrc Completed in 0ms
10 timing config:load:project Completed in 0ms
11 timing config:load:file:/home/dina/.npmrc Completed in 0ms
12 timing config:load:user Completed in 0ms
13 timing config:load:file:/home/dina/.nvm/versions/node/v16.13.2/etc/npmrc Completed in 0ms
14 timing config:load:global Completed in 1ms
15 timing config:load:validate Completed in 0ms
16 timing config:load:credentials Completed in 0ms
17 timing config:load:setEnvs Completed in 1ms
18 timing config:load Completed in 5ms
19 timing npm:load:configload Completed in 5ms
20 timing npm:load:setTitle Completed in 0ms
21 timing npm:load:setupLog Completed in 0ms
22 timing config:load:flatten Completed in 2ms
23 timing npm:load:cleanupLog Completed in 1ms
24 timing npm:load:configScope Completed in 0ms
25 timing npm:load:projectScope Completed in 1ms
26 timing npm:load Completed in 9ms
27 timing arborist:ctor Completed in 1ms
28 verbose shrinkwrap failed to load node_modules/.package-lock.json out of date, updated: node_modules
29 timing idealTree:init Completed in 426ms
30 timing idealTree:userRequests Completed in 4ms
31 silly idealTree buildDeps
32 silly fetch manifest @ionic/angular@6.0.6-dev.1643984927.f5c5c3c
33 http fetch GET 200 https://registry.npmjs.org/@ionic%2fangular 1070ms (cache revalidated)
34 silly fetch manifest @angular/core@~13.1.0
35 http fetch GET 200 https://registry.npmjs.org/@angular%2fcore 45ms (cache revalidated)
36 silly fetch manifest rxjs@~7.4.0
37 http fetch GET 200 https://registry.npmjs.org/rxjs 41ms (cache revalidated)
38 silly fetch manifest zone.js@~0.11.4
39 http fetch GET 200 https://registry.npmjs.org/zone.js 36ms (cache revalidated)
40 silly fetch manifest @angular/forms@~13.1.0
41 http fetch GET 200 https://registry.npmjs.org/@angular%2fforms 1748ms (cache revalidated)
42 silly fetch manifest @angular/common@~13.1.0
43 http fetch GET 200 https://registry.npmjs.org/@angular%2fcommon 51ms (cache revalidated)
44 silly fetch manifest @angular/platform-browser@~13.1.0
45 http fetch GET 200 https://registry.npmjs.org/@angular%2fplatform-browser 56ms (cache revalidated)
46 silly fetch manifest @angular/animations@~13.1.0
47 http fetch GET 200 https://registry.npmjs.org/@angular%2fanimations 45ms (cache revalidated)
48 silly fetch manifest @angular/router@~13.1.0
49 http fetch GET 200 https://registry.npmjs.org/@angular%2frouter 1714ms (cache revalidated)
50 silly fetch manifest @ionic/angular-server@6.0.6-dev.1643984927.f5c5c3c
51 http fetch GET 200 https://registry.npmjs.org/@ionic%2fangular-server 301ms (cache revalidated)
52 silly fetch manifest @angular/platform-server@~13.1.0
53 http fetch GET 200 https://registry.npmjs.org/@angular%2fplatform-server 48ms (cache revalidated)
54 silly fetch manifest @angular/compiler@~13.1.0
55 http fetch GET 200 https://registry.npmjs.org/@angular%2fcompiler 53ms (cache revalidated)
56 silly fetch manifest @angular/platform-browser-dynamic@~13.1.0
57 http fetch GET 200 https://registry.npmjs.org/@angular%2fplatform-browser-dynamic 45ms (cache revalidated)
58 silly fetch manifest @ionic/angular@^6.0.2
59 timing idealTree Completed in 5751ms
60 timing command:install Completed in 5759ms
61 verbose stack Error: unable to resolve dependency tree
61 verbose stack     at Arborist.[failPeerConflict] (/home/dina/.nvm/versions/node/v16.13.2/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:1356:25)
61 verbose stack     at Arborist.[loadPeerSet] (/home/dina/.nvm/versions/node/v16.13.2/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:1322:34)
61 verbose stack     at async Arborist.[buildDepStep] (/home/dina/.nvm/versions/node/v16.13.2/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:930:11)
61 verbose stack     at async Arborist.buildIdealTree (/home/dina/.nvm/versions/node/v16.13.2/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:216:7)
61 verbose stack     at async Promise.all (index 1)
61 verbose stack     at async Arborist.reify (/home/dina/.nvm/versions/node/v16.13.2/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/reify.js:149:5)
61 verbose stack     at async Install.install (/home/dina/.nvm/versions/node/v16.13.2/lib/node_modules/npm/lib/install.js:170:5)
62 verbose cwd /home/dina/dev/apps/confraria-do-temaki/confraria-do-temaki-app/test repo/confraria
63 verbose Linux 5.13.0-28-generic
64 verbose argv "/home/dina/.nvm/versions/node/v16.13.2/bin/node" "/home/dina/.nvm/versions/node/v16.13.2/bin/npm" "install" "@ionic/angular@6.0.6-dev.1643984927.f5c5c3c" "@ionic/angular-server@6.0.6-dev.1643984927.f5c5c3c"
65 verbose node v16.13.2
66 verbose npm  v8.1.2
67 error code ERESOLVE
68 error ERESOLVE unable to resolve dependency tree
69 error
70 error While resolving: confraria@0.0.0
70 error Found: @ionic/angular@6.0.6-dev.1643984927.f5c5c3c
70 error node_modules/@ionic/angular
70 error   @ionic/angular@"6.0.6-dev.1643984927.f5c5c3c" from the root project
70 error
70 error Could not resolve dependency:
70 error peer @ionic/angular@"^6.0.2" from @ionic/angular-server@6.0.6-dev.1643984927.f5c5c3c
70 error node_modules/@ionic/angular-server
70 error   @ionic/angular-server@"6.0.6-dev.1643984927.f5c5c3c" from the root project
70 error
70 error Fix the upstream dependency conflict, or retry
70 error this command with --force, or --legacy-peer-deps
70 error to accept an incorrect (and potentially broken) dependency resolution.
70 error
70 error See /home/dina/.npm/eresolve-report.txt for a full report.
71 verbose exit 1

Yes this works for my case in a pure stencil-ionic app with npm install @ionic/core@6.5.7-dev.11677189602.12905db0. Now the ssg works in this case. I do not have any projects with angular and ssg. Thanks!

Any idea when this will be resolved? It’s a bummer not to have SSR. Bing apparently doesn’t like rendering SPAs and refuses to index my site