bug: Cannot find module '@ionic/angular-server' or its corresponding type declarations

[samizarraa]

Prerequisites

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

Ionic Framework Version

• v4.x
• v5.x
• v6.x

Current Behavior

Error: src/app/app.server.module.ts:6:35 - error TS2307: Cannot find module '@ionic/angular-server' or its corresponding type declarations.

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

Error: src/app/app.server.module.ts:9:12 - error NG1010: Value at position 2 in the NgModule.imports of AppServerModule is not a reference Value could not be determined statically.

Expected Behavior

Angular SSR

Steps to Reproduce

npm run dev:ssr

Code Reproduction URL

No response

Ionic Info

No response

Additional Information

Angular 13

[maslaw]

Just ran into this same problem

[thiboot]

Same problem here @angular 13.0.3, @ionic/[email protected], @ionic/[email protected]

[ionitron-bot]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[thiboot]

To reproduce, just follow the guide : https://ionicframework.com/blog/ssr-with-angular-universal-and-ionic

@Ionitron
A sandbox here: https://codesandbox.io/s/serene-haze-tzwqx?file=/src/app/app.server.module.ts

[CoooWeee]

same issue here:
"@ionic/angular": "^6.0.3",
"@ionic/angular-server": "^6.0.3",
"@angular/**": "^13.1.3",

[thiboot]

Problem still persist after update to 6.0.4
"@ionic/angular": "6.0.4",
"@ionic/angular-server": "6.0.4",

[jicasada]

In the meantime you can use the code from Ionic Server Module (https://github.com/ionic-team/ionic-framework/blob/main/packages/angular-server/src/ionic-server-module.ts) directly at your own code. Although it's not working with version 6.0.x of ionic/core anyway.

It works with version 5.9.3.

With version 6.0.x you get a hydrateDocument error:

ReferenceError: Cannot access 'ActionSheet' before initialization
    at hydrateAppClosure (/tmp/ionic/test-angular/dist/app/server/main.js:43979:85)
    at hydrateFactory (/tmp/ionic/test-angular/dist/app/server/main.js:73726:3)
    at render (/tmp/ionic/test-angular/dist/app/server/main.js:73999:10)
    at /tmp/ionic/test-angular/dist/app/server/main.js:73928:65
    at new ZoneAwarePromise (/tmp/ionic/test-angular/dist/app/server/main.js:156565:23)
    at hydrateDocument (/tmp/ionic/test-angular/dist/app/server/main.js:73920:34)
    at /tmp/ionic/test-angular/dist/app/server/main.js:158197:84
    at /tmp/ionic/test-angular/dist/app/server/main.js:252680:36
    at ZoneDelegate.invoke (/tmp/ionic/test-angular/dist/app/server/main.js:155471:160)
    at Zone.run (/tmp/ionic/test-angular/dist/app/server/main.js:155197:37)

Which is a different bug. It is not appropriate to discuss it in this thread.
[Github example] (url)https://github.com/jicasada/ionicframework-bug-24605

[liamdebeasi]

Thanks! I can reproduce this. Here is a dev build with a fix if anyone is interested in testing:

npm install @ionic/[email protected] @ionic/[email protected]

As for the Action sheet error, that was fixed via #24681.

[liamdebeasi]

I found an additional bug, but I have fixed it. I placed a new dev build in the comment above for testing. Thanks!

[liamdebeasi]

Thanks for the issue. This has been resolved via #24701, and a fix will be available in an upcoming release of Ionic Framework.

Please feel free to continue testing the dev build above.

[samizarraa]

Hi, I tried DEV version on fresh install and got 2 issues, I will do deep test soon:

Issues:

ReferenceError: Cannot access 'ActionSheet' before initialization
10 rules skipped due to selector errors:

:host-context([dir=rtl]) .ion-float-start -> subselects_1.subselects[name] is not a function
:host-context([dir=rtl]) .ion-float-end -> subselects_1.subselects[name] is not a function
:host-context([dir=rtl]) .ion-float-sm-start -> subselects_1.subselects[name] is not a function
:host-context([dir=rtl]) .ion-float-sm-end -> subselects_1.subselects[name] is not a function
:host-context([dir=rtl]) .ion-float-md-start -> subselects_1.subselects[name] is not a function
:host-context([dir=rtl]) .ion-float-md-end -> subselects_1.subselects[name] is not a function
:host-context([dir=rtl]) .ion-float-lg-start -> subselects_1.subselects[name] is not a function
:host-context([dir=rtl]) .ion-float-lg-end -> subselects_1.subselects[name] is not a function
:host-context([dir=rtl]) .ion-float-xl-start -> subselects_1.subselects[name] is not a function
:host-context([dir=rtl]) .ion-float-xl-end -> subselects_1.subselects[name] is not a function

[samizarraa]

Hi,
after a second test and despite the above two issues, it seems that the module is not working properly.
After server render page source has some CSS code without content:

<app-root _nghost-sc141="" ng-version="[13.2.1]()"><ion-app _ngcontent-sc141="" dir="[rtl]()"><ion-split-pane _ngcontent-sc141="" when="[min-width: 3841px]()" contentid="[main-content]()" ng-reflect-when="[min-width: 3841px]()" ng-reflect-content-id="[main-content]()"><ion-menu _ngcontent-sc141="" contentid="[main-content]()" type="[overlay]()" ng-reflect-content-id="[main-content]()" ng-reflect-type="[overlay]()"><ion-header _ngcontent-sc141=""><ion-toolbar _ngcontent-sc141="" color="[primary]()" ng-reflect-color="[primary]()"><ion-title _ngcontent-sc141="">Main menu</ion-title></ion-toolbar></ion-header><ion-content _ngcontent-sc141="" fullscreen="" ng-reflect-fullscreen=""><!--bindings={
  "ng-reflect-ng-if": null
}--><ion-list _ngcontent-sc141="" lines="[none]()" class="[ion-padding-bottom]()" ng-reflect-lines="[none]()"><ion-list-header _ngcontent-sc141="">Our apps</ion-list-header><!--bindings={
  "ng-reflect-ng-for-of": null
}--></ion-list><!--bindings={
  "ng-reflect-ng-if": "true"
}--><!--bindings={
  "ng-reflect-ng-if": null
}--></ion-content></ion-menu><ion-router-outlet _ngcontent-sc141="" id="[main-content]()"><app-single _nghost-sc164="" class="[ion-page ion-page-invisible]()"><!--bindings={
  "ng-reflect-ng-if": null
}--></app-single></ion-router-outlet><!--container--></ion-split-pane></ion-app><!--bindings={
  "ng-reflect-ng-if": "false"
}--></app-root>

But I can see the page correctly on browser.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.