build: Upgrade to Angular 18 (#13)

* ci: update action versions

* build: upgrade to Angular 18

* chore: fix lint issues

* build: temporarily downgrade angular-eslint to v17

* build: upgrade eslint to v9

.github/workflows/ci.yml

@@ -17,11 +17,11 @@ jobs:
  runs-on: ubuntu-latest
  steps:
  - name: Checkout
- uses: actions/checkout@v3
+ uses: actions/checkout@v4
  - name: Setup Node
- uses: actions/setup-node@v3
+ uses: actions/setup-node@v4
  with:
- node-version: '18'
+ node-version: '20'
  cache: 'npm'
  - name: Install dependencies
  run: npm ci

.github/workflows/publish.yml

@@ -10,11 +10,11 @@ jobs:
  runs-on: ubuntu-latest
  steps:
  - name: Checkout
- uses: actions/checkout@v3
+ uses: actions/checkout@v4
  - name: Setup Node
- uses: actions/setup-node@v3
+ uses: actions/setup-node@v4
  with:
- node-version: '18'
+ node-version: '20'
  cache: 'npm'
  registry-url: 'https://registry.npmjs.org'
  - name: Install dependencies

README.md

@@ -13,6 +13,7 @@ Latest version available for each version of Angular
  | >= 1.2 | 15.x | < 1.x |
  | >= 2.0 | 16.x | < 1.x |
  | >= 3.0 | 17.x | < 1.x |
+ | >= 4.0 | 18.x | < 1.x |
 
 ## Installation
 

angular.json

@@ -55,12 +55,15 @@
  "prefix": "app",
  "architect": {
  "build": {
- "builder": "@angular-devkit/build-angular:browser",
+ "builder": "@angular-devkit/build-angular:application",
  "options": {
- "outputPath": "dist/ngx-fluent-example",
+ "outputPath": {
+ "base": "dist/ngx-fluent-example"
+ },
  "index": "projects/ngx-fluent-example/src/index.html",
- "main": "projects/ngx-fluent-example/src/main.ts",
- "polyfills": "projects/ngx-fluent-example/src/polyfills.ts",
+ "polyfills": [
+ "projects/ngx-fluent-example/src/polyfills.ts"
+ ],
  "tsConfig": "projects/ngx-fluent-example/tsconfig.app.json",
  "inlineStyleLanguage": "scss",
  "assets": [
@@ -70,7 +73,8 @@
  "styles": [
  "projects/ngx-fluent-example/src/styles.scss"
  ],
- "scripts": []
+ "scripts": [],
+ "browser": "projects/ngx-fluent-example/src/main.ts"
  },
  "configurations": {
  "production": {
@@ -95,9 +99,7 @@
  "outputHashing": "all"
  },
  "development": {
- "buildOptimizer": false,
  "optimization": false,
- "vendorChunk": true,
  "extractLicenses": false,
  "sourceMap": true,
  "namedChunks": true

eslint.config.js

@@ -0,0 +1,36 @@
+// @ts-check
+const eslint = require('@eslint/js');
+const tseslint = require('typescript-eslint');
+const angular = require('angular-eslint');
+
+module.exports = tseslint.config(
+ {
+ files: ['**/*.ts'],
+ extends: [eslint.configs.recommended, ...tseslint.configs.strict, ...angular.configs.tsRecommended],
+ processor: angular.processInlineTemplates,
+ rules: {
+ '@typescript-eslint/no-extraneous-class': 'off',
+ '@angular-eslint/directive-selector': [
+ 'error',
+ {
+ type: 'attribute',
+ prefix: 'app',
+ style: 'camelCase',
+ },
+ ],
+ '@angular-eslint/component-selector': [
+ 'error',
+ {
+ type: 'element',
+ prefix: 'app',
+ style: 'kebab-case',
+ },
+ ],
+ },
+ },
+ {
+ files: ['**/*.html'],
+ extends: [...angular.configs.templateRecommended, ...angular.configs.templateAccessibility],
+ rules: {},
+ },
+);