Merge pull request #102 from jannicz/RC-1.14

Add support for Angular 17 (RC 1.14)
jannicz · May 6, 2024 · 51a10ff · 51a10ff
2 parents 64510fa + fc88fa9
commit 51a10ff
Show file tree

Hide file tree

Showing 17 changed files with 2,337 additions and 2,303 deletions.
diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-v18.17
+v20.9
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# SVG icon sprite component for Angular 16
+# SVG icon sprite component for Angular 17+
 
 This library provides both a solution for generating SVG sprites and a [module](https://www.npmjs.com/package/ng-svg-icon-sprite) for including them.
 
@@ -62,7 +62,7 @@ Each time you add an icon, you need to run the script generating the sprite. You
 
 now execute the script:
 
-```
+```bash
 npm run generate:svg-sprite
 ```
 
@@ -72,7 +72,7 @@ go for the multi-color pattern [described below](#user-content-dealing-with-mult
 The script will take all SVG icons under `src/app/assets/icons` and create a sprite SVG into
 `src/app/assets/sprites` using the [svg symbols technique](https://css-tricks.com/svg-symbol-good-choice-icons/):
 
-```
+```bash
 app
 └── assets
     └── icons (icons source)
@@ -129,7 +129,7 @@ color: red;
 
 If you have another asset folder structure, set your input and output path in the npm script:
 
-```
+```bash
 svg2sprite sourcefolder destination/filename.svg
 ```
 
@@ -183,6 +183,7 @@ You can now leave out the path and just provide the icon name ([demo](https://ja
 Doing so you will still be able to override the default path by using the full syntax for particular icons that should use a different sprite file.
 
 ## Browser Support
+
 - Chrome (63)
 - Firefox (57)
 - Safari 11
@@ -191,6 +192,7 @@ Doing so you will still be able to override the default path by using the full s
 ## Accessibility
 
 In order to support screen readers and make the icons meaningful, you can use following patters:
+
 - add a `title` with descriptive text ([demo](https://jannicz.github.io/ng-svg-icon-sprite/#a11y))
 - optionally reference the title node using `aria-labelledby=”icon-title”`
 - optionally set the node's `role` to image (`role=”img”`)
@@ -210,8 +212,8 @@ Or use combinations of several methods to achieve better results, like described
 
 ## Compatibility
 
-This library is optimized for Angular 16, for 14 use [v. 1.12](https://www.npmjs.com/package/ng-svg-icon-sprite/v/1.12.0).
-If you combine multiple frameworks (i.e. React, Vue, etc.), it is recommended to use [svg-icon-sprite web component](https://www.npmjs.com/package/svg-icon-sprite) instead!
+This library is optimized for Angular 17+. If you combine multiple frameworks (i.e. React, Vue, etc.), it is recommended to use [svg-icon-sprite web component](https://www.npmjs.com/package/svg-icon-sprite) instead!
 
 ## Author & License
+
 - Jan Suwart | MIT License
diff --git a/docs/3rdpartylicenses.txt b/docs/3rdpartylicenses.txt
@@ -263,7 +263,7 @@ zone.js
 MIT
 The MIT License
 
-Copyright (c) 2010-2023 Google LLC. https://angular.io/license
+Copyright (c) 2010-2024 Google LLC. https://angular.io/license
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/docs/index.html b/docs/index.html
@@ -10,5 +10,5 @@
 <style>html{margin:0;padding:0;box-sizing:border-box}body{min-height:1000px;font-family:Helvetica,Arial,sans-serif;font-size:16px;line-height:1.5;margin:0;color:#24292e}</style><link rel="stylesheet" href="styles.9d09ae70fa88a85f.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.9d09ae70fa88a85f.css"></noscript></head>
 <body>
   <app-root></app-root>
-<script src="runtime.157532213e1e2223.js" type="module"></script><script src="polyfills.c37efa59bbdabd7a.js" type="module"></script><script src="main.bb76cc2a3d438927.js" type="module"></script></body>
+<script src="runtime.03ca564a617f1284.js" type="module"></script><script src="polyfills.30a5b742b6168de0.js" type="module"></script><script src="main.369790db2bae72e3.js" type="module"></script></body>
 </html>
diff --git a/docs/main.369790db2bae72e3.js b/docs/main.369790db2bae72e3.js
diff --git a/docs/main.bb76cc2a3d438927.js b/docs/main.bb76cc2a3d438927.js
diff --git a/docs/polyfills.30a5b742b6168de0.js b/docs/polyfills.30a5b742b6168de0.js
diff --git a/docs/polyfills.c37efa59bbdabd7a.js b/docs/polyfills.c37efa59bbdabd7a.js
diff --git a/docs/runtime.157532213e1e2223.js → docs/runtime.03ca564a617f1284.js b/docs/runtime.157532213e1e2223.js → docs/runtime.03ca564a617f1284.js
diff --git a/package.json b/package.json
@@ -1,9 +1,9 @@
 {
   "name": "ng-svg-icon-sprite-app",
-  "version": "1.13.2",
+  "version": "1.14.0",
   "license": "MIT",
   "author": "Jan Suwart",
-  "description": "Angular 16+ package for generating and using inline SVG icons in your project",
+  "description": "Angular 17+ package for generating and using inline SVG icons in your project",
   "bugs": {
     "url": "https://github.com/jannicz/ng-svg-icon-sprite/issues"
   },
@@ -28,47 +28,45 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^16.0.0",
-    "@angular/common": "^16.0.0",
-    "@angular/compiler": "^16.0.0",
-    "@angular/core": "^16.0.0",
-    "@angular/forms": "^16.0.0",
-    "@angular/platform-browser": "^16.0.0",
-    "@angular/platform-browser-dynamic": "^16.0.0",
-    "@angular/router": "^16.0.0",
-    "classlist.js": "^1.1.20150312",
-    "core-js": "^3.32.2",
+    "@angular/animations": "^17.x",
+    "@angular/common": "^17.x",
+    "@angular/compiler": "^17.x",
+    "@angular/core": "^17.x",
+    "@angular/forms": "^17.x",
+    "@angular/platform-browser": "^17.x",
+    "@angular/platform-browser-dynamic": "^17.x",
+    "@angular/router": "^17.x",
     "rxjs": "^7.8.1",
     "web-animations-js": "^2.3.2",
-    "zone.js": "0.14.0"
+    "zone.js": "0.14.5"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^16.0.0",
+    "@angular-devkit/build-angular": "^17.x",
     "@angular-devkit/build-ng-packagr": "^0.1002.0",
-    "@angular/cli": "^16.0.0",
-    "@angular/compiler-cli": "^16.0.0",
-    "@angular/language-service": "^16.0.0",
-    "@types/jasmine": "^4.3.6",
-    "@types/jasminewd2": "^2.0.11",
-    "@types/node": "^20.6.3",
+    "@angular/cli": "^17.x",
+    "@angular/compiler-cli": "^17.x",
+    "@angular/language-service": "^17.x",
+    "@types/jasmine": "^4.6.4",
+    "@types/jasminewd2": "^2.0.13",
+    "@types/node": "^20.12.8",
     "codelyzer": "^6.0.2",
     "cpr": "^3.0.1",
-    "jasmine-core": "^5.1.1",
+    "jasmine-core": "^5.1.2",
     "jasmine-spec-reporter": "^7.0.0",
-    "karma": "^6.4.2",
+    "karma": "^6.4.3",
     "karma-chrome-launcher": "^3.2.0",
     "karma-coverage-istanbul-reporter": "^3.0.3",
     "karma-jasmine": "^5.1.0",
     "karma-jasmine-html-reporter": "^2.1.0",
-    "ng-packagr": "^16.0.0",
+    "ng-packagr": "^17.x",
     "protractor": "7.0.0",
     "svg2sprite-cli": "^2.0.1",
     "svg4everybody": "^2.1.9",
-    "ts-node": "^10.9.1",
+    "ts-node": "^10.9.2",
     "tsickle": "^0.46.3",
     "tslib": "^2.6.2",
-    "eslint": "^8.49.0",
-    "typescript": "4.9"
+    "eslint": "^8.57.0",
+    "typescript": "5.x"
   },
   "keywords": [
     "icon",

diff --git a/projects/icon-sprite/README.md b/projects/icon-sprite/README.md
@@ -1,4 +1,4 @@
-# SVG icon sprite component for Angular 16
+# SVG icon sprite component for Angular 17+
 
 This library provides both a solution for generating SVG sprites and a [module](https://www.npmjs.com/package/ng-svg-icon-sprite) for including them.
 
@@ -62,7 +62,7 @@ Each time you add an icon, you need to run the script generating the sprite. You
 
 now execute the script:
 
-```
+```bash
 npm run generate:svg-sprite
 ```
 
@@ -72,7 +72,7 @@ go for the multi-color pattern [described below](#user-content-dealing-with-mult
 The script will take all SVG icons under `src/app/assets/icons` and create a sprite SVG into
 `src/app/assets/sprites` using the [svg symbols technique](https://css-tricks.com/svg-symbol-good-choice-icons/):
 
-```
+```bash
 app
 └── assets
     └── icons (icons source)
@@ -129,7 +129,7 @@ color: red;
 
 If you have another asset folder structure, set your input and output path in the npm script:
 
-```
+```bash
 svg2sprite sourcefolder destination/filename.svg
 ```
 
@@ -183,6 +183,7 @@ You can now leave out the path and just provide the icon name ([demo](https://ja
 Doing so you will still be able to override the default path by using the full syntax for particular icons that should use a different sprite file.
 
 ## Browser Support
+
 - Chrome (63)
 - Firefox (57)
 - Safari 11
@@ -191,6 +192,7 @@ Doing so you will still be able to override the default path by using the full s
 ## Accessibility
 
 In order to support screen readers and make the icons meaningful, you can use following patters:
+
 - add a `title` with descriptive text ([demo](https://jannicz.github.io/ng-svg-icon-sprite/#a11y))
 - optionally reference the title node using `aria-labelledby=”icon-title”`
 - optionally set the node's `role` to image (`role=”img”`)
@@ -210,8 +212,8 @@ Or use combinations of several methods to achieve better results, like described
 
 ## Compatibility
 
-This library is optimized for Angular 16, for 14 use [v. 1.12](https://www.npmjs.com/package/ng-svg-icon-sprite/v/1.12.0).
-If you combine multiple frameworks (i.e. React, Vue, etc.), it is recommended to use [svg-icon-sprite web component](https://www.npmjs.com/package/svg-icon-sprite) instead!
+This library is optimized for Angular 17+. If you combine multiple frameworks (i.e. React, Vue, etc.), it is recommended to use [svg-icon-sprite web component](https://www.npmjs.com/package/svg-icon-sprite) instead!
 
 ## Author & License
+
 - Jan Suwart | MIT License
diff --git a/projects/icon-sprite/package.json b/projects/icon-sprite/package.json
@@ -1,9 +1,9 @@
 {
   "name": "ng-svg-icon-sprite",
-  "version": "1.13.2",
+  "version": "1.14.0",
   "license": "MIT",
   "author": "Jan Suwart",
-  "description": "Angular 16+ package for generating and using inline SVG icons in your project",
+  "description": "Angular 17+ package for generating and using inline SVG icons in your project",
   "bugs": {
     "url": "https://github.com/jannicz/ng-svg-icon-sprite/issues"
   },
@@ -12,8 +12,8 @@
     "url": "git+https://github.com/jannicz/ng-svg-icon-sprite.git"
   },
   "peerDependencies": {
-    "@angular/common": "^16.0.0",
-    "@angular/core": "^16.0.0"
+    "@angular/common": "17.x || 18.x",
+    "@angular/core": "17.x || 18.x"
   },
   "keywords": [
     "icon",

diff --git a/projects/icon-sprite/src/lib/icon-sprite.component.spec.ts b/projects/icon-sprite/src/lib/icon-sprite.component.spec.ts
@@ -1,4 +1,4 @@
-import { async, ComponentFixture, inject, TestBed } from '@angular/core/testing';
+import { ComponentFixture, inject, TestBed } from '@angular/core/testing';
 import { IconSpriteComponent } from './icon-sprite.component';
 import { IconSpriteDirective } from './icon-sprite.directive';
 import { IconSpriteService } from './icon-sprite.service';
@@ -7,15 +7,15 @@ describe('IconSpriteComponent', () => {
   let component: IconSpriteComponent;
   let fixture: ComponentFixture<IconSpriteComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(async () => {
     TestBed.configureTestingModule({
       declarations: [
         IconSpriteComponent,
         IconSpriteDirective
       ]
     })
     .compileComponents();
-  }));
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(IconSpriteComponent);
@@ -132,7 +132,7 @@ describe('IconSpriteComponent using Service', () => {
   let component: IconSpriteComponent;
   let fixture: ComponentFixture<IconSpriteComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(async () => {
     TestBed.configureTestingModule({
       declarations: [
         IconSpriteComponent,
@@ -141,7 +141,7 @@ describe('IconSpriteComponent using Service', () => {
       providers: [IconSpriteService]
     })
     .compileComponents();
-  }));
+  });
 
   it('should access the default sprite path via its IconSpriteService',
     inject([IconSpriteService], (iconSpriteService: IconSpriteService) => {

diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -96,9 +96,11 @@ <h2 id="defaultpath">Default sprite path</h2>
         <pre><code>import {{ '{' }} IconSpriteModule {{ '}' }} from 'ng-svg-icon-sprite';
 import {{ '{' }} environment {{ '}' }} from '../environments/environment';
 
-@NgModule({{ '{' }}
+&#64;NgModule({{ '{' }}
   imports: [
     IconSpriteModule.forRoot({{ '{' }} path: environment.spritePath {{ '}' }})
+  ]
+)
 </code></pre>
         <pre><code>&lt;svg-icon-sprite
   [src]="'star_100x100'"

diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts
@@ -1,8 +1,8 @@
-import { TestBed, async } from '@angular/core/testing';
+import { TestBed } from '@angular/core/testing';
 import { AppComponent } from './app.component';
 import { IconSpriteModule } from '../../projects/icon-sprite/src/lib/icon-sprite.module';
 describe('AppComponent', () => {
-  beforeEach(async(() => {
+  beforeEach(async () => {
     TestBed.configureTestingModule({
       imports: [
         IconSpriteModule
@@ -11,21 +11,21 @@ describe('AppComponent', () => {
         AppComponent
       ],
     }).compileComponents();
-  }));
-  it('should create the app', async(() => {
+  });
+  it('should create the app',  () => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.debugElement.componentInstance;
     expect(app).toBeTruthy();
-  }));
-  it(`should have as title 'SVG-Icon-Sprite`, async(() => {
+  });
+  it(`should have as title 'SVG-Icon-Sprite`, () => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.debugElement.componentInstance;
     expect(app.title).toEqual('SVG-Icon-Sprite');
-  }));
-  it('should render title in a h1 tag', async(() => {
+  });
+  it('should render title in a h1 tag', () => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.debugElement.nativeElement;
     expect(compiled.querySelector('h1').textContent).toContain('SVG-Icon-Sprite');
-  }));
+  });
 });
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -1,12 +1,12 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { IconSpriteService } from 'ng-svg-icon-sprite';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
-export class AppComponent implements OnInit {
+export class AppComponent {
 
   public changed = false;
   public changeDone = false;
@@ -16,8 +16,6 @@ export class AppComponent implements OnInit {
     private iconSpriteService: IconSpriteService
   ) {}
 
-  ngOnInit() {}
-
   // Optionally, change the default sprite path during runtime
   changeDefaultSpritePath() {
     this.changed = true;