angular 8 migration

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## v0.0.7
+
+- `angular 8` migration.
+
 ## v0.0.6
 
 - Bump `intl-tel-input` dependency to `^15.0.0`.

browserslist

@@ -1,11 +1,12 @@
-# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
 # For additional information regarding the format and rule options, please see:
 # https://github.com/browserslist/browserslist#queries
-#
-# For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
 
 > 0.5%
 last 2 versions
 Firefox ESR
 not dead
-not IE 9-11
+not IE 9-11 # For IE 9-11 support, remove 'not'.

package.json

@@ -25,53 +25,52 @@
     "ng5",
     "ng6",
     "ng7",
+    "ng8",
     "intl-tel-input"
   ],
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/mpalourdio/intl-tel-input-ng/issues"
   },
   "peerDependencies": {
-    "@angular/common": "^7.0.0",
-    "@angular/core": "^7.0.0",
-    "@angular/forms": "^7.0.0",
+    "@angular/common": "^8.0.0-rc.4",
+    "@angular/core": "^8.0.0-rc.4",
+    "@angular/forms": "^8.0.0-rc.4",
     "intl-tel-input": "^15.0.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.13.0",
-    "@angular-devkit/build-ng-packagr": "~0.13.0",
-    "@angular/cli": "~7.3.0",
-    "@angular/common": "^7.0.0",
-    "@angular/compiler": "^7.0.0",
-    "@angular/compiler-cli": "^7.0.0",
-    "@angular/core": "^7.0.0",
-    "@angular/forms": "^7.0.0",
-    "@angular/language-service": "^7.0.0",
-    "@angular/platform-browser": "^7.0.0",
-    "@angular/platform-browser-dynamic": "^7.0.0",
-    "@types/jasmine": "~2.8.8",
+    "@angular-devkit/build-angular": "~0.800.0-rc.4",
+    "@angular-devkit/build-ng-packagr": "~0.800.0-rc.4",
+    "@angular/cli": "~8.0.0-rc.4",
+    "@angular/common": "^8.0.0-rc.4",
+    "@angular/compiler": "^8.0.0-rc.4",
+    "@angular/compiler-cli": "^8.0.0-rc.4",
+    "@angular/core": "^8.0.0-rc.4",
+    "@angular/forms": "^8.0.0-rc.4",
+    "@angular/language-service": "^8.0.0-rc.4",
+    "@angular/platform-browser": "^8.0.0-rc.4",
+    "@angular/platform-browser-dynamic": "^8.0.0-rc.4",
+    "@types/jasmine": "~3.3.8",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "~8.9.4",
-    "codelyzer": "~4.5.0",
-    "core-js": "^2.5.4",
+    "codelyzer": "^5.0.0",
     "coveralls": "^3.0.1",
     "intl-tel-input": "^15.0.0",
-    "jasmine-core": "~2.99.1",
+    "jasmine-core": "~3.4.0",
     "jasmine-spec-reporter": "~4.2.1",
-    "karma": "~4.0.0",
+    "karma": "~4.1.0",
     "karma-chrome-launcher": "~2.2.0",
     "karma-coverage-istanbul-reporter": "~2.0.1",
     "karma-firefox-launcher": "^1.1.0",
-    "karma-jasmine": "~1.1.2",
-    "karma-jasmine-html-reporter": "^0.2.2",
-    "ng-packagr": "^4.2.0",
-    "rxjs": "~6.4.0",
+    "karma-jasmine": "~2.0.1",
+    "karma-jasmine-html-reporter": "^1.4.0",
+    "ng-packagr": "^5.1.0",
+    "rxjs": "^6.4.0",
     "ts-node": "~7.0.0",
-    "tsickle": ">=0.34.0",
     "tslib": "^1.9.0",
-    "tslint": "~5.11.0",
-    "typescript": "~3.2.2",
-    "zone.js": "~0.8.26"
+    "tslint": "~5.15.0",
+    "typescript": "~3.4.3",
+    "zone.js": "~0.9.1"
   },
   "engines": {
     "node": ">= 8.9.0",

polyfills.ts

@@ -21,9 +21,6 @@
 /** IE10 and IE11 requires the following for NgClass support on SVG elements */
 // import 'classlist.js';  // Run `npm install --save classlist.js`.
 
-/** IE10 and IE11 requires the following for the Reflect API. */
-// import 'core-js/es6/reflect';
-
 /**
  * Web Animations `@angular/platform-browser/animations`
  * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
@@ -46,7 +43,7 @@
  *
  * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
  * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
- * (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
  *
  *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
  *  with the following flag, it will bypass `zone.js` patch for IE/Edge

src/lib/components/intl-tel-input.component.spec.ts

@@ -182,7 +182,7 @@ describe('IntlTelInputComponent', () => {
             .parentNode
             .querySelector('.preferred');
 
-        expect(element.getAttribute('data-country-code')).toBe(component.options['onlyCountries'][0]);
+        expect(element.getAttribute('data-country-code')).toBe(component.options.onlyCountries[0]);
     });
 
     it('should be possible to set localizedCountries option', () => {

src/lib/components/intl-tel-input.component.ts

@@ -7,7 +7,6 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-/// <reference path="../@types/intl-tel-input/index.d.ts" />
 import { AfterViewInit, Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';
 import { ControlContainer, NgForm } from '@angular/forms';
 import * as intlTelInput from 'intl-tel-input';
@@ -31,25 +30,22 @@ export class IntlTelInputComponent implements AfterViewInit {
     @Input() public options: IntlTelInputOptions = {};
     @Input() public required: boolean;
     @Output() private E164PhoneNumberChange = new EventEmitter<string>();
-    @ViewChild('intlTelInput') private _inputElement: any;
+    @ViewChild('intlTelInput') private _inputElement: ElementRef;
     private _phoneNumber: string;
     private _intlTelInput: any;
 
     private static modifyCountryData(): void {
-        (<any>window).intlTelInputGlobals.getCountryData().forEach((country: CountryData) =>
+        (window as any).intlTelInputGlobals.getCountryData().forEach((country: CountryData) =>
             country.name = country.name.replace(/.+\((.+)\)/, '$1'));
     }
 
     public ngAfterViewInit(): void {
-        const phoneElement = (<ElementRef>this._inputElement).nativeElement;
-        const options = this.options;
-
         if (this.onlyLocalized) {
             IntlTelInputComponent.modifyCountryData();
         }
 
         const intlTelInputInstance = intlTelInput;
-        this._intlTelInput = intlTelInputInstance(phoneElement, options);
+        this._intlTelInput = intlTelInputInstance(this._inputElement.nativeElement, this.options);
     }
 
     get intlTelInput(): any {

tsconfig.json

@@ -1,17 +1,24 @@
 {
   "compileOnSave": false,
   "compilerOptions": {
+    "baseUrl": "./",
     "outDir": "./dist/out-tsc",
     "sourceMap": true,
     "declaration": false,
+    "module": "esnext",
     "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "importHelpers": true,
-    "target": "es5",
+    "target": "es2015",
     "typeRoots": [
       "node_modules/@types"
     ],
+    "paths": {
+      "intl-tel-input": [
+        "src/lib/@types/intl-tel-input"
+      ]
+    },
     "lib": [
       "es2018",
       "dom"

tsconfig.lib.json

@@ -3,20 +3,17 @@
   "compilerOptions": {
     "outDir": "./out-tsc/lib",
     "target": "es2015",
-    "module": "es2015",
     "declaration": true,
     "inlineSources": true,
     "noImplicitAny": true,
     "noImplicitReturns": true,
     "types": [],
-    "baseUrl": "./",
     "lib": [
       "dom",
       "es2018"
     ]
   },
   "angularCompilerOptions": {
-    "annotateForClosureCompiler": true,
     "skipTemplateCodegen": true,
     "strictMetadataEmit": true,
     "fullTemplateTypeCheck": true,