Angular 19

README.md

@@ -31,8 +31,8 @@ the <a href="https://github.com/basst314/ngx-webcam-demo" target="_blank">Demo-P
 
 **Note:** For older versions of Angular/TypeScript, please use previous releases of this library.
 
-- Angular: `>=13.0.0`
-- Typescript: `>=4.4.4`
+- Angular: `>=19.0.0`
+- Typescript: `>=5.6.3`
 - RxJs: `>=6.6.0`
 - **Important:** Your app must be served on a secure context using `https://` or on localhost, for modern browsers to
   permit WebRTC/UserMedia access.
@@ -53,11 +53,11 @@ the <a href="https://github.com/basst314/ngx-webcam-demo" target="_blank">Demo-P
 2. Import the `WebcamModule` into your Angular module:
 
 ```typescript
-import {WebcamModule} from 'ngx-webcam';
+import {WebcamComponent} from 'ngx-webcam';
 
 @NgModule({
   imports: [
-    WebcamModule,
+    WebcamComponent,
     ...
   ],
   ...
@@ -68,7 +68,7 @@ export class AppModule {
 
 3. Use the `WebcamComponent` on your pages:
 
-`<webcam></webcam>`
+`<ngx-webcam></ngx-webcam>`
 
 As simple as that.
 

angular.json

@@ -9,13 +9,17 @@
       "projectType": "application",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:application",
           "options": {
-            "outputPath": "dist",
+            "outputPath": {
+              "base": "dist"
+            },
             "index": "src/index.html",
-            "main": "src/main.ts",
-            "tsConfig": "src/tsconfig.app.json",
-            "polyfills": "src/polyfills.ts",
+            "tsConfig": "tsconfig.app.json",
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ],
             "assets": [
               "src/assets",
               "src/favicon.ico"
@@ -24,12 +28,11 @@
               "src/styles.scss"
             ],
             "scripts": [],
-            "vendorChunk": true,
             "extractLicenses": false,
-            "buildOptimizer": false,
             "sourceMap": true,
             "optimization": false,
-            "namedChunks": true
+            "namedChunks": true,
+            "browser": "src/main.ts"
           },
           "configurations": {
             "production": {
@@ -44,8 +47,6 @@
               "sourceMap": false,
               "namedChunks": false,
               "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
               "fileReplacements": [
                 {
                   "replace": "src/environments/environment.ts",
@@ -59,34 +60,26 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "ngx-webcam:build"
+            "buildTarget": "ngx-webcam:build"
           },
           "configurations": {
             "production": {
-              "browserTarget": "ngx-webcam:build:production"
+              "buildTarget": "ngx-webcam:build:production"
             }
           }
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "ngx-webcam:build"
+            "buildTarget": "ngx-webcam:build"
           }
         },
-        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
           "options": {
-            "main": "src/test.ts",
-            "karmaConfig": "./karma.conf.js",
-            "polyfills": "src/polyfills.ts",
-            "tsConfig": "src/tsconfig.spec.json",
-            "scripts": [],
-            "styles": [
-              "src/styles.scss"
-            ],
-            "assets": [
-              "src/assets",
-              "src/favicon.ico"
+            "lintFilePatterns": [
+              "src/**/*.ts",
+              "src/**/*.html"
             ]
           }
         }
@@ -107,17 +100,16 @@
       }
     }
   },
-  "defaultProject": "ngx-webcam",
   "schematics": {
     "@schematics/angular:component": {
-      "prefix": "",
+      "prefix": "ngx",
       "style": "scss"
     },
     "@schematics/angular:directive": {
-      "prefix": ""
+      "prefix": "ngx"
     }
   },
   "cli": {
     "analytics": "9dd122c2-0abe-4e3d-8bb5-33a9b7a1321c"
   }
-}
+}

docs/index.html

@@ -7,7 +7,7 @@
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 <link rel="stylesheet" href="styles.ef46db3751d8e999.css"></head>
 <body>
-  <approot></approot>
+<app-root></app-root>
 <script src="runtime.a281ae2b4dd178c5.js" type="module"></script><script src="polyfills.e24170126eb2c264.js" type="module"></script><script src="main.720aa27968dc5f2c.js" type="module"></script>
 
-</body></html>
+</body></html>

eslint.config.js

@@ -0,0 +1,43 @@
+// @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.recommended,
+      ...tseslint.configs.stylistic,
+      ...angular.configs.tsRecommended,
+    ],
+    processor: angular.processInlineTemplates,
+    rules: {
+      "@angular-eslint/directive-selector": [
+        "error",
+        {
+          type: "attribute",
+          prefix: "ngx",
+          style: "camelCase",
+        },
+      ],
+      "@angular-eslint/component-selector": [
+        "error",
+        {
+          type: "element",
+          prefix: "ngx",
+          style: "kebab-case",
+        },
+      ],
+    },
+  },
+  {
+    files: ["**/*.html"],
+    extends: [
+      ...angular.configs.templateRecommended,
+      ...angular.configs.templateAccessibility,
+    ],
+    rules: {},
+  }
+);