Upgrade to Angular V8 and Narik V2

Author: abadakhshan

angular.json

@@ -29,16 +29,14 @@
             "index": "src/index.html",
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
-            "tsConfig": "src/tsconfig.app.json",
+            "tsConfig": "tsconfig.app.json",
             "assets": [
               "src/favicon.ico",
               "src/assets"
             ],
             "styles": [
               "node_modules/bootstrap/dist/css/bootstrap.css",
               "node_modules/@fortawesome/fontawesome-free/css/all.min.css",
-              "node_modules/nebular-icons/scss/nebular-icons.scss",
-              "node_modules/ionicons/scss/ionicons.scss",
               "node_modules/ngx-toastr/toastr.css",
               "node_modules/narik-ui-ng-bootstrap/styles/narik-ui-ng-bootstrap.css",
               "node_modules/narik-ui-swimlane/styles/narik-ui-swimlane.css",
@@ -82,7 +80,7 @@
           }
         },
         "serve": {
-          "builder": "@angular-builders/dev-server:generic",
+          "builder": "@angular-builders/custom-webpack:dev-server",
           "options": {
             "browserTarget": "narik-ng-bootstrap-demo:build",
             "proxyConfig": "proxy.config.json"
@@ -104,7 +102,7 @@
           "options": {
             "main": "src/test.ts",
             "polyfills": "src/polyfills.ts",
-            "tsConfig": "src/tsconfig.spec.json",
+            "tsConfig": "tsconfig.spec.json",
             "karmaConfig": "src/karma.conf.js",
             "styles": [
               "src/styles.scss"
@@ -120,8 +118,8 @@
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
             "tsConfig": [
-              "src/tsconfig.app.json",
-              "src/tsconfig.spec.json"
+              "tsconfig.app.json",
+              "tsconfig.spec.json"
             ],
             "exclude": [
               "**/node_modules/**"

build-tools/template-resolver.js

@@ -4,12 +4,12 @@ class TemplateResolver {
       case "NarikListUi":
         return {
           template: "",
-          templateUrl: "./app/templates/list-template.html"
+          templateUrl: "./src/app/templates/list-template.html"
         };
       case "NarikDetailUi":
         return {
           template: "",
-          templateUrl: "./app/templates/detail-template.html"
+          templateUrl: "./src/app/templates/detail-template.html"
         };
 
       default:

package.json

@@ -11,69 +11,68 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~7.2.0",
-    "@angular/cdk": "^7.0.3",
-    "@angular/common": "~7.2.0",
-    "@angular/compiler": "~7.2.0",
-    "@angular/core": "~7.2.0",
-    "@angular/flex-layout": "^7.0.0-beta.23",
-    "@angular/forms": "~7.2.0",
-    "@angular/platform-browser": "~7.2.0",
-    "@angular/platform-browser-dynamic": "~7.2.0",
-    "@angular/router": "~7.2.0",
-    "@aspnet/signalr": "^1.1.0",
-    "@fortawesome/fontawesome-free": "^5.5.0",
-    "@nebular/theme": "^2.0.2",
-    "@ng-bootstrap/ng-bootstrap": "^4.1.3",
-    "@ngx-translate/core": "^11.0.0",
-    "@swimlane/ngx-datatable": "^14.0.0",
+    "@angular/animations": "~8.0.0",
+    "@angular/cdk": "^8.0.1",
+    "@angular/common": "~8.0.0",
+    "@angular/compiler": "~8.0.0",
+    "@angular/core": "~8.0.0",
+    "@angular/flex-layout": "^8.0.0-beta.26",
+    "@angular/forms": "~8.0.0",
+    "@angular/platform-browser": "~8.0.0",
+    "@angular/platform-browser-dynamic": "~8.0.0",
+    "@angular/router": "~8.0.0",
+    "@aspnet/signalr": "^1.1.4",
+    "@fortawesome/fontawesome-free": "^5.9.0",
+    "@nebular/theme": "^4.0.0",
+    "@ng-bootstrap/ng-bootstrap": "^4.2.1",
+    "@ngx-translate/core": "^11.0.1",
+    "@swimlane/ngx-datatable": "^15.0.2",
     "angular2-text-mask": "^9.0.0",
     "angular2-uuid": "^1.1.1",
     "bootstrap": "^4.3.1",
     "bootstrap-4.1.3-rtl": "^1.0.1",
-    "core-js": "^2.5.4",
-    "ionicons": "^2.0.1",
-    "localforage": "^1.5.0",
+    "core-js": "^3.1.3",
+    "localforage": "^1.7.3",
     "lodash": "^4.17.11",
-    "narik-app-core": "^1.0.5",
-    "narik-client-storage": "^1.0.0",
-    "narik-common": "^1.0.1",
-    "narik-core": "^1.0.0",
-    "narik-infrastructure": "^1.0.0",
-    "narik-jwt-authentication": "^1.0.0",
-    "narik-ui-core": "^1.0.3",
-    "narik-ui-ng-bootstrap": "^1.0.2",
-    "narik-ui-swimlane": "^1.0.1",
-    "nebular-icons": "^1.1.0",
-    "ngforage": "^4.0.2",
-    "ngx-toastr": "^9.1.1",
-    "rxjs": "~6.3.3",
-    "tslib": "^1.9.0",
-    "zone.js": "~0.8.26"
+    "narik-app-core": "^2.0.1",
+    "narik-client-storage": "^2.0.0",
+    "narik-common": "^2.0.0",
+    "narik-core": "^2.0.0",
+    "narik-infrastructure": "^2.0.0",
+    "narik-jwt-authentication": "^2.0.0",
+    "narik-ui-core": "^2.0.1",
+    "narik-ui-ng-bootstrap": "^2.0.0",
+    "narik-ui-swimlane": "^2.0.0",
+    "ngforage": "^4.0.3",
+    "ngx-toastr": "^10.0.4",
+    "rxjs": "~6.5.2",
+    "tslib": "^1.10.0",
+    "zone.js": "~0.9.1",
+    "@nebular/eva-icons": "^4.0.0",
+    "eva-icons": "^1.1.1"
   },
   "devDependencies": {
-    "@angular-builders/custom-webpack": "^7.0.0",
-    "@angular-builders/dev-server": "^7.0.0",
-    "@angular-devkit/build-angular": "~0.13.0",
-    "@angular/cli": "~7.3.3",
-    "@angular/compiler-cli": "~7.2.0",
-    "@angular/language-service": "~7.2.0",
-    "@types/jasmine": "~2.8.8",
+    "@angular-builders/custom-webpack": "8.0.2",
+    "@angular-devkit/build-angular": "^0.800.2",
+    "@angular/cli": "^8.0.2",
+    "@angular/compiler-cli": "~8.0.0",
+    "@angular/language-service": "~8.0.0",
+    "@types/jasmine": "~3.3.8",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "~8.9.4",
     "cheerio": "^1.0.0-rc.2",
-    "codelyzer": "~4.5.0",
-    "jasmine-core": "~2.99.1",
+    "codelyzer": "^5.0.0",
+    "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-jasmine": "~1.1.2",
-    "karma-jasmine-html-reporter": "^0.2.2",
-    "narik-webpack-tools": "0.0.6",
+    "karma-jasmine": "~2.0.1",
+    "karma-jasmine-html-reporter": "^1.4.0",
+    "narik-webpack-tools": "2.0.1",
     "protractor": "~5.4.0",
     "ts-node": "~7.0.0",
-    "tslint": "~5.11.0",
-    "typescript": "~3.2.2"
+    "tslint": "~5.15.0",
+    "typescript": "~3.4.3"
   }
 }

src/app/app.module.ts

@@ -22,11 +22,13 @@ import { NarikAppCoreModule } from "narik-app-core";
 import { NarikJwtAuthenticationModule } from "narik-jwt-authentication";
 import { NarikClientStorageModule } from "narik-client-storage";
 
-import { NbLayoutDirection, NbThemeModule } from "@nebular/theme";
+import { NbLayoutDirection, NbThemeModule, NbIconModule } from "@nebular/theme";
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 import { MainModule } from "./modules/main/main.module";
 import { Observable } from "rxjs/internal/Observable";
 import { DemoCommandProcessor } from "./services/command-processor.service";
+import { NbEvaIconsModule } from "@nebular/eva-icons";
+
 
 const moduleKey = "NarikDemo";
 
@@ -58,6 +60,8 @@ const moduleKey = "NarikDemo";
       tokenStorage: "localStorage",
       loginPageUrl: "/"
     }),
+    NbEvaIconsModule,
+    NbIconModule,
     NbThemeModule.forRoot(
       { name: "default" },
       undefined,

src/app/modules/narik-ngx-admin/ngx-main-view/ngx-main-view.component.scss

@@ -1,4 +1,5 @@
-@import "../../../../styles/themes";
+@import '../../../../styles/themes';
+@import '~bootstrap/scss/mixins/breakpoints';
 @import '~@nebular/theme/styles/global/breakpoints';
 
 @include nb-install-component() {
@@ -16,7 +17,7 @@
     &.collapsed {
       width: 0;
 
-      /deep/ .main-container {
+      ::ng-deep .main-container {
         width: 0;
 
         .scrollable {
@@ -26,7 +27,7 @@
       }
     }
 
-    /deep/ .main-container {
+    ::ng-deep .main-container {
       width: $sidebar-width;
       background: nb-theme(color-bg);
       transition: width 0.3s ease;
@@ -43,30 +44,27 @@
   }
 
   nb-sidebar.menu-sidebar {
+
     margin-top: nb-theme(sidebar-header-gap);
 
     @include nb-for-theme(corporate) {
       margin-top: 0;
     }
 
-    /deep/ .main-container {
-      height: calc(
-        #{nb-theme(sidebar-height)} - #{nb-theme(header-height)} - #{nb-theme(
-            sidebar-header-gap
-          )}
-      ) !important;
+    ::ng-deep .main-container {
+      height:
+        calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)} - #{nb-theme(sidebar-header-gap)}) !important;
       @include nb-ltr(border-top-right-radius, nb-theme(radius));
       @include nb-rtl(border-top-left-radius, nb-theme(radius));
 
       @include nb-for-theme(corporate) {
         border: 1px solid nb-theme(separator);
-        height: calc(
-          #{nb-theme(sidebar-height)} - #{nb-theme(header-height)}
-        ) !important;
+        height:
+          calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important;
       }
     }
 
-    /deep/ .scrollable {
+    ::ng-deep .scrollable {
       @include nb-for-theme(corporate) {
         padding-top: 0;
 
@@ -76,7 +74,7 @@
       }
     }
 
-    /deep/ nb-sidebar-header {
+    ::ng-deep nb-sidebar-header {
       padding-bottom: 0.5rem;
       text-align: center;
     }
@@ -102,14 +100,14 @@
         @include nb-rtl(padding-right, 0.25rem);
       }
 
-      i,
-      span {
+      i, span {
         vertical-align: middle;
       }
     }
 
     &.compacted {
-      /deep/ nb-sidebar-header {
+
+      ::ng-deep nb-sidebar-header {
         padding-left: 0;
         padding-right: 0;
       }
@@ -128,4 +126,32 @@
     }
   }
 
+  @include media-breakpoint-down(xs) {
+    .main-content {
+      padding: 0.75rem !important;
+
+    }
+  }
+
+  @include media-breakpoint-down(sm) {
+
+    nb-sidebar.menu-sidebar {
+
+      margin-top: 0;
+
+      ::ng-deep .main-container {
+        height: calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important;
+        @include nb-ltr(border-top-right-radius, 0);
+        @include nb-rtl(border-top-left-radius, 0);
+
+        .scrollable {
+          padding-top: 0;
+        }
+      }
+    }
+
+    .main-btn {
+      display: none;
+    }
+  }
 }