Skip to content

Commit 967bb66

Browse files
authored
fix: update readme with installation notes for Angular 19 (#223)
* fix: update readme with installation notes for Angular 19 * fix: change suggestions from @mrstork
1 parent 5c1cb3c commit 967bb66

File tree

1 file changed

+33
-14
lines changed

1 file changed

+33
-14
lines changed

README.md

+33-14
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@ This build plugin implements Angular Support on Netlify.
1717

1818
- [Installation and Configuration](#installation-and-configuration)
1919
- [Accessing `Request` and `Context` during Server-Side Rendering](#accessing-request-and-context-during-server-side-rendering)
20-
- [Customizing request handling](#customizing-request-handling)
20+
- [Request handling](#request-handling)
21+
- [Customizing request handling](#customizing-request-handling)
2122
- [Limitations](#limitations)
2223
- [CLI Usage](#cli-usage)
2324
- [Getting Help](#getting-help)
@@ -26,18 +27,19 @@ This build plugin implements Angular Support on Netlify.
2627

2728
## Installation and Configuration
2829

29-
Netlify automatically detects Angular projects and sets up the latest version of this plugin. There's no further configuration needed from Netlify users.
30+
Netlify automatically detects Angular projects and sets up the latest version of this plugin.
3031

31-
### Manual Installation
32+
### For Angular 17 and Angular 18
3233

33-
If you need to pin down this plugin to a fixed version, install it manually.
34+
There's no further configuration needed from Netlify users.
3435

35-
Create a `netlify.toml` in the root of your project. Your file should include the plugins section below:
36+
### For Angular 19
3637

37-
```toml
38-
[[plugins]]
39-
package = "@netlify/angular-runtime"
40-
```
38+
If you are using Server-Side Rendering you will need to install Angular Runtime in your Angular project to be able to import required utilities to successfully deploy request handler to Netlify. See [Manual Installation](#manual-installation) for installations details. See [Request handling](#request-handling) for more information about request handler.
39+
40+
### Manual Installation
41+
42+
If you need to pin this plugin to a specific version or if you are using Server-Side Rendering with Angular 19, you will need to install the plugin manually.
4143

4244
Install it via your package manager:
4345

@@ -47,9 +49,6 @@ npm install -D @netlify/angular-runtime
4749
yarn add -D @netlify/angular-runtime
4850
```
4951

50-
Read more about [file-based plugin installation](https://docs.netlify.com/configure-builds/build-plugins/#file-based-installation)
51-
in our docs.
52-
5352
## Accessing `Request` and `Context` during Server-Side Rendering
5453

5554
During server-side rendering (SSR), you can access the incoming `Request` object and the Netlify-specific `Context` object via providers:
@@ -102,9 +101,15 @@ export class FooComponent {
102101
}
103102
```
104103

105-
## Customizing request handling
104+
## Request handling
106105

107-
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 swap it for compatible `server.ts` file for you automatically if it detects default one being used. If you need to customize the request handling, you can do so by copying one of code snippets below to your `server.ts` file.
106+
Starting with Angular@19. The build plugin makes use of the `server.ts` file to handle requests. The default Angular scaffolding generates incompatible code for Netlify so the build plugin will swap it for compatible `server.ts` file automatically if it detects default version being used.
107+
108+
Make sure you have `@netlify/angular-runtime` version 2.2.0 or later installed in your project. Netlify compatible `server.ts` file imports utilities from this package and Angular Compiler need to be able to resolve it and it can only do that if it's installed in your project and not when it's auto-installed by Netlify.
109+
110+
### Customizing request handling
111+
112+
If you need to customize the request handling, you can do so by copying one of code snippets below to your `server.ts` file.
108113

109114
If you did not opt into the App Engine Developer Preview:
110115

@@ -115,6 +120,13 @@ import { render } from '@netlify/angular-runtime/common-engine'
115120
const commonEngine = new CommonEngine()
116121

117122
export async function netlifyCommonEngineHandler(request: Request, context: any): Promise<Response> {
123+
// Example API endpoints can be defined here.
124+
// Uncomment and define endpoints as necessary.
125+
// const pathname = new URL(request.url).pathname;
126+
// if (pathname = '/api/hello') {
127+
// return Response.json({ message: 'Hello from the API' });
128+
// }
129+
118130
return await render(commonEngine)
119131
}
120132
```
@@ -130,6 +142,13 @@ const angularAppEngine = new AngularAppEngine()
130142
export async function netlifyAppEngineHandler(request: Request): Promise<Response> {
131143
const context = getContext()
132144

145+
// Example API endpoints can be defined here.
146+
// Uncomment and define endpoints as necessary.
147+
// const pathname = new URL(request.url).pathname;
148+
// if (pathname = '/api/hello') {
149+
// return Response.json({ message: 'Hello from the API' });
150+
// }
151+
133152
const result = await angularAppEngine.handle(request, context)
134153
return result || new Response('Not found', { status: 404 })
135154
}

0 commit comments

Comments
 (0)