feat(starter-kit): merge starter-kit to master

Merge branch 'master' into update-starter-kit

CHANGELOG.md

@@ -1,3 +1,28 @@
+<a name="5.0.0"></a>
+# [5.0.0](https://github.com/akveo/ngx-admin/compare/v4.0.1...v5.0.0) (2020-04-01)
+
+
+### Bug Fixes
+
+* **forms:** add missing forms module import ([#5530](https://github.com/akveo/ngx-admin/issues/5530)) ([1ff2a0d](https://github.com/akveo/ngx-admin/commit/1ff2a0d))
+
+
+### Features
+
+* upgrade to Angular 9 and Nebular 5 ([#5628](https://github.com/akveo/ngx-admin/issues/5628)) ([fbbf944](https://github.com/akveo/ngx-admin/commit/fbbf944))
+* **seo:** add canonical tag ([#5578](https://github.com/akveo/ngx-admin/issues/5578)) ([76d31da](https://github.com/akveo/ngx-admin/commit/76d31da))
+* add calendar with week numbers example ([#5515](https://github.com/akveo/ngx-admin/issues/5515)) ([3242257](https://github.com/akveo/ngx-admin/commit/3242257))
+
+
+### BREAKING CHANGES
+
+- Angular updated to version 9.
+- Nebular updated to version 5.
+- `@agm/core` replaced with `@angular/google-maps`.
+- `ng2-completer` replaced with `@akveo/ng2-completer`, read details [here](https://github.com/akveo/ng2-smart-table/pull/1140#issue-392285957).
+
+
+
 <a name="4.0.1"></a>
 ## [4.0.1](https://github.com/akveo/ngx-admin/compare/v4.0.0...v4.0.1) (2019-07-16)
 

README.md

@@ -2,7 +2,7 @@
 
 [Who uses ngx-admin?](https://github.com/akveo/ngx-admin/issues/1645)| [Documentation](https://akveo.github.io/ngx-admin/?utm_source=github&utm_medium=ngx_admin_readme&utm_campaign=themes) | [Installation Guidelines](https://akveo.github.io/ngx-admin/docs/getting-started/what-is-ngxadmin?utm_source=github&utm_medium=ngx_admin_readme&utm_campaign=themes)
 
-# Admin template based on Angular 8+ and <a href="https://github.com/akveo/nebular">Nebular</a>
+# Admin template based on Angular 9+ and <a href="https://github.com/akveo/nebular">Nebular</a>
 <a target="_blank" href="http://akveo.com/ngx-admin/pages/dashboard?theme=corporate&utm_source=github&utm_medium=ngx_admin_readme&utm_campaign=main_pic"><img src="https://i.imgur.com/mFdqvgG.png"/></a>
 
 ### Backend Integration Bundles
@@ -33,7 +33,7 @@ Easy way to integrate ngx-admin with backend (.NET, Node.js, Java etc.).
 
 ### What's included:
 
-- Angular 8+ & Typescript
+- Angular 9+ & Typescript
 - Bootstrap 4+ & SCSS
 - Responsive layout
 - RTL support

angular.json

@@ -11,6 +11,7 @@
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
+            "aot": true,
             "preserveSymlinks": true,
             "rebaseRootRelativeCssUrls": true,
             "outputPath": "dist",
@@ -39,6 +40,12 @@
           },
           "configurations": {
             "production": {
+              "budgets": [
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb"
+                }
+              ],
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
@@ -141,7 +148,8 @@
   "defaultProject": "ngx-admin-demo",
   "schematics": {
     "@schematics/angular:component": {
-      "styleext": "scss"
+      "prefix": "ngx",
+      "style": "scss"
     },
     "@schematics/angular:directive": {}
   }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-admin",
-  "version": "4.0.1",
+  "version": "5.0.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -26,51 +26,65 @@
     "docs": "compodoc -p src/tsconfig.app.json -d docs",
     "docs:serve": "compodoc -p src/tsconfig.app.json -d docs -s",
     "prepush": "npm run lint:ci",
-    "release:changelog": "npm run conventional-changelog -- -p angular -i CHANGELOG.md -s"
+    "release:changelog": "npm run conventional-changelog -- -p angular -i CHANGELOG.md -s",
+    "postinstall": "ngcc --properties es2015 es5 browser module main --first-only --create-ivy-entry-points"
   },
   "dependencies": {
-    "@agm/core": "^1.0.0-beta.5",
+    "@akveo/ng2-completer": "^9.0.1",
-    "@angular/animations": "^8.0.0",
+    "@angular/animations": "^9.0.4",
-    "@angular/cdk": "^8.0.0",
+    "@angular/cdk": "^9.1.2",
-    "@angular/common": "^8.0.0",
+    "@angular/common": "^9.0.4",
-    "@angular/compiler": "^8.0.0",
+    "@angular/compiler": "^9.0.4",
-    "@angular/core": "^8.0.0",
+    "@angular/core": "^9.0.4",
-    "@angular/forms": "^8.0.0",
+    "@angular/forms": "^9.0.4",
-    "@angular/platform-browser": "^8.0.0",
+    "@angular/google-maps": "^9.1.0",
-    "@angular/platform-browser-dynamic": "^8.0.0",
+    "@angular/platform-browser": "^9.0.4",
-    "@angular/router": "^8.0.0",
+    "@angular/platform-browser-dynamic": "^9.0.4",
-    "@nebular/auth": "4.1.2",
+    "@angular/router": "^9.0.4",
-    "@nebular/eva-icons": "4.1.2",
+    "@asymmetrik/ngx-leaflet": "3.0.1",
-    "@nebular/security": "4.1.2",
+    "@nebular/auth": "5.0.0",
-    "@nebular/theme": "4.1.2",
+    "@nebular/eva-icons": "5.0.0",
+    "@nebular/security": "5.0.0",
+    "@nebular/theme": "5.0.0",
+    "@swimlane/ngx-charts": "^13.0.2",
+    "angular2-chartjs": "0.4.1",
     "bootstrap": "4.3.1",
+    "chart.js": "2.7.1",
+    "ckeditor": "4.7.3",
     "classlist.js": "1.1.20150312",
     "core-js": "2.5.1",
-    "eva-icons": "^1.1.0",
+    "echarts": "^4.0.2",
+    "eva-icons": "^1.1.3",
     "intl": "1.2.5",
     "ionicons": "2.0.1",
     "nebular-icons": "1.1.0",
+    "ng2-ckeditor": "^1.2.2",
+    "ng2-smart-table": "^1.6.0",
+    "ngx-echarts": "^4.2.2",
     "node-sass": "^4.12.0",
     "normalize.css": "6.0.0",
     "pace-js": "1.0.2",
     "roboto-fontface": "0.8.0",
-    "rxjs": "6.5.2",
+    "rxjs": "6.5.4",
     "rxjs-compat": "6.3.0",
     "socicon": "3.0.5",
+    "style-loader": "^1.1.3",
+    "tslib": "^1.10.0",
     "typeface-exo": "0.0.22",
-    "web-animations-js": "github:angular/web-animations-js#release_pr208",
+    "web-animations-js": "^2.3.2",
-    "zone.js": "~0.9.1"
+    "zone.js": "~0.10.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.800.2",
+    "@angular-devkit/build-angular": "~0.900.4",
-    "@angular/cli": "^8.0.2",
+    "@angular/cli": "^9.0.4",
-    "@angular/compiler-cli": "^8.0.0",
+    "@angular/compiler-cli": "^9.0.4",
-    "@angular/language-service": "8.0.0",
+    "@angular/language-service": "9.0.4",
     "@compodoc/compodoc": "1.0.1",
+    "@fortawesome/fontawesome-free": "^5.2.0",
     "@types/jasmine": "2.5.54",
     "@types/jasminewd2": "2.0.3",
-    "@types/node": "6.0.90",
+    "@types/node": "^12.11.1",
-    "codelyzer": "^5.0.1",
+    "codelyzer": "^5.1.2",
     "conventional-changelog-cli": "1.3.4",
     "husky": "0.13.3",
     "jasmine-core": "2.6.4",
@@ -88,6 +102,6 @@
     "ts-node": "3.2.2",
     "tslint": "^5.7.0",
     "tslint-language-service": "^0.9.9",
-    "typescript": "3.4.5"
+    "typescript": "3.7.5"
   }
 }

src/app/@core/core.module.ts

@@ -5,7 +5,10 @@ import { NbSecurityModule, NbRoleProvider } from '@nebular/security';
 import { of as observableOf } from 'rxjs';
 
 import { throwIfAlreadyLoaded } from './module-import-guard';
-import { AnalyticsService } from './utils';
+import {
+  AnalyticsService,
+  SeoService,
+} from './utils';
 import { UserData } from './data/users';
 import { UserService } from './mock/users.service';
 import { MockDataModule } from './mock/mock-data.module';
@@ -78,6 +81,7 @@ export const NB_CORE_PROVIDERS = [
     provide: NbRoleProvider, useClass: NbSimpleRoleProvider,
   },
   AnalyticsService,
+  SeoService,
 ];
 
 @NgModule({
@@ -94,8 +98,8 @@ export class CoreModule {
     throwIfAlreadyLoaded(parentModule, 'CoreModule');
   }
 
-  static forRoot(): ModuleWithProviders {
+  static forRoot(): ModuleWithProviders<CoreModule> {
-    return <ModuleWithProviders>{
+    return {
       ngModule: CoreModule,
       providers: [
         ...NB_CORE_PROVIDERS,

src/app/@core/mock/mock-data.module.ts

@@ -16,8 +16,8 @@ const SERVICES = [
   ],
 })
 export class MockDataModule {
-  static forRoot(): ModuleWithProviders {
+  static forRoot(): ModuleWithProviders<MockDataModule> {
-    return <ModuleWithProviders>{
+    return {
       ngModule: MockDataModule,
       providers: [
         ...SERVICES,

src/app/@core/utils/index.ts

@@ -1 +1,7 @@
-export { AnalyticsService } from './analytics.service';
+
+import { SeoService } from './seo.service';
+import { AnalyticsService } from './analytics.service';
+export {
+  AnalyticsService,
+  SeoService,
+};

src/app/@core/utils/seo.service.ts

@@ -0,0 +1,58 @@
+import { Injectable, Inject, PLATFORM_ID, OnDestroy } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+import { NavigationEnd, Router } from '@angular/router';
+import { NB_DOCUMENT } from '@nebular/theme';
+import { filter, takeUntil } from 'rxjs/operators';
+import { Subject } from 'rxjs';
+
+@Injectable()
+export class SeoService implements OnDestroy {
+
+  private readonly destroy$ = new Subject<void>();
+  private readonly dom: Document;
+  private readonly isBrowser: boolean;
+  private linkCanonical: HTMLLinkElement;
+
+  constructor(
+    private router: Router,
+    @Inject(NB_DOCUMENT) document,
+    @Inject(PLATFORM_ID) platformId,
+  ) {
+    this.isBrowser = isPlatformBrowser(platformId);
+    this.dom = document;
+
+    if (this.isBrowser) {
+      this.createCanonicalTag();
+    }
+  }
+
+  ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  createCanonicalTag() {
+    this.linkCanonical = this.dom.createElement('link');
+    this.linkCanonical.setAttribute('rel', 'canonical');
+    this.dom.head.appendChild(this.linkCanonical);
+    this.linkCanonical.setAttribute('href', this.getCanonicalUrl());
+  }
+
+  trackCanonicalChanges() {
+    if (!this.isBrowser) {
+      return;
+    }
+
+    this.router.events.pipe(
+      filter((event) => event instanceof NavigationEnd),
+      takeUntil(this.destroy$),
+    )
+      .subscribe(() => {
+        this.linkCanonical.setAttribute('href', this.getCanonicalUrl());
+      });
+  }
+
+  private getCanonicalUrl(): string {
+    return this.dom.location.origin + this.dom.location.pathname;
+  }
+}

src/app/@theme/components/footer/footer.component.ts

@@ -4,7 +4,9 @@ import { Component } from '@angular/core';
   selector: 'ngx-footer',
   styleUrls: ['./footer.component.scss'],
   template: `
-    <span class="created-by">Created with ♥ by <b><a href="https://akveo.com" target="_blank">Akveo</a></b> 2019</span>
+    <span class="created-by">
+      Created with ♥ by <b><a href="https://akveo.page.link/8V2f" target="_blank">Akveo</a></b> 2019
+    </span>
     <div class="socials">
       <a href="#" target="_blank" class="ion ion-social-github"></a>
       <a href="#" target="_blank" class="ion ion-social-facebook"></a>

src/app/@theme/theme.module.ts

@@ -78,8 +78,8 @@ const PIPES = [
   declarations: [...COMPONENTS, ...PIPES],
 })
 export class ThemeModule {
-  static forRoot(): ModuleWithProviders {
+  static forRoot(): ModuleWithProviders<ThemeModule> {
-    return <ModuleWithProviders>{
+    return {
       ngModule: ThemeModule,
       providers: [
         ...NbThemeModule.forRoot(

src/app/app-routing.module.ts

@@ -9,10 +9,10 @@ import {
   NbResetPasswordComponent,
 } from '@nebular/auth';
 
-const routes: Routes = [
+export const routes: Routes = [
   {
     path: 'pages',
-    loadChildren: () => import('app/pages/pages.module')
+    loadChildren: () => import('./pages/pages.module')
       .then(m => m.PagesModule),
   },
   {

src/app/app.component.ts

@@ -5,6 +5,7 @@
  */
 import { Component, OnInit } from '@angular/core';
 import { AnalyticsService } from './@core/utils/analytics.service';
+import { SeoService } from './@core/utils/seo.service';
 
 @Component({
   selector: 'ngx-app',
@@ -12,10 +13,11 @@ import { AnalyticsService } from './@core/utils/analytics.service';
 })
 export class AppComponent implements OnInit {
 
-  constructor(private analytics: AnalyticsService) {
+  constructor(private analytics: AnalyticsService, private seoService: SeoService) {
   }
 
   ngOnInit() {
     this.analytics.trackPageViews();
+    this.seoService.trackCanonicalChanges();
   }
 }

src/app/app.module.ts

@@ -28,9 +28,6 @@ import {
     BrowserAnimationsModule,
     HttpClientModule,
     AppRoutingModule,
-
-    ThemeModule.forRoot(),
-
     NbSidebarModule.forRoot(),
     NbMenuModule.forRoot(),
     NbDatepickerModule.forRoot(),
@@ -41,6 +38,7 @@ import {
       messageGoogleMapKey: 'AIzaSyA_wNuCzia92MAmdLRzmqitRGvCF7wCZPY',
     }),
     CoreModule.forRoot(),
+    ThemeModule.forRoot(),
   ],
   bootstrap: [AppComponent],
 })

src/index.html

@@ -9,6 +9,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/png" href="favicon.png">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <script defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCpVhQiwAllg1RAFaxMWSpQruuGARy0Y1k&libraries=places"></script>
 </head>
 <body>
   <ngx-app>Loading...</ngx-app>

src/tsconfig.app.json

@@ -2,15 +2,7 @@
   "extends": "../tsconfig.json",
   "compilerOptions": {
     "outDir": "../out-tsc/app",
-    "baseUrl": "./",
+    "baseUrl": "./"
-    "paths": {
-      "@angular/*": [
-        "../node_modules/@angular/*"
-      ],
-      "@nebular/*": [
-        "../node_modules/@nebular/*"
-      ]
-    }
   },
   "exclude": [
     "test.ts",

src/typings.d.ts

@@ -10,6 +10,4 @@ interface NodeModule {
   id: string;
 }
 
-declare var tinymce: any;
-
 declare var echarts: any;