Merge pull request #152 from coreui/dev-angular-v8

v2.5.0 for Angular 8

Author: xidedix

CHANGELOG.md

@@ -1,5 +1,48 @@
 ## [angular](./README.md) version `changelog`
 
+###### `v2.5.0`
+- refactor(app.routing): lazy loading via dynamic import()
+- refactor(modals): `ViewChild` second parameter 
+- refactor(tsconfig): "module: "esnext", "target": "es6" 
+- chore: update `ng2-charts@2.3.0` imports
+- chore: update `ngx-bootstrap@4.2.0` 
+- fix(collapse): `No provider for AnimationBuilder` add import `BrowserAnimationsModule` to app.module
+- fix(polyfill): import `web-animations-js`
+- chore(tslint): remove depracated/undefined rules  
+- chore(tsconfig): set "target" to "es5" / IE11 compatible
+- update: Angular to `v8.0.0`
+- update: `@angular/animations` to `^8.0.0`
+- update: `@angular/common` to `^8.0.0`
+- update: `@angular/compiler` to `^8.0.0`
+- update: `@angular/core` to `^8.0.0`
+- update: `@angular/forms` to `^8.0.0`
+- update: `@angular/http` to `^8.0.0-beta.10`
+- update: `@angular/platform-browser` to `^8.0.0`
+- update: `@angular/platform-browser-dynamic` to `^8.0.0`
+- update: `@angular/router` to `^8.0.0`
+- update: `@coreui/angular` to `^2.5.0`
+- update: `@coreui/coreui` to `^2.1.11`
+- update: `@coreui/coreui-plugin-chartjs-custom-tooltips` to `^1.3.1`
+- update: `core-js` to `^2.6.9`
+- update: `ng2-charts` to `^2.3.0`
+- update: `ngx-boottsrap` to `^4.2.0`
+- update: `rxjs` to `^6.5.2`
+- update: `tsickle` to `^0.35.0`
+- update: `tslib` to `^1.9.3`
+- update: `zone.js` to `^0.9.1`
+- update: `@angular-devkit/build-angular` to `^0.800.1`
+- update: `@angular/cli` to `^8.0.1`
+- update: `@angular/compiler-cli` to `^8.0.0`
+- update: `@angular/language-service` to `^8.0.0`
+- update: `@types/node` to `^12.0.4`
+- update: `codelyzer` to `^5.1.0`
+- update: `jasmine-core` to `^3.4.0`
+- update: `karma` to `^4.1.0`
+- update: `karma-jasmine-html-reporter` to `^1.4.2`
+- update: `ts-node` to `^8.2.0`
+- update: `tslint` to `^5.17.0`
+- update: `typescript` to `~3.4.5`
+
 ###### `v2.4.5`
 - refactor(modals): add `@ViewChild` 
 - update: `@coreui/angular` to `^2.4.5`

README.md

