Merge pull request #127 from czeckd/strict

Use Angular strict settings

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2020 David Czeck.
+Copyright (c) 2021 David Czeck.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -3,7 +3,7 @@
 Angular SVG Icon
 =========
 
-The **angular-svg-icon** is an Angular 11 service and component that provides a
+The **angular-svg-icon** is an Angular 12 service and component that provides a
 means to inline SVG files to allow for them to be easily styled by CSS and code.
 
 The service provides an icon registery that loads and caches a SVG indexed by
@@ -19,6 +19,7 @@ This [demo](https://czeckd.github.io/angular-svg-icon/) shows this module in act
 $ npm i angular-svg-icon --save
 ```
 **Note on earlier versions of Angular:** 
+- For Angular 11, use angular-svg-icon@11.2.0
 - For Angular 10, use angular-svg-icon@10.0.0
 - For Angular 9, use angular-svg-icon@9.2.0
 - For Angular 8, use angular-svg-icon@8.0.0
@@ -234,6 +235,22 @@ This is executed on browser side. Note that the fallback when no data is
 available uses `SvgHttpLoader`, which is also the default loader if you don't
 provide one.
 
+## Example Project with Angular Universal and `angular-svg-icon`
+
+An Angular Universal [example project](https://github.com/edulelis/demo-universal-angular-svg-loader) is also available. The basic steps to get it work is:
+
+1. Add this snippet to the `package.json` file to prevent compilation issues:
+```js
+ "browser": {
+ "fs": false,
+ "path": false,
+ "os": false
+ }
+```
+2. Add `ServerTransferStateModule` to `app.server.module`
+3. Add `BrowserTransferStateModule` to `app.module`
+4. The loader should be different per platform, so the factory should receive the `PLATFORM_ID` and load the correct class appropriately (this is already added in the example).
+
 ## SVG Preparation
 The SVG should be modified to remove the height and width attributes from the file
 per Sara Soueidan's advice in "[Making SVGs Responsive With

angular.json

@@ -20,7 +20,6 @@
  "skipTests": true
  },
  "@schematics/angular:module": {
- "skipTests": true
  },
  "@schematics/angular:pipe": {
  "skipTests": true
@@ -41,15 +40,20 @@
  "main": "src/main.ts",
  "polyfills": "src/polyfills.ts",
  "tsConfig": "tsconfig.app.json",
- "aot": true,
  "assets": [
  "src/favicon.ico",
  "src/assets"
  ],
  "styles": [
  "src/styles.scss"
  ],
- "scripts": []
+ "scripts": [],
+ "vendorChunk": true,
+ "extractLicenses": false,
+ "buildOptimizer": false,
+ "sourceMap": true,
+ "optimization": false,
+ "namedChunks": true
  },
  "configurations": {
  "production": {

package.json

@@ -1,7 +1,7 @@
 {
  "name": "svg-icon",
- "description": "Angular 11 component for inlining SVGs allowing them to be easily styled with CSS.",
- "version": "11.2.0",
+ "description": "Angular 12 component for inlining SVGs allowing them to be easily styled with CSS.",
+ "version": "12.0.0",
  "repository": {
  "type": "git",
  "url": "https://github.com/czeckd/angular-svg-icon.git"
@@ -15,49 +15,41 @@
  ],
  "scripts": {
  "ng": "ng",
- "start": "ng serve --prod",
- "build": "ng build",
- "dist": "ng build --prod angular-svg-icon && cp README.md LICENSE ./dist/angular-svg-icon/",
+ "start": "ng serve --configuration production",
+ "build": "ng build --configuration production",
+ "dist": "ng build --configuration production angular-svg-icon && cp README.md LICENSE ./dist/angular-svg-icon/",
  "test": "ng test --source-map=false angular-svg-icon",
  "coverage": "ng test --code-coverage angular-svg-icon",
  "lint": "ng lint",
  "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
- "@angular/animations": "~11.1.2",
- "@angular/common": "~11.1.2",
- "@angular/compiler": "~11.1.2",
- "@angular/core": "~11.1.2",
- "@angular/forms": "~11.1.2",
- "@angular/platform-browser": "~11.1.2",
- "@angular/platform-browser-dynamic": "~11.1.2",
- "@angular/router": "~11.1.2",
+ "@angular/animations": "~12.0.1",
+ "@angular/common": "~12.0.1",
+ "@angular/compiler": "~12.0.1",
+ "@angular/core": "~12.0.1",
+ "@angular/forms": "~12.0.1",
+ "@angular/platform-browser": "~12.0.1",
+ "@angular/platform-browser-dynamic": "~12.0.1",
+ "@angular/router": "~12.0.1",
  "rxjs": "~6.6.3",
- "tslib": "^2.0.0",
- "zone.js": "~0.10.3"
+ "tslib": "^2.2.0",
+ "zone.js": "~0.11.4"
  },
  "devDependencies": {
- "@angular-devkit/build-angular": "~0.1101.4",
- "@angular-devkit/core": "^11.1.4",
- "@angular/cli": "~11.1.4",
- "@angular/compiler-cli": "~11.1.2",
- "@angular/language-service": "~11.1.2",
+ "@angular-devkit/build-angular": "~12.0.1",
+ "@angular/cli": "~12.0.1",
+ "@angular/compiler-cli": "~12.0.1",
  "@types/jasmine": "~3.6.0",
- "@types/jasminewd2": "~2.0.3",
  "@types/node": "^12.11.1",
- "codelyzer": "^6.0.0",
- "jasmine-core": "~3.6.0",
- "jasmine-spec-reporter": "~5.0.0",
- "karma": "~5.2.3",
+ "jasmine-core": "~3.7.0",
+ "karma": "~6.3.0",
  "karma-chrome-launcher": "~3.1.0",
- "karma-coverage-istanbul-reporter": "~3.0.2",
+ "karma-coverage": "~2.0.3",
  "karma-jasmine": "~4.0.0",
  "karma-jasmine-html-reporter": "^1.5.0",
- "ng-packagr": "^11.0.2",
- "protractor": "~7.0.0",
- "ts-node": "~7.0.0",
- "tslint": "~6.1.0",
- "typescript": "~4.0.5"
+ "ng-packagr": "^12.0.0",
+ "typescript": "~4.2.3"
  }
 }

projects/angular-svg-icon/package.json

@@ -1,7 +1,7 @@
 {
  "name": "angular-svg-icon",
- "description": "Angular 11 component for inlining SVGs allowing them to be easily styled with CSS.",
- "version": "11.2.0",
+ "description": "Angular 12 component for inlining SVGs allowing them to be easily styled with CSS.",
+ "version": "12.0.0",
  "repository": {
  "type": "git",
  "url": "https://github.com/czeckd/angular-svg-icon.git"
@@ -14,11 +14,11 @@
  "icon"
  ],
  "peerDependencies": {
- "@angular/core": ">=11.0.0",
- "@angular/common": ">=11.0.0",
+ "@angular/core": ">=12.0.0",
+ "@angular/common": ">=12.0.0",
  "rxjs": ">=6.6.0"
  },
  "dependencies": {
- "tslib": "^2.0.0"
+ "tslib": "^2.2.0"
  }
 }

projects/angular-svg-icon/src/lib/svg-icon-registry.service.ts

@@ -17,7 +17,7 @@ export class SvgIconRegistryService {
  constructor(
  private loader: SvgLoader,
  @Inject(PLATFORM_ID) private platformId: Object,
- @Optional() @Inject(SERVER_URL) protected serverUrl: string,
+ @Optional() @Inject(SERVER_URL) protected serverUrl: string | undefined,
  @Optional() @Inject(DOCUMENT) private _document: any) {
  this.document = this._document;
  }
@@ -33,7 +33,7 @@ export class SvgIconRegistryService {
  }
 
  /** Load a SVG to the registry from a URL. */
- loadSvg(url: string, name: string = url): Observable<SVGElement> {
+ loadSvg(url: string, name: string = url): Observable<SVGElement|undefined> | undefined {
 
  // not sure if there should be a possibility to use name for server usage
  // so overriding it for now if provided
@@ -68,7 +68,7 @@ export class SvgIconRegistryService {
  }
 
  /** Get loaded SVG from registry by name. (also works by url because of blended map) */
- getSvgByName(name: string): Observable<SVGElement> {
+ getSvgByName(name: string): Observable<SVGElement|undefined> | undefined {
  if (this.iconsByUrl.has(name)) {
  return observableOf(this.iconsByUrl.get(name));
  } else if (this.iconsLoadingByUrl.has(name)) {
@@ -91,7 +91,7 @@ export function SVG_ICON_REGISTRY_PROVIDER_FACTORY(
  platformId: object,
  serverUrl?: string,
  document?: any) {
- return parentRegistry || new SvgIconRegistryService(loader, platformId,  serverUrl, document);
+ return parentRegistry || new SvgIconRegistryService(loader, platformId, serverUrl, document);
 }
 
 export const SVG_ICON_REGISTRY_PROVIDER = {