Updated to Angular 19 (issue angular-slider#389)

vinlos · Jan 24, 2025 · 1080c37 · 1080c37
1 parent e6cd2c4
commit 1080c37
Show file tree

Hide file tree

Showing 65 changed files with 7,045 additions and 5,948 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
diff --git a/DEVELOPERS.md b/DEVELOPERS.md
@@ -1,14 +1,14 @@
 # Contributing to ngx-slider
 
-# Structure
+## Structure
 
 The repository is set up as an Angular project generated using ng-cli, which contains both the slider component, and a demo app.
 
 The slider library is exported to an NPM package using [ng-packagr](https://github.com/dherges/ng-packagr), while the demo app is built and published to Github Pages.
 
 The project relies on some auto-generated code using a number of scripts in `scripts/` directory. To ensure that everything works as expected, you should always use `npm run` commands as described below. Using `ng` commands directly might not always work.
 
-# Building the library
+## Building the library
 
 To build the ngx-slider library (NPM package), use:
 ```
@@ -17,83 +17,90 @@ npm run build:lib
 
 The ngx-slider NPM package files will be generated in `dist/` folder.
 
-# Running the demo app
+## Running the demo app
 
 To build and run the demo app, use:
+
 ```
 npm run start
 ```
 
 The demo app should build and start on default URL `http://localhost:4200`.
 
-# Running tests
+## Running tests
 
-## Unit tests
+### Unit tests
 
 There are a number of unit tests under `src/ngx-slider/` written in standard Angular convention using jasmine framework. To run them, use:
+
 ```
 npm run test
 ```
 
 Note: Currently (v1.2.1) most functionality is tested with end-to-end tests. This is not ideal for development, as running through the whole suite takes quite a long time. The plan for the future is to add more unit tests, so that development is easier.
 
-## End-to-end (e2e) tests
+### End-to-end (e2e) tests
 
 End-to-end tests are inside `e2e/` folder and are written using playwright framework. When setting up for the first time, you may need to install additional browser executables that playwright manages separately from its npm installation:
+
 ```
 npx playwright install
 ```
 
 To run all end-to-end tests, use:
+
 ```
 npm run e2e
 ```
 
-## Lint
+### Lint
 
 The project uses eslint for lint checking. If you are using an IDE such as Visual Studio Code, you will likely see eslint problems highlighted by the IDE. However, you can always run eslint from commandline.
 
 To run eslint, use:
+
 ```
 npm run lint
 ```
 
-# Continuous Integration (CI)
+## Continuous Integration (CI)
 
 The project is also set up to enable continuous integration, although there is currently no active service used for it (it used to be Travis CI until the free tier was disestablished):
+
 ```
 npm run ci
 ```
 
 This is a shorthand for running unit tests, e2e tests, building the project with production config and running eslint.
 
-# How generated code works
+## How generated code works
 
 As of v1.2.1, there are three main code generation scripts.
 
-## `scripts/generate-lib-files.js`
+### `scripts/generate-lib-files.js`
 This script prepares some files like `package.json` and `README.md` for the slider library, based on files in top-level directory.
 
 Note that the generated `package.json` for the library will be different from top-level `package.json`. This is because the top-level `package.json` is used to build and run the demo app, while the library `package.json` is specifically crafted for use with `ng-packagr` to build the library and later being included in the resulting NPM package.
 
-## `scripts/generate-demo-app-snippets.js`
+### `scripts/generate-demo-app-snippets.js`
 
 This script prepares the demo snippets shown in demo app by pasting code from the samples and generating the HTML templates used in final app. Code highlighting is achieved using [prismjs](https://prismjs.com/).
 
-## `scripts/generate-demo-app-docs.js`
+### `scripts/generate-demo-app-docs.js`
 
 This script generates the API documentation pages in demo app. This is done by running [typedoc](https://typedoc.org/). The pages are then embedded inside an iframe in the demo app.
 
-# Githb pages
+## Github pages
 
 The content displayed on Github pages for the slider (https://angular-slider.github.io/ngx-slider/) is contained on `gh-pages` branch as per standard Github convention.
 
 This branch is not meant for manual updates. It is managed automatically based on built demo app files by invoking:
+
 ```
 npm run publish-gh
 ```
 
-# Release checklist
+### Release checklist
 
 1. Check that all tests pass and build is successful:
     ```

diff --git a/KNOWN_ISSUES.md b/KNOWN_ISSUES.md
@@ -35,4 +35,4 @@ Using `transform : scale(N)` in css will mess with the calculation of the slider
 
 ## Compatibility with Angular's recommended Content Security Policy (CSP)
 
-Ngx-Slider makes use of innerHTML which means that sites that make use of a Content Security Policy (CSP) throw an exceptions. To fix this you can set the value of the `AllowUnsafeHtmlInSlider` provider in your app.module to `false`. Note that this will prevent you from customizing labels using HTML.
+Ngx-Slider makes use of innerHTML which means that sites that make use of a Content Security Policy (CSP) throw an exceptions. To fix this you can set the value of the `AllowUnsafeHtmlInSlider` provider in your app.module to `false`. Note that this will prevent you from customizing labels using HTML.
diff --git a/README.md b/README.md
@@ -18,9 +18,10 @@ Self-contained, mobile friendly slider component for Angular based on [angularjs
 | 13.x          | 13.x        | 6.x         | No                 |
 | 14.x          | 14.x        | 6.x         | No                 |
 | 15.x          | 15.x        | 7.x         | No                 |
-| 16.x          | 16.x        | 7.x         | Yes                |
+| 16.x          | 16.x        | 7.x         | No                 |
 | 17.x          | 17.x        | 7.x         | Yes                |
 | 18.x          | 18.x        | 7.x         | Yes                |
+| 19.x          | 18.x        | 7.x         | Yes                |
 
 *Note:* Like with Angular only the latest 3 versions are actively supported.
 
@@ -55,11 +56,13 @@ Self-contained, mobile friendly slider component for Angular based on [angularjs
 ## Installation
 
 To add the slider to your Angular project:
+
 ```
 npm install --save @angular-slider/ngx-slider
 ```
 
 Once installed, add the slider to your `app.module.ts`:
+
 ```typescript
 import { NgxSliderModule } from '@angular-slider/ngx-slider';
 
@@ -80,6 +83,7 @@ export class AppModule {}
 ## Sample usage
 
 Now you can use the slider component in your app components, for example in `app.component.ts`:
+
 ```typescript
 import { Options } from '@angular-slider/ngx-slider';
 ...
@@ -100,6 +104,7 @@ And in template file `app.component.html`:
 ```
 
 ## Documentation
+
 Full API documentation is available on [official website](https://angular-slider.github.io/ngx-slider/docs).
 
 ## Styling
@@ -113,6 +118,7 @@ As of v1.2.0 the slider features CSS animations of slider movement. If you prefe
 ## Keyboard Shortcuts
 
 In addition to mouse/touch events, the slider can also be controlled through keyboard. The available shortcuts are:
+
  - right/up arrow - increase by single step,
  - left/down arrow - decrease by single step,
  - page up - increase by 10% of slider range,

diff --git a/angular.json b/angular.json
@@ -11,11 +11,12 @@
       "schematics": {},
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:application",
           "options": {
-            "outputPath": "dist/demo-app",
+            "outputPath": {
+              "base": "dist/demo-app"
+            },
             "index": "src/demo-app/index.html",
-            "main": "src/demo-app/main.ts",
             "polyfills": [
               "zone.js"
             ],
@@ -32,7 +33,8 @@
             "styles": [
               "src/demo-app/styles.scss"
             ],
-            "scripts": []
+            "scripts": [],
+            "browser": "src/demo-app/main.ts"
           },
           "configurations": {
             "production": {
@@ -47,9 +49,7 @@
               "sourceMap": false,
               "namedChunks": false,
               "aot": true,
-              "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true
+              "extractLicenses": true
             }
           },
           "defaultConfiguration": ""
Original file line number	Diff line number	Diff line change
Expand Up		@@ -35,4 +35,4 @@ Using `transform : scale(N)` in css will mess with the calculation of the slider

		## Compatibility with Angular's recommended Content Security Policy (CSP)

		Ngx-Slider makes use of innerHTML which means that sites that make use of a Content Security Policy (CSP) throw an exceptions. To fix this you can set the value of the `AllowUnsafeHtmlInSlider` provider in your app.module to `false`. Note that this will prevent you from customizing labels using HTML.
		Ngx-Slider makes use of innerHTML which means that sites that make use of a Content Security Policy (CSP) throw an exceptions. To fix this you can set the value of the `AllowUnsafeHtmlInSlider` provider in your app.module to `false`. Note that this will prevent you from customizing labels using HTML.