@@ -4,7 +4,7 @@
 [![@coreui coreui](https://img.shields.io/badge/@coreui%20-coreui-lightgrey.svg?style=flat-square)](https://github.com/coreui/coreui)
 [![npm package][npm-coreui-badge]][npm-coreui]
 [![NPM downloads][npm-coreui-download]][npm-coreui]    
-![angular](https://img.shields.io/badge/angular-^7.2.10-lightgrey.svg?style=flat-square)  
+![angular](https://img.shields.io/badge/angular-^8.0.0-lightgrey.svg?style=flat-square)  
 
 [npm-coreui-angular]: https://www.npmjs.com/package/@coreui/angular  
 [npm-coreui-angular-badge]: https://img.shields.io/npm/v/@coreui/angular.png?style=flat-square  
@@ -21,7 +21,13 @@ Curious why I decided to create CoreUI? Please read this article: [Jack of all t
 
 CoreUI is an Open Source Bootstrap Admin Template. But CoreUI is not just another Admin Template. It goes way beyond hitherto admin templates thanks to transparent code and file structure. And if that's not enough, let’s just add that CoreUI consists bunch of unique features and over 1000 high quality icons.
 
-CoreUI is based on Bootstrap 4 and offers 6 versions: [HTML5 AJAX](https://github.com/coreui/free-bootstrap-admin-template-ajax), [HTML5](https://github.com/coreui/free-angular-admin-template), [Angular 2+](https://github.com/coreui/free-angular-admin-template), [React.js](https://github.com/coreui/free-react-admin-template) & [Vue.js](https://github.com/coreui/free-vue-admin-template), [.NET Core 2](https://github.com/coreui/free-dotnet-admin-template).
+CoreUI is based on Bootstrap 4 and offers 6 versions: 
+[HTML5 AJAX](https://github.com/coreui/coreui-free-bootstrap-admin-template-ajax), 
+[HTML5](https://github.com/coreui/coreui-free-angular-admin-template), 
+[Angular 2+](https://github.com/coreui/coreui-free-angular-admin-template), 
+[React.js](https://github.com/coreui/coreui-free-react-admin-template), 
+[Vue.js](https://github.com/coreui/coreui-free-vue-admin-template)
+ & [.NET Core 2](https://github.com/mrholek/CoreUI-NET).
 
 CoreUI is meant to be the UX game changer. Pure & transparent code is devoid of redundant components, so the app is light enough to offer ultimate user experience. This means mobile devices also, where the navigation is just as easy and intuitive as on a desktop or laptop. The CoreUI Layout API lets you customize your project for almost any device – be it Mobile, Web or WebApp – CoreUI covers them all!
 
@@ -71,7 +77,7 @@ CoreUI is built on top of Bootstrap 4 and supports popular frameworks.
 Before you begin, make sure your development environment includes `Node.js®` and an `npm` package manager.
 
 ###### Node.js
-Angular requires `Node.js` version 8.x or 10.x.
+Angular requires `Node.js` version 8.x or 10.x
 
 - To check your version, run `node -v` in a terminal/console window.
 - To get `Node.js`, go to [nodejs.org](https://nodejs.org/).
@@ -82,6 +88,10 @@ Install the Angular CLI globally using a terminal/console window.
 npm install -g @angular/cli
 ```
 
+##### Update to Angular 8
+Angular 8 requires `Node.js` version 12.x   
+Update guide - see: [https://update.angular.io](https://update.angular.io)
+
 ## Installation
 
 ### Clone repo

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/coreui-free-angular-admin-template",
-  "version": "2.4.5",
+  "version": "2.5.0",
   "description": "CoreUI Free Angular 2+ Admin Template",
   "author": {
     "name": "Łukasz Holeczek",
@@ -15,7 +15,7 @@
     }
   ],
   "homepage": "https://coreui.io/angular",
-  "copyright": "Copyright 2018 creativeLabs Łukasz Holeczek",
+  "copyright": "Copyright 2019 creativeLabs Łukasz Holeczek",
   "license": "MIT",
   "scripts": {
     "ng": "ng",
@@ -27,59 +27,60 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^7.2.10",
-    "@angular/common": "^7.2.10",
-    "@angular/compiler": "^7.2.10",
-    "@angular/core": "^7.2.10",
-    "@angular/forms": "^7.2.10",
-    "@angular/http": "^7.2.10",
-    "@angular/platform-browser": "^7.2.10",
-    "@angular/platform-browser-dynamic": "^7.2.10",
-    "@angular/router": "^7.2.10",
-    "@coreui/angular": "^2.4.5",
-    "@coreui/coreui": "^2.1.8",
-    "@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.2.0",
+    "@angular/animations": "^8.0.0",
+    "@angular/common": "^8.0.0",
+    "@angular/compiler": "^8.0.0",
+    "@angular/core": "^8.0.0",
+    "@angular/forms": "^8.0.0",
+    "@angular/http": "^8.0.0-beta.10",
+    "@angular/platform-browser": "^8.0.0",
+    "@angular/platform-browser-dynamic": "^8.0.0",
+    "@angular/router": "^8.0.0",
+    "@coreui/angular": "^2.5.0",
+    "@coreui/coreui": "^2.1.11",
+    "@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.3.1",
     "@coreui/icons": "0.3.0",
     "bootstrap": "^4.3.1",
     "chart.js": "^2.8.0",
-    "core-js": "^2.6.5",
+    "core-js": "^2.6.9",
     "flag-icon-css": "^3.3.0",
     "font-awesome": "^4.7.0",
     "moment": "^2.24.0",
     "mutationobserver-shim": "^0.3.3",
-    "ng2-charts": "^1.6.0",
-    "ngx-bootstrap": "^3.2.0",
+    "ng2-charts": "^2.3.0",
+    "ngx-bootstrap": "^4.2.0",
     "ngx-perfect-scrollbar": "^7.2.1",
-    "rxjs": "^6.4.0",
+    "rxjs": "^6.5.2",
     "simple-line-icons": "^2.4.1",
     "ts-helpers": "^1.1.2",
-    "tsickle": "^0.34.3",
-    "tslib": "^1.9.0",
-    "zone.js": "^0.8.29"
+    "tsickle": "^0.35.0",
+    "tslib": "^1.9.3",
+    "web-animations-js": "^2.3.1",
+    "zone.js": "^0.9.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.13.6",
-    "@angular/cli": "^7.3.6",
-    "@angular/compiler-cli": "^7.2.10",
-    "@angular/language-service": "^7.2.10",
-    "@types/jasmine": "^3.3.12",
+    "@angular-devkit/build-angular": "^0.800.1",
+    "@angular/cli": "^8.0.1",
+    "@angular/compiler-cli": "^8.0.0",
+    "@angular/language-service": "^8.0.0",
+    "@types/jasmine": "^3.3.13",
     "@types/jasminewd2": "^2.0.6",
-    "@types/node": "^11.11.4",
-    "codelyzer": "^4.5.0",
-    "jasmine-core": "^3.3.0",
+    "@types/node": "^12.0.4",
+    "codelyzer": "^5.1.0",
+    "jasmine-core": "^3.4.0",
     "jasmine-spec-reporter": "^4.2.1",
-    "karma": "^4.0.1",
+    "karma": "^4.1.0",
     "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",
+    "karma-jasmine-html-reporter": "^1.4.2",
     "protractor": "^5.4.2",
-    "ts-node": "^8.0.3",
-    "tslint": "^5.14.0",
-    "typescript": "~3.2.4"
+    "ts-node": "^8.2.0",
+    "tslint": "^5.17.0",
+    "typescript": "~3.4.5"
   },
   "engines": {
-    "node": ">= 8.9.4",
-    "npm": ">= 5.6.0"
+    "node": ">= 12",
+    "npm": ">= 6"
   }
 }

src/app/app.component.html

@@ -1,6 +1,7 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { LocationStrategy, HashLocationStrategy } from '@angular/common';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
 import { PERFECT_SCROLLBAR_CONFIG } from 'ngx-perfect-scrollbar';
@@ -38,11 +39,12 @@ import { AppRoutingModule } from './app.routing';
 // Import 3rd party components
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { TabsModule } from 'ngx-bootstrap/tabs';
-import { ChartsModule } from 'ng2-charts/ng2-charts';
+import { ChartsModule } from 'ng2-charts';
 
 @NgModule({
   imports: [
     BrowserModule,
+    BrowserAnimationsModule,
     AppRoutingModule,
     AppAsideModule,
     AppBreadcrumbModule.forRoot(),

src/app/app.module.ts

@@ -52,35 +52,35 @@ export const routes: Routes = [
     children: [
       {
         path: 'base',
-        loadChildren: './views/base/base.module#BaseModule'
+        loadChildren: () => import('./views/base/base.module').then(m => m.BaseModule)
       },
       {
         path: 'buttons',
-        loadChildren: './views/buttons/buttons.module#ButtonsModule'
+        loadChildren: () => import('./views/buttons/buttons.module').then(m => m.ButtonsModule)
       },
       {
         path: 'charts',
-        loadChildren: './views/chartjs/chartjs.module#ChartJSModule'
+        loadChildren: () => import('./views/chartjs/chartjs.module').then(m => m.ChartJSModule)
       },
       {
         path: 'dashboard',
-        loadChildren: './views/dashboard/dashboard.module#DashboardModule'
+        loadChildren: () => import('./views/dashboard/dashboard.module').then(m => m.DashboardModule)
       },
       {
         path: 'icons',
-        loadChildren: './views/icons/icons.module#IconsModule'
+        loadChildren: () => import('./views/icons/icons.module').then(m => m.IconsModule)
       },
       {
         path: 'notifications',
-        loadChildren: './views/notifications/notifications.module#NotificationsModule'
+        loadChildren: () => import('./views/notifications/notifications.module').then(m => m.NotificationsModule)
       },
       {
         path: 'theme',
-        loadChildren: './views/theme/theme.module#ThemeModule'
+        loadChildren: () => import('./views/theme/theme.module').then(m => m.ThemeModule)
       },
       {
         path: 'widgets',
-        loadChildren: './views/widgets/widgets.module#WidgetsModule'
+        loadChildren: () => import('./views/widgets/widgets.module').then(m => m.WidgetsModule)
       }
     ]
   },

src/app/app.routing.ts

@@ -2,8 +2,9 @@ import { Component } from '@angular/core';
 import { CarouselConfig } from 'ngx-bootstrap/carousel';
 
 @Component({
-  templateUrl: 'carousels.component.html',   providers: [
-    { provide: CarouselConfig, useValue: { interval: 1500, noPause: true } }
+  templateUrl: 'carousels.component.html',
+  providers: [
+    { provide: CarouselConfig, useValue: { interval: 1500, noPause: true } },
   ]
 })
 export class CarouselsComponent {

src/app/views/base/carousels.component.ts

@@ -1,24 +1,28 @@
-import { Component } from '@angular/core';
+import {Component, OnDestroy} from '@angular/core';
 
 @Component({
   templateUrl: 'dropdowns.component.html',
   styleUrls: ['dropdowns.component.css']
 })
-export class DropdownsComponent {
+export class DropdownsComponent implements OnDestroy {
 
   status: { isOpen: boolean } = { isOpen: false };
   disabled: boolean = false;
   isDropup: boolean = true;
   autoClose: boolean = false;
 
-  constructor() { }
-
   items: string[] = [
     'The first choice!',
     'And another choice for you.',
     'but wait! A third!'
   ];
 
+  constructor() { }
+
+  ngOnDestroy () {
+    this.status.isOpen = false;
+  }
+
   onHidden(): void {
     console.log('Dropdown is hidden');
   }

src/app/views/buttons/dropdowns.component.ts

@@ -1,5 +1,5 @@
 import { NgModule } from '@angular/core';
-import { ChartsModule } from 'ng2-charts/ng2-charts';
+import { ChartsModule } from 'ng2-charts';
 
 import { ChartJSComponent } from './chartjs.component';
 import { ChartJSRoutingModule } from './chartjs-routing.module';

src/app/views/chartjs/chartjs.module.ts

@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { ChartsModule } from 'ng2-charts/ng2-charts';
+import { ChartsModule } from 'ng2-charts';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { ButtonsModule } from 'ngx-bootstrap/buttons';