angular 13 update

.gitignore

@@ -27,6 +27,7 @@ package-lock.json
 !.vscode/extensions.json
 
 # misc
+/.angular/cache
 /.sass-cache
 /connect.lock
 /coverage

README.md

@@ -1,28 +1,28 @@
-# SB Admin rewritten in Angular9 and Bootstrap 4
+# SB Admin rewritten in Angular 13 and Bootstrap 5
 
-Simple Dashboard Admin App built using Angular 9 and Bootstrap 4
+Simple Dashboard Admin App built using Angular 13 and Bootstrap 5
 
-This project is a port of the famous Free Admin Bootstrap Theme [SB Admin v8.0](http://startbootstrap.com/template-overviews/sb-admin-2/) to Angular9 Theme.
+This project is a port of the famous Free Admin Bootstrap Theme [SB Admin v8.0](http://startbootstrap.com/template-overviews/sb-admin-2/) to Angular 13 Theme.
 
 Powered by [StartAngular](http://startangular.com/) & [StrapUI](http://strapui.com/)
 
 ## [Demo](http://rawgit.com/start-angular/SB-Admin-BS4-Angular-6/master/dist/)
 
 ## [SB Admin Material version](https://github.com/start-javascript/sb-admin-material)
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.0.2.
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.2.2.
 
 ### Introduction
 
 Provides fast, reliable and extensible starter for the development of Angular projects.
 
-`sb-admin-bs4-angular9` provides the following features:
+`sb-admin-bs5-angular13` provides the following features:
 
 -   Developed using boostrap-v6.0.0
--   angular-v9.0.2
--   angular/cli-v9.0.2
--   [ng-bootstrap-v6.0.0](https://github.com/ng-bootstrap/)
--   [ngx-translate-v12.1.1](https://github.com/ngx-translate)
+-   angular-v13.2.2
+-   angular/cli-v13.2.2
+-   [ng-bootstrap-v12.0.0](https://github.com/ng-bootstrap/)
+-   [ngx-translate-v14.0.0](https://github.com/ngx-translate)
 -   Following the best practices.
 -   Ahead-of-Time compilation support.
 -   Official Angular i18n support.
@@ -31,7 +31,7 @@ Provides fast, reliable and extensible starter for the development of Angular pr
 
 ### How to start
 
-**Note** that this seed project requires **node >=v8.9.0 and npm >=4**.
+**Note** that this seed project requires **node >=v12.0.0 and npm >=6**.
 
 In order to start the project use:
 

angular.json

@@ -83,13 +83,6 @@
                         "styles": ["node_modules/font-awesome/css/font-awesome.css", "src/styles/app.scss"],
                         "assets": ["src/assets", "src/favicon.ico"]
                     }
-                },
-                "lint": {
-                    "builder": "@angular-devkit/build-angular:tslint",
-                    "options": {
-                        "tsConfig": ["src/tsconfig.app.json", "src/tsconfig.spec.json"],
-                        "exclude": ["**/node_modules/**"]
-                    }
                 }
             }
         },
@@ -109,13 +102,6 @@
                             "devServerTarget": "test-ng7:serve:production"
                         }
                     }
-                },
-                "lint": {
-                    "builder": "@angular-devkit/build-angular:tslint",
-                    "options": {
-                        "tsConfig": "e2e/tsconfig.e2e.json",
-                        "exclude": ["**/node_modules/**"]
-                    }
                 }
             }
         }

package.json

@@ -14,31 +14,31 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "12.2.16",
-    "@angular/common": "12.2.16",
-    "@angular/compiler": "12.2.16",
-    "@angular/core": "12.2.16",
-    "@angular/forms": "12.2.16",
-    "@angular/localize": "12.2.16",
-    "@angular/platform-browser": "12.2.16",
-    "@angular/platform-browser-dynamic": "12.2.16",
-    "@angular/router": "12.2.16",
-    "@ng-bootstrap/ng-bootstrap": "7.0.0",
-    "@ngx-translate/core": "13.0.0",
-    "@ngx-translate/http-loader": "6.0.0",
-    "chart.js": "2.9.4",
-    "core-js": "3.6.5",
+    "@angular/animations": "13.2.2",
+    "@angular/common": "13.2.2",
+    "@angular/compiler": "13.2.2",
+    "@angular/core": "13.2.2",
+    "@angular/forms": "13.2.2",
+    "@angular/localize": "13.2.2",
+    "@angular/platform-browser": "13.2.2",
+    "@angular/platform-browser-dynamic": "13.2.2",
+    "@angular/router": "13.2.2",
+    "@ng-bootstrap/ng-bootstrap": "12.0.0",
+    "@ngx-translate/core": "14.0.0",
+    "@ngx-translate/http-loader": "7.0.0",
+    "chart.js": "3.7.1",
+    "core-js": "3.21.0",
     "font-awesome": "4.7.0",
