feat!: add support for Angular v17 (#67)

* feat: update plugin + demo to ng17 * chore: delete "advanced-routing" example * chore: reintroduce old demo contents * feat: also exclude prerendered routes * chore: delete one more file * fix: prettier * chore: update engine * fix: validate angular version * fix: install package locally * fix: add npm i for package to fix nf build * fix: make build * fix: custom ignore command * chore: update logo * fix: windows doesnt understand # * chore: update readme * fix: update release-please statements * chore: replace commonmodule with v17 builtins * feat: inject request/context * fix: update eslint * fix: license, author * chore: comment about polyfill.mjs * fix: ensure ts imports are posix * chore: fail plugin instead of build * fix: skip instead of failing * fix: base64-encode html * fix: use package name and version for generator * fix: use require.resolve to find angular version * feat: detect old version of plugin * Revert manual version bump * fix: detect when no SSR was set up * fix: until we found a way to run edge functions during dev, remove them * fix: make edge function run locally * chore: note down limitation about netlify serve * fix: update project name in code snippet
netlify · Nov 8, 2023 · ab92862 · ab92862
1 parent d3f0b1d
commit ab92862
Show file tree

Hide file tree

Showing 98 changed files with 22,896 additions and 73,093 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -1,2 +1,3 @@
 node_modules
 test
+README.md
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,7 +1,7 @@
-const { overrides } = require('@netlify/eslint-config-node/react_config')
+const { overrides } = require('@netlify/eslint-config-node')
 
 module.exports = {
-  extends: '@netlify/eslint-config-node/react_config',
+  extends: '@netlify/eslint-config-node',
   rules: {
     'max-depth': 0,
     complexity: 0,

diff --git a/.github/workflows/release-please.yml b/.github/workflows/release-please.yml
@@ -16,4 +16,4 @@ jobs:
         with:
           token: ${{ steps.get-token.outputs.token }}
           release-type: node
-          package-name: '@netlify/plugin-angular-universal'
+          package-name: '@netlify/angular-runtime'
diff --git a/.netlify/state.json b/.netlify/state.json
diff --git a/.prettierrc.js b/.prettierrc.js
@@ -1,4 +1,6 @@
+const eslintConfig = require('@netlify/eslint-config-node/.prettierrc.json')
+
 module.exports = {
-  ...require('@netlify/eslint-config-node/.prettierrc.json'),
+  ...eslintConfig,
   endOfLine: 'auto',
 }
diff --git a/docs/CONTRIBUTING.md → CONTRIBUTING.md b/docs/CONTRIBUTING.md → CONTRIBUTING.md
diff --git a/LICENSE.md b/LICENSE.md
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021 Luke Oliff
+Copyright (c) 2023 Netlify
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of
 this software and associated documentation files (the "Software"), to deal in

diff --git a/README.md b/README.md
@@ -1,43 +1,43 @@
-![Netlify Build plugin Angular Universal – Run Angular Universal seamlessly on Netlify](netlify-plugin-angular.png)
+![Netlify Angular Runtime – Run Angular seamlessly on Netlify](netlify-plugin-angular.png)
 
-# Angular Universal Plugin
+# Angular Runtime
 
 <p align="center">
-  <a aria-label="npm version" href="https://www.npmjs.com/package/@netlify/plugin-angular-universal">
-    <img alt="" src="https://img.shields.io/npm/v/@netlify/plugin-angular-universal">
+  <a aria-label="npm version" href="https://www.npmjs.com/package/@netlify/angular-runtime">
+    <img alt="" src="https://img.shields.io/npm/v/@netlify/angular-runtime">
   </a>
-  <a aria-label="MIT License" href="https://img.shields.io/npm/l/@netlify/plugin-angular-universal">
+  <a aria-label="MIT License" href="https://img.shields.io/npm/l/@netlify/angular-runtime">
     <img alt="" src="https://img.shields.io/badge/License-MIT-yellow.svg">
   </a>
 </p>
 
-This build plugin is a utility for supporting Angular Universal on Netlify.
+This build plugin implements Angular Support on Netlify.
 
 ## Table of Contents
 
 - [Installation and Configuration](#installation-and-configuration)
+- [Accessing `Request` and `Context` during Server-Side Rendering](#accessing-request-and-context-during-server-side-rendering)
 - [CLI Usage](#cli-usage)
-- [Caveats](#caveats)
 - [Getting Help](#getting-help)
 - [Contributing](#contributing)
 - [License](#license)
 
 ## Installation and Configuration
 
+Netlify automatically detects Angular projects and sets up the latest version of this plugin. There's no further configuration needed from Netlify users.
+
 ### Manual Installation
 
+If you need to pin down this plugin to a fixed version, install it manually.
+
 Create a `netlify.toml` in the root of your project. Your file should include the plugins section below:
 
 ```toml
-[build]
-  command = "ng build --configuration production && ng run {projectName}:serverless:production"
-  publish = "dist/{projectName}/browser"
-
 [[plugins]]
   package = "@netlify/plugin-angular-universal"
 ```
 
-If you'd like to install this plugin at a fixed version, install it via your package manager:
+Install it via your package manager:
 
 ```bash
 npm install -D @netlify/plugin-angular-universal
@@ -48,46 +48,42 @@ yarn add -D @netlify/plugin-angular-universal
 Read more about [file-based plugin installation](https://docs.netlify.com/configure-builds/build-plugins/#file-based-installation)
 in our docs.
 
-## CLI Usage
-
-### Requirements
-
-To use the Angular Universal plugin while building and deploying with the CLI, you need to have `netlify-cli v5.4.13` installed (or a later version).
-
-Please also make sure to use `ntl deploy --build --prod` (rather than `ntl build`).
+## Accessing `Request` and `Context` during Server-Side Rendering
 
-### Plugin Side Effects
+During server-side rendering (SSR), you can access the incoming `Request` object and the Netlify-specific `Context` object via providers:
 
-When this plugin is run as part of the build process using the Netlify CLI, direct changes will be made to your project source:
+```ts
+import type { Context } from "@netlify/edge-functions"
 
-1. It will modify your angular.json to add a `serverless` project configuration.
-2. It will add `serverless.ts` and `tsconfig.serverless.json` files.
+export class FooComponent {
 
-It is up to you whether to commit these changes to your project. If the plugin makes updates to these files or configurations, it will overwrite what you'd previously committed, and you can commit the new updates. Otherwise, you can stash and ignore them.
+  constructor(
+    // ...
+    @Inject('netlify.request') @Optional() request?: Request,
+    @Inject('netlify.context') @Optional() context?: Context,
+  ) {
+    console.log(`Rendering Foo for path ${request?.url} from location ${context?.geo?.city}`)
+    // ...
+  }
+
+}
+```
 
-### Workflow
+Keep in mind that these will not be available on the client-side or during [prerendering](https://angular.dev/guide/prerendering#prerendering-parameterized-routes).
 
-If you'd like to build and deploy your project using the
-[Netlify CLI](https://docs.netlify.com/cli/get-started/), we recommend this
-workflow to manage git tracking plugin-generated files:
+To test this in local development, run your Angular project using `netlify serve`:
 
-1. Make sure all your project's files are committed before running a build with
-   the CLI
-2. Run any number of builds and deploys freely (i.e. `netlify build`,
-   `netlify deploy --build`, `netlify deploy --prod`)
-3. Run `git stash --include-unstaged` to easily ignore plugin-generated files
+```sh
+netlify serve --dir dist/<your-project-name>/browser
+```
 
-It's important to note that the CLI may mix your project's source code and
-plugin-generated files; this is why we recommend committing all project source
-files before running CLI builds.
+## CLI Usage
 
-## Caveats
+### Requirements
 
-This plugin is currently in beta.
+To use the Angular Universal plugin while building and deploying with the CLI, you need to have `netlify-cli v17.0.0` installed (or a later version).
 
-Right now:
-- it does not include out of the box monorepo support
-- it does not support Angular Universal prerendering
+Please also make sure to use `ntl deploy --build` (rather than `ntl build && ntl deploy`).
 
 ## Getting Help
 
@@ -100,7 +96,7 @@ project, let us know! You can either:
 
 ## Contributing
 
-We welcome contributions ❤️ - see the [CONTRIBUTING.md](docs/CONTRIBUTING.md) file
+We welcome contributions ❤️ - see the [CONTRIBUTING.md](CONTRIBUTING.md) file
 for details.
 
 ## License

diff --git a/demo/.browserslistrc b/demo/.browserslistrc
diff --git a/demo/.editorconfig b/demo/.editorconfig
@@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false
diff --git a/demo/.gitignore b/demo/.gitignore
@@ -1,5 +1,45 @@
-/netlify
-/serverless.ts
-/tsconfig.serverless.json
-/_redirects
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
 /node_modules
+npm-debug.log
+yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+
+# System files
+.DS_Store
+Thumbs.db
+
+.netlify
+!.netlify/state.json
diff --git a/demo/README.md b/demo/README.md
@@ -0,0 +1,27 @@
+# Demo
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.0.0-rc.3.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
diff --git a/demo/angular.json b/demo/angular.json
@@ -1 +1,103 @@
-{"$schema":"./node_modules/@angular/cli/lib/config/schema.json","cli":{"analytics":false},"version":1,"newProjectRoot":"projects","projects":{"angular-bfdx":{"projectType":"application","schematics":{},"root":"","sourceRoot":"src","prefix":"app","architect":{"build":{"builder":"@angular-devkit/build-angular:browser","options":{"outputPath":"dist/angular-bfdx/browser","index":"src/index.html","main":"src/main.ts","polyfills":"src/polyfills.ts","tsConfig":"tsconfig.app.json","aot":true,"assets":["src/favicon.ico","src/assets"],"styles":["src/site.css","src/mobile.css"],"scripts":[]},"configurations":{"production":{"fileReplacements":[{"replace":"src/environments/environment.ts","with":"src/environments/environment.prod.ts"}],"optimization":true,"outputHashing":"none","sourceMap":false,"namedChunks":false,"extractLicenses":true,"vendorChunk":false,"buildOptimizer":true,"budgets":[{"type":"initial","maximumWarning":"2mb","maximumError":"5mb"},{"type":"anyComponentStyle","maximumWarning":"6kb","maximumError":"10kb"}]}}},"serve":{"builder":"@angular-devkit/build-angular:dev-server","options":{"browserTarget":"angular-bfdx:build"},"configurations":{"production":{"browserTarget":"angular-bfdx:build:production"}}},"extract-i18n":{"builder":"@angular-devkit/build-angular:extract-i18n","options":{"browserTarget":"angular-bfdx:build"}},"test":{"builder":"@angular-devkit/build-angular:karma","options":{"main":"src/test.ts","polyfills":"src/polyfills.ts","tsConfig":"tsconfig.spec.json","karmaConfig":"karma.conf.js","assets":["src/favicon.ico","src/assets"],"styles":["src/styles.css"],"scripts":[]}},"lint":{"builder":"@angular-devkit/build-angular:tslint","options":{"tsConfig":["tsconfig.app.json","tsconfig.spec.json","e2e/tsconfig.json","tsconfig.server.json"],"exclude":["**/node_modules/**"]}},"e2e":{"builder":"@angular-devkit/build-angular:protractor","options":{"protractorConfig":"e2e/protractor.conf.js","devServerTarget":"angular-bfdx:serve"},"configurations":{"production":{"devServerTarget":"angular-bfdx:serve:production"}}},"server":{"builder":"@angular-devkit/build-angular:server","options":{"outputPath":"dist/angular-bfdx/server","main":"server.ts","tsConfig":"tsconfig.server.json"},"configurations":{"production":{"outputHashing":"media","fileReplacements":[{"replace":"src/environments/environment.ts","with":"src/environments/environment.prod.ts"}],"sourceMap":false,"optimization":true}}},"serve-ssr":{"builder":"@nguniversal/builders:ssr-dev-server","options":{"browserTarget":"angular-bfdx:build","serverTarget":"angular-bfdx:server"},"configurations":{"production":{"browserTarget":"angular-bfdx:build:production","serverTarget":"angular-bfdx:server:production"}}},"prerender":{"builder":"@nguniversal/builders:prerender","options":{"browserTarget":"angular-bfdx:build:production","serverTarget":"angular-bfdx:server:production","routes":["/"]},"configurations":{"production":{}}},"serverless":{"builder":"@angular-devkit/build-angular:server","options":{"outputPath":"dist/angular-bfdx/serverless","main":"serverless.ts","tsConfig":"tsconfig.serverless.json"},"configurations":{"production":{"outputHashing":"media","fileReplacements":[{"replace":"src/environments/environment.ts","with":"src/environments/environment.prod.ts"}],"sourceMap":false,"optimization":true}}}}}},"defaultProject":"angular-bfdx"}
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "demo": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:application",
+          "options": {
+            "outputPath": "dist/demo",
+            "index": "src/index.html",
+            "browser": "src/main.ts",
+            "polyfills": [
+              "zone.js"
+            ],
+            "tsConfig": "tsconfig.app.json",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.css"
+            ],
+            "scripts": [],
+            "server": "src/main.server.ts",
+            "prerender": true,
+            "ssr": {
+              "entry": "server.ts"
+            }
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "demo:build:production"
+            },
+            "development": {
+              "buildTarget": "demo:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "buildTarget": "demo:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ],
+            "tsConfig": "tsconfig.spec.json",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.css"
+            ],
+            "scripts": []
+          }
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}