Skip to content

Commit f0b8146

Browse files
committed
docs: update readme for angular@19
1 parent 2c1d198 commit f0b8146

File tree

2 files changed

+63
-6
lines changed

2 files changed

+63
-6
lines changed

README.md

Lines changed: 63 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -76,10 +76,71 @@ To test this in local development, run your Angular project using `netlify serve
7676
```sh
7777
netlify serve
7878
```
79+
### App Engine Developer Preview usage with Angular@19
7980

80-
## Limitations
81+
If you opt into the App Engine Developer Preview accessing `Request` and `Context` objects is streamlined. Instead of custom Netlify prefixed providers, you should use the standardized injection tokens for those provided by `@angular/ssr` instead:
8182

82-
- The [`server.ts` file](https://angular.dev/guide/ssr#configure-server-side-rendering) that's part of the Angular scaffolding is meant for deploying to a VM, and is not compatible with this Netlify build plugin. If you applied changes to that file, you'll need to replicate them in an Edge Function. See (#135)[https://github.com/netlify/angular-runtime/issues/135] for an example.
83+
```diff
84+
+import { REQUEST, REQUEST_CONTEXT } from '@angular/ssr/tokens'
85+
import type { Context } from "@netlify/edge-functions"
86+
87+
export class FooComponent {
88+
89+
constructor(
90+
// ...
91+
- @Inject('netlify.request') @Optional() request?: Request,
92+
- @Inject('netlify.context') @Optional() context?: Context,
93+
+ @Inject(REQUEST) @Optional() request?: Request,
94+
+ @Inject(REQUEST_CONTEXT) @Optional() context?: Context,
95+
) {
96+
console.log(`Rendering Foo for path ${request?.url} from location ${context?.geo?.city}`)
97+
// ...
98+
}
99+
100+
}
101+
```
102+
103+
## Customizing request handling
104+
105+
Starting with Angular@19. The build plugin makes use of `server.ts` file to handle requests. The default Angular scaffolding does generate incompatible code for Netlify so build plugin will generate a compatible `server.ts` file for you automatically. If you need to customize the request handling, you can do so by starting with copying one of code snippets below to your `server.ts` file.
106+
107+
If you did not opt into the App Engine Developer Preview:
108+
109+
```ts
110+
import { CommonEngine } from '@angular/ssr/node'
111+
import { render } from '@netlify/angular-runtime/common-engine'
112+
import type { Context } from "@netlify/edge-functions"
113+
114+
const commonEngine = new CommonEngine()
115+
116+
export default async function HttpHandler(request: Request, context: Context): Promise<Response> {
117+
// customize if you want to have custom request handling by checking request.url
118+
// and returning instance of Response
119+
120+
return await render(commonEngine)
121+
}
122+
```
123+
124+
If you opted into the App Engine Developer Preview:
125+
126+
```ts
127+
import { AngularAppEngine, createRequestHandler } from '@angular/ssr'
128+
import type { Context } from "@netlify/edge-functions"
129+
130+
const angularAppEngine = new AngularAppEngine()
131+
132+
export const reqHandler = createRequestHandler(async (request: Request, context: Context) => {
133+
// customize if you want to have custom request handling by checking request.url
134+
// and returning instance of Response
135+
136+
const result = await angularAppEngine.handle(request, context)
137+
return result || new Response('Not found', { status: 404 })
138+
})
139+
```
140+
141+
### Limitations
142+
143+
The [`server.ts` file](https://angular.dev/guide/ssr#configure-server-side-rendering) that's part of the Angular scaffolding is meant for deploying to a VM, and is not compatible with this Netlify build plugin for Angular@17 and Angular@18. If you applied changes to that file, you'll need to replicate them in an Edge Function. See (#135)[https://github.com/netlify/angular-runtime/issues/135] for an example.
83144

84145
## CLI Usage
85146

src/helpers/serverModuleHelpers.js

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,7 @@ import { render } from '@netlify/angular-runtime/common-engine'
1313
1414
const commonEngine = new CommonEngine()
1515
16-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
1716
export default async function HttpHandler(request: Request, context: any): Promise<Response> {
18-
// customize if you want to have custom request handling
19-
2017
return await render(commonEngine)
2118
}
2219
`
@@ -25,7 +22,6 @@ export default async function HttpHandler(request: Request, context: any): Promi
2522
const NetlifyServerTsAppEngine = /* typescript */ `import { AngularAppEngine, createRequestHandler } from '@angular/ssr'
2623
const angularAppEngine = new AngularAppEngine()
2724
28-
// @ts-expect-error - createRequestHandler expects a function with single Request argument and doesn't allow context argument
2925
export const reqHandler = createRequestHandler(async (request: Request, context: any) => {
3026
const result = await angularAppEngine.handle(request, context)
3127
return result || new Response('Not found', { status: 404 })

0 commit comments

Comments
 (0)