Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat!: add support for Angular v17 #67

Merged
merged 34 commits into from
Nov 8, 2023
Merged
Show file tree
Hide file tree
Changes from 33 commits
Commits
Show all changes
34 commits
Select commit Hold shift + click to select a range
5ec5880
feat: update plugin + demo to ng17
Skn0tt Nov 6, 2023
64ddcf2
chore: delete "advanced-routing" example
Skn0tt Nov 6, 2023
7cced17
chore: reintroduce old demo contents
Skn0tt Nov 6, 2023
deb4563
feat: also exclude prerendered routes
Skn0tt Nov 6, 2023
abf3c93
chore: delete one more file
Skn0tt Nov 6, 2023
3292d80
fix: prettier
Skn0tt Nov 6, 2023
da824f4
chore: update engine
Skn0tt Nov 6, 2023
86e2d91
fix: validate angular version
Skn0tt Nov 7, 2023
0f38708
fix: install package locally
Skn0tt Nov 7, 2023
a534083
fix: add npm i for package to fix nf build
Skn0tt Nov 7, 2023
1ec2d99
fix: make build
Skn0tt Nov 7, 2023
a7e5666
fix: custom ignore command
Skn0tt Nov 7, 2023
a0a8dc7
chore: update logo
Skn0tt Nov 7, 2023
04cfc07
fix: windows doesnt understand #
Skn0tt Nov 7, 2023
b8ccbb6
chore: update readme
Skn0tt Nov 7, 2023
ada0955
fix: update release-please statements
Skn0tt Nov 7, 2023
fb4e236
chore: replace commonmodule with v17 builtins
Skn0tt Nov 7, 2023
a36541e
feat: inject request/context
Skn0tt Nov 7, 2023
eb3daa2
fix: update eslint
Skn0tt Nov 7, 2023
8e84883
fix: license, author
Skn0tt Nov 7, 2023
0189269
chore: comment about polyfill.mjs
Skn0tt Nov 7, 2023
1ee839b
fix: ensure ts imports are posix
Skn0tt Nov 7, 2023
6a8a223
chore: fail plugin instead of build
Skn0tt Nov 7, 2023
0011259
fix: skip instead of failing
Skn0tt Nov 7, 2023
7518391
fix: base64-encode html
Skn0tt Nov 7, 2023
d782e66
fix: use package name and version for generator
Skn0tt Nov 7, 2023
0e445a4
fix: use require.resolve to find angular version
Skn0tt Nov 7, 2023
914a581
feat: detect old version of plugin
Skn0tt Nov 7, 2023
65686c6
Revert manual version bump
Skn0tt Nov 7, 2023
31b44b9
fix: detect when no SSR was set up
Skn0tt Nov 7, 2023
59c2646
fix: until we found a way to run edge functions during dev, remove them
Skn0tt Nov 8, 2023
a7e6b2c
fix: make edge function run locally
Skn0tt Nov 8, 2023
69aea8e
chore: note down limitation about netlify serve
Skn0tt Nov 8, 2023
0a43c8f
fix: update project name in code snippet
Skn0tt Nov 8, 2023
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .eslintignore
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
node_modules
test
README.md
4 changes: 2 additions & 2 deletions .eslintrc.js
Original file line number Diff line number Diff line change
@@ -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,
Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/release-please.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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'
3 changes: 0 additions & 3 deletions .netlify/state.json

This file was deleted.

4 changes: 3 additions & 1 deletion .prettierrc.js
Original file line number Diff line number Diff line change
@@ -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',
}
File renamed without changes.
2 changes: 1 addition & 1 deletion LICENSE.md
Original file line number Diff line number Diff line change
@@ -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
Expand Down
80 changes: 38 additions & 42 deletions README.md
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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/demo/browser
```
Copy link
Contributor Author

@Skn0tt Skn0tt Nov 8, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we can remove --dir here once netlify/cli#6133 lands


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

Expand All @@ -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
Expand Down
17 changes: 0 additions & 17 deletions demo/.browserslistrc

This file was deleted.

16 changes: 16 additions & 0 deletions demo/.editorconfig
Original file line number Diff line number Diff line change
@@ -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
48 changes: 44 additions & 4 deletions demo/.gitignore
Original file line number Diff line number Diff line change
@@ -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
27 changes: 27 additions & 0 deletions demo/README.md
Original file line number Diff line number Diff line change
@@ -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.
104 changes: 103 additions & 1 deletion demo/angular.json
Original file line number Diff line number Diff line change
@@ -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,
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

manually verified that changing this doesn't change the output file name, so it's fine to depend on that in our generated edge function.

"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
}
}
Loading
Loading