Skip to content

Commit

Permalink
feat: support @19 (#216)
Browse files Browse the repository at this point in the history
* chore: add angular@19 test fixture without prerendering and ssr

* chore: add angular@19 test fixture with prerendering and ssr using stable CommonEngine

* chore: add angular@19 test fixture with prerendering and ssr using Developer Preview App Engine

* chore: add scripts for installing new fixture dependencies

* test: add test for version validation when angular@19 is used

* test: add test for version validation when angular deps are missing

* chore: add entire .netlify dirs to .gitignore

* test: add initial (failing) build tests for Angular 19 fixtures

* refactor: split reading angular version out to separate helper function

* fix: handle prerendered-routes.json shape in Angular 19

* chore: add runtime to new fixture dependencies

* chore: upgrade demo to Angular 19

* fix: hopefully initial working demo deployment using CommonEngine

* test: check if process import is result of using default server.ts

* test: fix used fixture dir in one of tests

* fix: only patch deno method in Deno env

* fix: try/catch deno.readFile patching to avoid potential fatal errors

* chore: upgrade @netlify/build

* test: update assertion for changed hashes after update

* Revert "test: check if process import is result of using default server.ts"

This reverts commit 8a7a7cb.

* fix: add engine name to 'not supported' error message

* refactor: simplify user code

* test: remove dashboard from expected excluded paths as it's now server rendered

* test: adjust test setup to not be impacted by angular-runtime devDeps

* chore: adjust eslint directive after adding @angular/ssr dev dep

* chore: upgrade node types (for before/after from node:test)

* fix: workaround type problem for now

* fix: automatically set Netlify compatible request handler using CommonEngine

* fix: support AppEngine

* test: update new test fixtures to rc.1

* fix: apply headers for prerendered routes

* fix: swap original server.ts back after build or failure

* fix: remove @android/ssr from dev and peerDeps

* chore(demo): migrate default server.ts to angular@19

* fix: update disabled rule after removing @angular/ssr devDep

* fix: lint

* chore: sync lock files

* docs: update readme for angular@19

* docs: update readme toc

* fix: re-add @ts-expect-error for app engine until angular types are adjusted

* chore: remove outdated TODOs

* chore: update jsdocs

* chore: upgrade to most recent RCs

* test: update assertion after package bump

* feat: initial boilerplate and tooling to start matching server.ts to known variants

* feat: only autoswap for known module content, otherwise fail build with actionable error

* fix: now that we require default or netlify compatible server.ts - update demo site

* chore: drop unuseful comment

* fix: attempt to normalize content for signature so crlf endlines are treated as lf
  • Loading branch information
pieh authored Nov 19, 2024
1 parent 24e330e commit f6776f5
Show file tree
Hide file tree
Showing 113 changed files with 107,046 additions and 7,679 deletions.
6 changes: 2 additions & 4 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,5 @@ Temporary Items

# End of https://www.toptal.com/developers/gitignore/api/osx,node

.netlify/functions
.netlify/functions-serve
.netlify/functions-internal
.angular
.netlify
.angular
3 changes: 2 additions & 1 deletion .prettierignore
Original file line number Diff line number Diff line change
Expand Up @@ -17,4 +17,5 @@ node_modules

# Tests
test
tests/fixtures
tests/fixtures
tools/known-server-ts-signatures
67 changes: 65 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@ This build plugin implements Angular Support on Netlify.

- [Installation and Configuration](#installation-and-configuration)
- [Accessing `Request` and `Context` during Server-Side Rendering](#accessing-request-and-context-during-server-side-rendering)
- [Customizing request handling](#customizing-request-handling)
- [Limitations](#limitations)
- [CLI Usage](#cli-usage)
- [Getting Help](#getting-help)
- [Contributing](#contributing)
Expand Down Expand Up @@ -76,10 +78,71 @@ To test this in local development, run your Angular project using `netlify serve
```sh
netlify serve
```
### App Engine Developer Preview usage with Angular@19

## Limitations
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:

- 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.
```diff
+import { REQUEST, REQUEST_CONTEXT } from '@angular/ssr/tokens'
import type { Context } from "@netlify/edge-functions"

export class FooComponent {

constructor(
// ...
- @Inject('netlify.request') @Optional() request?: Request,
- @Inject('netlify.context') @Optional() context?: Context,
+ @Inject(REQUEST) @Optional() request?: Request,
+ @Inject(REQUEST_CONTEXT) @Optional() context?: Context,
) {
console.log(`Rendering Foo for path ${request?.url} from location ${context?.geo?.city}`)
// ...
}

}
```

## Customizing request handling

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.

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

```ts
import { CommonEngine } from '@angular/ssr/node'
import { render } from '@netlify/angular-runtime/common-engine'

const commonEngine = new CommonEngine()

export async function netlifyCommonEngineHandler(request: Request, context: any): Promise<Response> {
return await render(commonEngine)
}
```

If you opted into the App Engine Developer Preview:

```ts
import { AngularAppEngine, createRequestHandler } from '@angular/ssr'
import { getContext } from '@netlify/angular-runtime/context'

const angularAppEngine = new AngularAppEngine()

export async function netlifyAppEngineHandler(request: Request): Promise<Response> {
const context = getContext()

const result = await angularAppEngine.handle(request, context)
return result || new Response('Not found', { status: 404 })
}

/**
* The request handler used by the Angular CLI (dev-server and during build).
*/
export const reqHandler = createRequestHandler(netlifyAppEngineHandler)
```

### Limitations

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.

## CLI Usage

Expand Down
6 changes: 2 additions & 4 deletions demo.test.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,12 @@ test('edge function config', async () => {

assert.deepEqual(config.excludedPath, [
'/.netlify/*',
'/dashboard/index.html',
'/favicon.ico',
'/heroes/index.html',
'/index.csr.html',
'/main-QDJU6U55.js',
'/polyfills-RX4V3J3S.js',
'/main-UP4QHVAQ.js',
'/polyfills-FFHMD2TL.js',
'/styles-5INURTSO.css',
'/dashboard',
'/heroes',
])
})
2 changes: 1 addition & 1 deletion demo/angular.json
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
],
"scripts": [],
"server": "src/main.server.ts",
"prerender": true,
"outputMode": "server",
"ssr": {
"entry": "server.ts"
}
Expand Down
Loading

0 comments on commit f6776f5

Please sign in to comment.