creativetimofficial / ct-material-dashboard-pro-angular

68 stars 35 forks source link

Update to angular 6 - rxjs 6 #276

Open niesteszeck opened 6 years ago

niesteszeck commented 6 years ago

I'm updating the theme and following angular migration process

When I update to rxjs 6 running

npm install -g rxjs-tslint
rxjs-5-to-6-migrate -p src/tsconfig.app.json

It got some files updated that are from theme

Index: shared/navbar/navbar.component.ts
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- shared/navbar/navbar.component.ts   (date 1529614390000)
+++ shared/navbar/navbar.component.ts   (date 1529614906000)
@@ -1,7 +1,9 @@
+
+import {filter} from 'rxjs/operators';
 import { Component, OnInit, Renderer, ViewChild, ElementRef, Directive } from '@angular/core';
 import { ROUTES } from '../.././sidebar/sidebar.component';
 import { Router, ActivatedRoute, NavigationEnd, NavigationStart } from '@angular/router';
-import { Subscription } from 'rxjs/Subscription';
+import { Subscription } from 'rxjs';
 import { Location, LocationStrategy, PathLocationStrategy } from '@angular/common';

 const misc: any = {
@@ -105,7 +107,7 @@
     if (body.classList.contains('hide-sidebar')) {
       misc.hide_sidebar_active = true;
     }
-    this._router = this.router.events.filter(event => event instanceof NavigationEnd).subscribe((event: NavigationEnd) => {
+    this._router = this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe((event: NavigationEnd) => {
       const $layer = document.getElementsByClassName('close-layer')[0];
       if ($layer) {
         $layer.remove();
Index: app.component.ts
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- app.component.ts    (date 1529614390000)
+++ app.component.ts    (date 1529614901000)
@@ -1,6 +1,8 @@
+
+import {filter} from 'rxjs/operators';
 import { Component, OnInit } from '@angular/core';
 import { Router, NavigationEnd } from '@angular/router';
-import { Subscription } from 'rxjs/Subscription';
+import { Subscription } from 'rxjs';

 @Component({
   selector: 'app-my-app',
@@ -14,7 +16,7 @@
   }

   ngOnInit() {
-    this._router = this.router.events.filter(event => event instanceof NavigationEnd).subscribe((event: NavigationEnd) => {
+    this._router = this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe((event: NavigationEnd) => {
       const body = document.getElementsByTagName('body')[0];
       const modalBackdrop = document.getElementsByClassName('modal-backdrop')[0];
       if (body.classList.contains('modal-open')) {
Index: layouts/auth/auth-layout.component.ts
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- layouts/auth/auth-layout.component.ts   (date 1529614390000)
+++ layouts/auth/auth-layout.component.ts   (date 1529615780000)
@@ -1,6 +1,7 @@
+import {filter} from 'rxjs/operators';
 import { Component, OnInit, ElementRef } from '@angular/core';
 import { Router, NavigationEnd, NavigationStart } from '@angular/router';
-import { Subscription } from 'rxjs/Subscription';
+import { Subscription } from 'rxjs';

 @Component({
   selector: 'app-layout',
@@ -20,9 +21,9 @@
     const navbar: HTMLElement = this.element.nativeElement;

     this.toggleButton = navbar.getElementsByClassName('navbar-toggler')[0];
-    this._router = this.router.events.filter(event => event instanceof NavigationEnd).subscribe((event: NavigationEnd) => {
-      this.sidebarClose();
-    });
+      this._router = this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe((event: NavigationEnd) => {
+          this.sidebarClose();
+      });
   }

   sidebarOpen() {
Index: layouts/admin/admin-layout.component.ts
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- layouts/admin/admin-layout.component.ts (date 1529614390000)
+++ layouts/admin/admin-layout.component.ts (date 1529614911000)
@@ -1,9 +1,11 @@
+
+import {filter} from 'rxjs/operators';
 import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
 import { NavigationEnd, NavigationStart, Router } from '@angular/router';
 import { NavItem, NavItemType } from '../../md/md.module';
-import { Subscription } from 'rxjs/Subscription';
+import { Subscription } from 'rxjs';
 import { Location, PopStateEvent } from '@angular/common';
-import 'rxjs/add/operator/filter';
+
 import { NavbarComponent } from '../../shared/navbar/navbar.component';
 import PerfectScrollbar from 'perfect-scrollbar';

@@ -48,7 +50,7 @@
           window.scrollTo(0, 0);
       }
     });
-    this._router = this.router.events.filter(event => event instanceof NavigationEnd).subscribe((event: NavigationEnd) => {
+    this._router = this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe((event: NavigationEnd) => {
       elemMainPanel.scrollTop = 0;
       elemSidebar.scrollTop = 0;
     });
@@ -61,7 +63,7 @@
     else {
       html.classList.add('perfect-scrollbar-off');
     }
-    this._router = this.router.events.filter(event => event instanceof NavigationEnd).subscribe((event: NavigationEnd) => {
+    this._router = this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe((event: NavigationEnd) => {
       this.navbar.sidebarClose();material-dashboard-pro-angular/issues
     });

*this patch hasn't been created over a clean copy of the theme

Are they already updated on a fresh copy of the theme?

chelaruc commented 6 years ago

@niesteszeck it gives me an error. Can you help me?

screen shot 2018-09-04 at 15 49 45
niesteszeck commented 6 years ago

I'm not sure about your issue, actually I have updated my copy already, but was long time ago, I should check the git repo to see which changes where made.

can you run ng lint?