-    "ng2-charts": "2.4.2",
-    "rxjs": "6.6.3",
-    "tslib": "^2.0.0",
+    "ng2-charts": "3.0.8",
+    "rxjs": "7.5.4",
+    "tslib": "2.3.1",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~12.2.16",
-    "@angular/cli": "12.2.16",
-    "@angular/compiler-cli": "12.2.16",
-    "@angular/language-service": "12.2.16",
+    "@angular-devkit/build-angular": "~13.2.3",
+    "@angular/cli": "13.2.3",
+    "@angular/compiler-cli": "13.2.2",
+    "@angular/language-service": "13.2.2",
     "@types/jasmine": "~3.6.0",
     "@types/jasminewd2": "2.0.8",
     "@types/node": "13.7.6",
@@ -55,7 +55,7 @@
     "protractor": "7.0.0",
     "ts-node": "8.6.2",
     "tslint": "6.1.3",
-    "typescript": "4.3.5",
-    "yarn": "1.22.10"
+    "typescript": "4.5.5",
+    "yarn": "1.22.17"
   }
-}
+}

src/app/layout/charts/charts.component.html

@@ -10,7 +10,7 @@
                     <canvas
                         (chartClick)="chartClicked($event)"
                         (chartHover)="chartHovered($event)"
-                        [chartType]="barChartType"
+                        [type]="barChartType"
                         [datasets]="barChartData"
                         [labels]="barChartLabels"
                         [legend]="barChartLegend"
@@ -33,7 +33,7 @@
                     <canvas
                         (chartClick)="chartClicked($event)"
                         (chartHover)="chartHovered($event)"
-                        [chartType]="doughnutChartType"
+                        [type]="doughnutChartType"
                         [data]="doughnutChartData"
                         [labels]="doughnutChartLabels"
                         baseChart
@@ -54,7 +54,7 @@
                     <canvas
                         (chartClick)="chartClicked($event)"
                         (chartHover)="chartHovered($event)"
-                        [chartType]="radarChartType"
+                        [type]="radarChartType"
                         [datasets]="radarChartData"
                         [labels]="radarChartLabels"
                         baseChart
@@ -73,9 +73,8 @@
                     <canvas
                         (chartClick)="chartClicked($event)"
                         (chartHover)="chartHovered($event)"
-                        [chartType]="pieChartType"
+                        [type]="pieChartType"
                         [data]="pieChartData"
-                        [labels]="pieChartLabels"
                         baseChart
                         height="150px"
                     >
@@ -94,7 +93,7 @@
                     <canvas
                         (chartClick)="chartClicked($event)"
                         (chartHover)="chartHovered($event)"
-                        [chartType]="polarAreaChartType"
+                        [type]="polarAreaChartType"
                         [data]="polarAreaChartData"
                         [labels]="polarAreaChartLabels"
                         [legend]="polarAreaLegend"
@@ -111,11 +110,11 @@
                     Line Chart
                 </div>
                 <div class="card-body">
+                    <!--[colors]="lineChartColors"-->
                     <canvas
                         (chartClick)="chartClicked($event)"
                         (chartHover)="chartHovered($event)"
-                        [chartType]="lineChartType"
-                        [colors]="lineChartColors"
+                        [type]="lineChartType"
                         [datasets]="lineChartData"
                         [labels]="lineChartLabels"
                         [legend]="lineChartLegend"

