feat: update Angular template to version 17

[alan-agius4]

This commits updates the Angular template to use Angular 17.

[changeset-bot]

🦋 Changeset detected

Latest commit: 9ec702b

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
create-cloudflare	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[alan-agius4]

Is there a way to use an index file which is not part of assets? IE: not accessible from the browser. For context, this is because for SSR we have a dedicated page in server/index.server.html which does not have critical css inlined.

[petebacondarwin]

We could inline the content of the file as an import here. Something like:

import document from "../server/index.html"

...


const content = await renderApplication(bootstrap, {
  document, 
  url: url.pathname
})

[petebacondarwin]

I tried this and got it working for deployed apps and local app, but unfortunately we get a conflict in the allowed path name which means I couldn't get it working for both.

Since the index.server.html is generated by Angular and only available post-build we have to convince TS and esbuild that this import is external. We can do this by using @ts-ignore for TS and wrapping the import in a try-catch for esbuild.

let indexHTM: any;
try {
  // @ts-ignore
  indexHTML = await import("index.server.html");
} catch {}
const document = index.default

The deployed version requires the import to be "index.server.html" but for wrangler pages dev it must be "./index.server.html".

I couldn't find a good way to avoid this conflict.

[alan-agius4]

This seems to be incorrectly polyfilled by wrangler. Which caused performance.mark if not a function error.

Since this is not a Node API, do you reckon it can be fixed from your end?

[alan-agius4]

//cc @petebacondarwin

[petebacondarwin]

Currently mark() is not supported:
https://developers.cloudflare.com/workers/runtime-apis/performance/

Looks like performance.now() was added earlier this year - see cloudflare/workerd#603.

So perhaps a feature request for performance.mark() might be accepted?

cc @jasnell

[dario-piotrowicz]

@alan-agius4 thanks a lot for the PR! 😃

Pete is off today, I feel like he'd be the best person to review this as he has by far the most context on it, he should be back tomorrow so I think we can wait for him 🙂

[naveedahmed1]

Really excited about this one! Looking forward to move our Angular app for Mustakbil.com to Cloudflare. Tried twice in past, few months back and just yesterday without any success. I hope this pull request fixes the issues and will offer smooth experience.

[github-actions]

A wrangler prerelease is available for testing. You can install this latest build in your project with:

npm install --save-dev https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/6719019888/npm-package-wrangler-4280

You can reference the automatically updated head of this PR with:

npm install --save-dev https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/prs/6719019888/npm-package-wrangler-4280

Or you can use npx with this latest build directly:

npx https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/6719019888/npm-package-wrangler-4280 dev path/to/script.js

Additional artifacts:

npm install https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/6719019888/npm-package-cloudflare-pages-shared-4280

Note that these links will no longer work once the GitHub Actions artifact expires.

---

[email protected] includes the following runtime dependencies:

Package	Constraint	Resolved
miniflare	3.20231025.0	3.20231025.0
workerd	1.20231025.0	1.20231025.0
workerd --version	1.20231025.0	2023-10-25

|

Please ensure constraints are pinned, and miniflare/workerd minor versions match.

[codecov]

Codecov Report

Merging #4280 (9ec702b) into main (a1c9f43) will increase coverage by 0.04%.
The diff coverage is n/a.

@@            Coverage Diff             @@
##             main    #4280      +/-   ##
==========================================
+ Coverage   75.34%   75.39%   +0.04%     
==========================================
  Files         223      223              
  Lines       12341    12341              
  Branches     3190     3190              
==========================================
+ Hits         9298     9304       +6     
+ Misses       3043     3037       -6     

see 4 files with indirect coverage changes

[petebacondarwin]

I ran this via C3 locally and the Angular build fails...

> npm run pages:build

Results in these two errors:

✘ [ERROR] TS1192: Module '"/Users/pbacondarwin/dev/workers-sdk/bitter-butterfly-a33c/src/main.server"' has no default export. [plugin angular-compiler]

    server.ts:2:7:
      2 │ import bootstrap from './src/main.server';

✘ [ERROR] Could not resolve "zone.js/dist/zone-node"

    src/main.server.ts:1:7:
      1 │ import "zone.js/dist/zone-node";
        ╵        ~~~~~~~~~~~~~~~~~~~~~~~~

  The path "./dist/zone-node" is not exported by package "zone.js":

    node_modules/zone.js/package.json:46:13:
      46 │   "exports": {
         ╵              ^

  You can mark the path "zone.js/dist/zone-node" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.

[petebacondarwin]

The e2e tests pass locally for me, they won't pass here due to the PR being on a contributor's fork.

We had to update the local pnpm version installed in the C3 package to fix the Angular e2e tests. Note to @jculvey - should we update that dependency automatically using dependabot?

[marceloverdijk]

@alan-agius4 this PR changes the behavior of the Cloudflare Angular template to SSR/Prerendering.
Would there be an option to not use SSR/Prerendering?

Rationale:
Build a Angular app deployed on Cloudflare Pages, but have the rendering on the client.
The project will also contain Pages Functions to deploy a REST API being consumed by the Angular app.