Hello all does ionic provide an updated tutorial on how to add @angular /ssr to a new ionic project?
I Found several links online that help do this but it’s outdated and do not work.
Both of these tutorials are using Modules but my project is using standalone components. but it should still work as i can import the IonicServerModule in the app.component.ts file. So as i did and run : npm run dev:ssr that i get an error in the console:
After searching i found this in this closed issue in the ionic repo that is related to my problem:
opened 07:49AM - 30 Aug 23 UTC
closed 06:57AM - 07 Dec 23 UTC
package: angular
bug: external
### Prerequisites
- [X] I have read the [Contributing Guidelines](https://githu… b.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#creating-an-issue).
- [X] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [X] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already report this problem, without success.
### Ionic Framework Version
v7.x
### Current Behavior
I have an [Angular 15 app with SSR enabled which uses Ionic 7 web components](https://github.com/slsfi/digital_edition_web_ng), and it's working fine. However, on [upgrading to Angular 16](https://github.com/slsfi/digital_edition_web_ng/tree/angular-16) (which requires zone.js 0.13.x) the `hydrateDocument` function in `IonicServerModule` throws an error on every page load in the server side terminal.
The error is:
```
Error: NotYetImplemented
at exports2.nyi (C:\Users\sebkoh\Documents\GitHub\angular16-ionic7-ssr\dist\angular16-ionic7-ssr\server\main.js:1:2944961)
at hydrateApp (C:\Users\sebkoh\Documents\GitHub\angular16-ionic7-ssr\dist\angular16-ionic7-ssr\server\main.js:1:424924)
at hydrateAppClosure (C:\Users\sebkoh\Documents\GitHub\angular16-ionic7-ssr\dist\angular16-ionic7-ssr\server\main.js:1:1747612)
at hydrateFactory (C:\Users\sebkoh\Documents\GitHub\angular16-ionic7-ssr\dist\angular16-ionic7-ssr\server\main.js:1:1747719)
at render (C:\Users\sebkoh\Documents\GitHub\angular16-ionic7-ssr\dist\angular16-ionic7-ssr\server\main.js:1:1754100)
at C:\Users\sebkoh\Documents\GitHub\angular16-ionic7-ssr\dist\angular16-ionic7-ssr\server\main.js:1:1768972
at new ZoneAwarePromise (C:\Users\sebkoh\Documents\GitHub\angular16-ionic7-ssr\dist\angular16-ionic7-ssr\server\main.js:1:2509981)
at hydrateDocument (C:\Users\sebkoh\Documents\GitHub\angular16-ionic7-ssr\dist\angular16-ionic7-ssr\server\main.js:1:1768620)
at C:\Users\sebkoh\Documents\GitHub\angular16-ionic7-ssr\dist\angular16-ionic7-ssr\server\main.js:1:4033488
at C:\Users\sebkoh\Documents\GitHub\angular16-ionic7-ssr\dist\angular16-ionic7-ssr\server\main.js:1:3245560
```
Also, it looks like the Ionic components are not rendered properly on the server. In the html response from the SSR an `<ion-button>` element, for instance, is just like in the html template. There's no shadow-root, inner `<button>` element, slots etc.
This is not just a problem in my app, but a general one if you create a new Angular 16 app, enable SSR in it and add Ionic 7 to it (see steps to reproduce below).
### Expected Behavior
No runtime errors in the server side terminal. Ionic components to render properly on the server.
### Steps to Reproduce
1. Create a new Angular 16 app following the official Angular guide https://angular.io/guide/setup-local. Start by opening a terminal window and running `npm install -g @angular/cli`
2. Run `ng new my-app` to create a new Angular 16 app named "my-app" (or anything). When asked about adding Angular routing answer yes.
3. Navigate to the app folder: `cd my-app`
4. Enable SSR (Angular Universal) following the official guide https://angular.io/guide/universal, i.e. run `ng add @nguniversal/express-engine`
5. Add Ionic 7 to dependencies in `package.json`:
```
"@ionic/angular": "^7.3.1",
"@ionic/angular-server": "^7.3.1",
```
6. Run `npm install`
7. Open `app.module.ts` and import IonicModule, so the file becomes:
```
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicModule } from '@ionic/angular';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
IonicModule.forRoot(
{
mode: 'md',
}
),
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
```
8. Open `app.server.module.ts` and import `IonicServerModule`, so the file becomes:
```
import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { IonicServerModule } from '@ionic/angular-server';
import { AppModule } from './app.module';
import { AppComponent } from './app.component';
@NgModule({
imports: [
AppModule,
ServerModule,
IonicServerModule,
],
bootstrap: [AppComponent],
})
export class AppServerModule {}
```
9. Run `npm run build:ssr`
10. Run `npm run serve:ssr`
11. Go to http://localhost:4000/ in a browser
12. The above mentioned "NotYetImplemented" error is shown in the terminal every time the page is loaded
To check how Ionic components are rendered on the server, modify `app.component.html` so it contains, for instance, just `<ion-button>Ionic button</ion-button>`
Build and serve the SSR, open DevTools in Chrome and go to the Network tab. Reload http://localhost:4000/ and select the localhost item in the Network tab. Select the Response tab. You will see that the ion-button is rendered as just `<ion-button>Ionic button</ion-button>` on the server, i.e. incomplete.
### Code Reproduction URL
https://github.com/SebastianKohler/angular16-ionic7-ssr
### Ionic Info
I don't use the Ionic CLI. The Angular CLI output is:
```
Angular CLI: 16.2.0
Node: 18.14.2
Package Manager: npm 9.5.0
OS: win32 x64
Angular: 16.2.2
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1602.0
@angular-devkit/build-angular 16.2.0
@angular-devkit/core 16.2.0
@angular-devkit/schematics 16.2.0
@angular/cli 16.2.0
@nguniversal/builders 16.2.0
@nguniversal/express-engine 16.2.0
@schematics/angular 16.2.0
rxjs 7.8.1
typescript 5.1.6
zone.js 0.13.1
```
The `@ionic/angular` and `@ionic/angular-server` version is 7.3.1
### Additional Information
I have recently posted this issue in the Angular framework's issues: https://github.com/angular/angular/issues/51319
However, this seems to be a problem with Ionic rather than Angular -- an incompatibility between IonicServerModule and Angular 16 (or zone.js which was updated for Angular 16).
Ionic Dev states:
This ended up being a Stencil bug that we fixed in v4.8.0 of Stencil and was resolved as a result of this commit: 34417a5 that shipped in v7.5.8.
My project is running ionic 7.7.0 but its still showing the error. Has anyone figured out how to get Angular SSR to properly run with no errors?
Here is my dependencises in package.json file:
"dependencies": {
"@angular/animations": "^17.2.1",
"@angular/common": "^17.2.1",
"@angular/compiler": "^17.2.1",
"@angular/core": "^17.2.1",
"@angular/forms": "^17.2.1",
"@angular/platform-browser": "^17.2.1",
"@angular/platform-browser-dynamic": "^17.2.1",
"@angular/platform-server": "^17.2.1",
"@angular/router": "^17.2.1",
"@angular/service-worker": "^17.2.1",
"@angular/ssr": "^17.2.0",
"@capacitor/app": "5.0.7",
"@capacitor/core": "5.7.0",
"@capacitor/haptics": "5.0.7",
"@capacitor/keyboard": "5.0.8",
"@capacitor/status-bar": "5.0.7",
"@ionic/angular": "^7.7.2",
"@ionic/angular-server": "^7.7.2",
"express": "^4.18.2",
"ionicons": "^7.2.2",
"rxjs": "~7.8.1",
"tslib": "^2.6.2",
"zone.js": "~0.14.4"
},
EDIT: just created a new ionic project not using standalone and it still does not work.
3 posts - 1 participant
Read full topic