src/app/layout/charts/charts.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { routerTransition } from '../../router.animations';
+import { ChartData, ChartType } from "chart.js";
 
 @Component({
     selector: 'app-charts',
@@ -14,7 +15,7 @@ export class ChartsComponent implements OnInit {
         responsive: true
     };
     public barChartLabels: string[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
-    public barChartType: string;
+    public barChartType: ChartType;
     public barChartLegend: boolean;
 
     public barChartData: any[] = [
@@ -24,21 +25,34 @@ export class ChartsComponent implements OnInit {
 
     // Doughnut
     public doughnutChartLabels: string[] = ['Download Sales', 'In-Store Sales', 'Mail-Order Sales'];
-    public doughnutChartData: number[] = [350, 450, 100];
-    public doughnutChartType: string;
+    public doughnutChartData: ChartData<'doughnut'> = {
+        labels: this.doughnutChartLabels,
+        datasets: [
+            { data: [ 350, 450, 100 ] },
+            { data: [ 50, 150, 120 ] },
+            { data: [ 250, 130, 70 ] }
+        ]
+    };
+    public doughnutChartType: ChartType = 'doughnut';
 
     // Radar
     public radarChartLabels: string[] = ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'];
     public radarChartData: any = [
         { data: [65, 59, 90, 81, 56, 55, 40], label: 'Series A' },
         { data: [28, 48, 40, 19, 96, 27, 100], label: 'Series B' }
     ];
-    public radarChartType: string;
+    public radarChartType: ChartType;
 
     // Pie
-    public pieChartLabels: string[] = ['Download Sales', 'In-Store Sales', 'Mail Sales'];
-    public pieChartData: number[] = [300, 500, 100];
-    public pieChartType: string;
+    // public pieChartLabels: string[] = ['Download Sales', 'In-Store Sales', 'Mail Sales'];
+    // public pieChartData: number[] = [300, 500, 100];
+    public pieChartData: ChartData<'pie', number[], string | string[]> = {
+        labels: [ [ 'Download', 'Sales' ], [ 'In', 'Store', 'Sales' ], 'Mail Sales' ],
+        datasets: [ {
+            data: [ 300, 500, 100 ]
+        } ]
+    };
+    public pieChartType: ChartType;
 
     // PolarArea
     public polarAreaChartLabels: string[] = [
@@ -48,10 +62,17 @@ export class ChartsComponent implements OnInit {
         'Telesales',
         'Corporate Sales'
     ];
-    public polarAreaChartData: number[] = [300, 500, 100, 40, 120];
+    public polarAreaChartData: ChartData<'polarArea'> = {
+        labels: this.polarAreaChartLabels,
+        datasets: [ {
+            data: [ 300, 500, 100, 40, 120 ],
+            label: 'Series 1'
+        } ]
+    };
+
     public polarAreaLegend: boolean;
 
-    public polarAreaChartType: string;
+    public polarAreaChartType: ChartType;
 
     // lineChart
     public lineChartData: Array<any> = [
@@ -93,7 +114,7 @@ export class ChartsComponent implements OnInit {
         }
     ];
     public lineChartLegend: boolean;
-    public lineChartType: string;
+    public lineChartType: ChartType;
 
     constructor() {}
 
@@ -123,7 +144,7 @@ export class ChartsComponent implements OnInit {
     ngOnInit() {
         this.barChartType = 'bar';
         this.barChartLegend = true;
-        this.doughnutChartType = 'doughnut';
+        // this.doughnutChartType = 'doughnut';
         this.radarChartType = 'radar';
         this.pieChartType = 'pie';
         this.polarAreaLegend = true;

src/app/layout/charts/charts.module.ts

@@ -1,6 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { ChartsModule as Ng2Charts } from 'ng2-charts';
+import { NgChartsModule  as Ng2Charts } from 'ng2-charts';
+
 import { PageHeaderModule } from '../../shared';
 
 import { ChartsRoutingModule } from './charts-routing.module';

src/app/layout/components/header/header.component.html

@@ -1,5 +1,5 @@
 <nav class="navbar navbar-expand-lg fixed-top">
-    <a class="navbar-brand" href="#">SB Admin Angular9 BS4 </a>
+    <a class="navbar-brand" href="#">SB Admin Angular13 BS4 </a>
     <button (click)="toggleSidebar()" class="navbar-toggler" type="button">
         <!-- <span class="navbar-toggler-icon"></span> -->
         <i aria-hidden="true" class="fa fa-bars text-muted"></i>

src/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
     <head>
         <meta charset="utf-8" />
-        <title>SB Admin Angular9 BS5</title>
+        <title>SB Admin Angular13 BS5</title>
         <base href="/" />
 
         <meta name="viewport" content="width=device-width, initial-scale=1" />

src/polyfills.ts

@@ -35,16 +35,6 @@ import 'zone.js'; // Included with Angular CLI.
  **/
 // import 'core-js/es6/array';
 
-/** IE10 and IE11 requires the following for NgClass support on SVG elements */
-// import 'classlist.js';  // Run `npm install --save classlist.js`.
-
-/**
- * Web Animations `@angular/platform-browser/animations`
- * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
- * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
- **/
-// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
-
 /**
  * By default, zone.js will patch all possible macroTask and DomEvents
  * user can disable parts of macroTask/DomEvents patch by setting following flags

src/test.ts

@@ -17,7 +17,9 @@ declare const require: any;
 __karma__.loaded = function () {};
 
 // First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
+getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), {
+    teardown: { destroyAfterEach: false }
+});
 // Then we find all the tests.
 const context = require.context('./', true, /\.spec\.ts$/);
 // And load the modules.