feat(ng): support angular 9

browserslist

@@ -0,0 +1,12 @@
+# 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
+
+# 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 # For IE 9-11 support, remove 'not'.

package.json

@@ -33,51 +33,50 @@
     "version": "conventional-changelog -p angular -i CHANGELOG.md -s"
   },
   "dependencies": {
-    "@angular/common": "7.2.11",
-    "@angular/core": "7.2.11",
-    "@angular/forms": "7.2.11",
-    "@angular/http": "7.2.11",
-    "@angular/platform-browser": "7.2.11",
-    "@angular/platform-browser-dynamic": "7.2.11",
-    "@angular/router": "7.2.11",
-    "@ionic-native/core": "5.3.0",
-    "@ionic-native/splash-screen": "5.3.0",
-    "@ionic-native/status-bar": "5.3.0",
-    "@ionic/angular": "4.1.2",
-    "core-js": "2.6.5",
+    "@angular/common": "8.2.14",
+    "@angular/core": "8.2.14",
+    "@angular/forms": "8.2.14",
+    "@angular/platform-browser": "8.2.14",
+    "@angular/platform-browser-dynamic": "8.2.14",
+    "@angular/router": "8.2.14",
+    "@ionic-native/core": "5.19.1",
+    "@ionic-native/splash-screen": "5.19.1",
+    "@ionic-native/status-bar": "5.19.1",
+    "@ionic/angular": "4.11.8",
+    "core-js": "3.6.4",
     "lottie-web": "5.5.0",
-    "rxjs": "6.4.0",
-    "zone.js": "0.8.29"
+    "rxjs": "6.5.4",
+    "zone.js": "0.9.1"
   },
   "devDependencies": {
-    "@angular-devkit/architect": "0.13.7",
-    "@angular-devkit/build-angular": "0.13.7",
-    "@angular-devkit/build-ng-packagr": "0.13.7",
-    "@angular-devkit/core": "7.3.7",
-    "@angular-devkit/schematics": "7.3.7",
-    "@angular/cli": "7.3.7",
-    "@angular/compiler": "7.2.11",
-    "@angular/compiler-cli": "7.2.11",
-    "@angular/language-service": "7.2.11",
-    "@ionic/angular-toolkit": "1.5.0",
+    "@angular-devkit/architect": "0.803.23",
+    "@angular-devkit/build-angular": "0.803.23",
+    "@angular-devkit/build-ng-packagr": "0.803.23",
+    "@angular-devkit/core": "8.3.23",
+    "@angular-devkit/schematics": "8.3.23",
+    "@angular/cli": "8.3.23",
+    "@angular/compiler": "8.2.14",
+    "@angular/compiler-cli": "8.2.14",
+    "@angular/language-service": "8.2.14",
+    "@ionic/angular-toolkit": "2.1.2",
     "@types/jasmine": "3.3.10",
     "@types/jasminewd2": "2.0.6",
     "@types/node": "10.12.24",
-    "codelyzer": "4.5.0",
+    "codelyzer": "5.0.1",
     "jasmine-core": "3.3.0",
     "jasmine-spec-reporter": "4.2.1",
     "karma": "4.0.1",
     "karma-chrome-launcher": "2.2.0",
     "karma-coverage-istanbul-reporter": "2.0.5",
     "karma-jasmine": "2.0.1",
     "karma-jasmine-html-reporter": "1.4.0",
-    "ng-packagr": "4.7.1",
-    "prettier": "~1.18.2",
+    "ng-packagr": "5.7.1",
+    "prettier": "1.19.1",
     "protractor": "5.4.2",
-    "ts-node": "8.0.3",
-    "tsickle": "0.34.3",
-    "tslib": "1.9.3",
-    "tslint": "5.14.0",
-    "typescript": "3.2.4"
+    "ts-node": "8.6.2",
+    "tsickle": "0.37.0",
+    "tslib": "1.10.0",
+    "tslint": "5.20.1",
+    "typescript": "3.5.3"
   }
 }

projects/lottie/package.json

@@ -20,8 +20,8 @@
   },
   "dependencies": {},
   "peerDependencies": {
-    "@angular/common": ">=7.0.0 <9.0.0",
-    "@angular/core": ">=7.0.0 <9.0.0",
+    "@angular/common": ">=8.0.0 <10.0.0",
+    "@angular/core": ">=8.0.0 <10.0.0",
     "lottie-web": "^5.4.4"
   }
 }

projects/lottie/src/lib/lottie.component.ts

@@ -35,7 +35,7 @@ export class LottieComponent implements OnInit {
 
   @Output() animationCreated = new EventEmitter<LottieAnimation>();
 
-  @ViewChild('lottieContainer') lottieContainer: ElementRef;
+  @ViewChild('lottieContainer', { static: true }) lottieContainer: ElementRef;
 
   public viewWidth: string;
   public viewHeight: string;

src/app/app-routing.module.ts

@@ -3,7 +3,7 @@ import { Routes, RouterModule } from '@angular/router';
 
 const routes: Routes = [
   { path: '', redirectTo: 'home', pathMatch: 'full' },
-  { path: 'home', loadChildren: './home/home.module#HomePageModule' }
+  { path: 'home', loadChildren: () => import('./home/home.module').then(m => m.HomePageModule) }
 ];
 
 @NgModule({

src/app/home/home.page.html

@@ -6,7 +6,7 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content padding>
+<ion-content class="ion-padding">
   <fiv-lottie [params]="lottieParams" [width]="250" [height]="250" (animationCreated)=onAnimationCreated($event)>
   </fiv-lottie>
   <ion-grid fixed>

tsconfig.json

@@ -2,14 +2,15 @@
   "compileOnSave": false,
   "compilerOptions": {
     "baseUrl": "./",
+    "downlevelIteration": true,
     "outDir": "./dist/out-tsc",
     "sourceMap": true,
     "declaration": false,
-    "module": "es2015",
+    "module": "esnext",
     "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
-    "target": "es5",
+    "target": "es2015",
     "typeRoots": [
       "node_modules/@types"
     ],

tslint.json

@@ -126,12 +126,12 @@
       "kebab-case"
     ],
     "no-output-on-prefix": true,
-    "use-input-property-decorator": true,
-    "use-output-property-decorator": true,
-    "use-host-property-decorator": true,
+    "no-inputs-metadata-property": true,
+    "no-outputs-metadata-property": true,
+    "no-host-metadata-property": true,
     "no-input-rename": true,
     "no-output-rename": true,
-    "use-life-cycle-interface": true,
+    "use-lifecycle-interface": true,
     "use-pipe-transform-interface": true,
     "directive-class-suffix": true
   }