Skip to content
Permalink
Browse files

feat: upgrade Angular to the latest 8 version

  • Loading branch information
arturovt committed Nov 30, 2019
1 parent 68b2df2 commit b5f22c89203d76ecd4fdb5caa8d679460821fdbd
@@ -19,8 +19,8 @@ MEAN is a set of Open Source components that together, provide an end-to-end fra
git clone https://github.com/linnovate/mean
cd mean
cp .env.example .env
npm install
npm start (for development)
yarn
yarn start (for development)
```
### Docker based
```
@@ -3,7 +3,7 @@
"version": 1,
"newProjectRoot": "projects",
"projects": {
"angular-material": {
"mean": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
@@ -48,18 +48,18 @@
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "angular-material:build"
"browserTarget": "mean:build"
},
"configurations": {
"production": {
"browserTarget": "angular-material:build:production"
"browserTarget": "mean:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "angular-material:build"
"browserTarget": "mean:build"
}
},
"test": {
@@ -92,34 +92,9 @@
}
}
}
},
"angular-material-e2e": {
"root": "",
"sourceRoot": "",
"projectType": "application",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "./protractor.conf.js",
"devServerTarget": "angular-material:serve"
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"e2e/tsconfig.e2e.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "angular-material",
"defaultProject": "mean",
"schematics": {
"@schematics/angular:component": {
"prefix": "app",
@@ -129,4 +104,4 @@
"prefix": "app"
}
}
}
}
@@ -13,25 +13,21 @@
},
"private": true,
"dependencies": {
"@angular/animations": "^6.1.9",
"@angular/cdk": "^6.4.7",
"@angular/common": "^6.1.9",
"@angular/compiler": "^6.1.9",
"@angular/core": "^6.1.9",
"@angular/flex-layout": "^6.0.0-beta.18",
"@angular/forms": "^6.1.9",
"@angular/http": "^6.1.9",
"@angular/material": "^6.0.0",
"@angular/platform-browser": "^6.1.9",
"@angular/platform-browser-dynamic": "^6.1.9",
"@angular/router": "^6.1.9",
"angular-pipes": "^8.0.0",
"angular-tree-component": "^7.2.0",
"@angular/animations": "^8.2.14",
"@angular/cdk": "^8.2.3",
"@angular/common": "^8.2.14",
"@angular/compiler": "^8.2.14",
"@angular/core": "^8.2.14",
"@angular/flex-layout": "^8.0.0-beta.27",
"@angular/forms": "^8.2.14",
"@angular/material": "^8.2.3",
"@angular/platform-browser": "^8.2.14",
"@angular/platform-browser-dynamic": "^8.2.14",
"@angular/router": "^8.2.14",
"bcrypt": "^3.0.2",
"body-parser": "^1.18.2",
"compression": "^1.7.2",
"cookie-parser": "^1.4.3",
"core-js": "2.5.7",
"cors": "^2.8.4",
"dotenv": "^6.0.0",
"events": "^3.0.0",
@@ -47,26 +43,23 @@
"method-override": "^2.3.10",
"mongoose": "^5.1.0",
"morgan": "^1.9.1",
"ng2-dragula": "^1.5.0",
"nodemon": "^1.17.5",
"passport": "^0.4.0",
"passport-jwt": "^4.0.0",
"passport-local": "^1.0.0",
"rxjs": "6.2.0",
"rxjs-compat": "^6.0.0-rc.0",
"rxjs": "^6.5.3",
"swagger-ui-express": "^3.0.9",
"webpack-dev-server": "^3.1.10",
"zone.js": "0.8.26"
"zone.js": "~0.9.1"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.7.0-beta.1",
"@angular/cli": "^6.1.9",
"@angular/compiler-cli": "^6.1.9",
"@angular/language-service": "^6.1.9",
"@angular-devkit/build-angular": "^0.803.20",
"@angular/cli": "^8.3.20",
"@angular/compiler-cli": "^8.2.14",
"@angular/language-service": "^8.2.14",
"@types/jasmine": "~2.8.3",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~10.3.0",
"codelyzer": "4.3.0",
"@types/node": "~12.12.14",
"codelyzer": "^5.2.0",
"concurrently": "^3.5.1",
"jasmine-core": "~3.1.0",
"jasmine-spec-reporter": "~4.2.1",
@@ -75,9 +68,8 @@
"karma-coverage-istanbul-reporter": "2.0.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "1.1.0",
"protractor": "^5.4.1",
"ts-node": "~6.1.0",
"tslint": "~5.10.0",
"typescript": "~2.9.2"
"tslint": "^5.20.1",
"typescript": "~3.5.3"
}
}
@@ -1,12 +1,8 @@
import { Injectable } from '@angular/core';
import { CanActivate } from "@angular/router";
import { Observable } from 'rxjs/Observable';
import { AuthService } from '../auth/auth.service';
import { CanActivate } from '@angular/router';

@Injectable()
export class OnlyAdminUsersGuard implements CanActivate {
constructor() {}

canActivate() {
const user = (<any>window).user;
return user && user.isAdmin;
@@ -3,22 +3,24 @@ import { RouterModule, Routes } from '@angular/router';
import { AuthGuard } from '../auth/auth-guard.service';
import { HomeComponent } from '../home/home.component';

const routes: Routes = [{
path: '',
component: HomeComponent
}, {
path: 'auth',
loadChildren: 'app/auth/auth.module#AuthModule'
}, {
path: 'admin',
loadChildren: 'app/admin/admin.module#AdminModule'
}];
const routes: Routes = [
{
path: '',
component: HomeComponent
},
{
path: 'auth',
loadChildren: () => import('../auth/auth.module').then(m => m.AuthModule)
},
{
path: 'admin',
loadChildren: () => import('../admin/admin.module').then(m => m.AdminModule)
}
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
providers: [AuthGuard],
declarations: []
providers: [AuthGuard]
})

export class AppRoutingModule {}
@@ -1,20 +1,17 @@
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Subscription } from 'rxjs/Subscription';
import { MatIconRegistry } from "@angular/material";
import { DomSanitizer } from "@angular/platform-browser";

import { Subscription } from 'rxjs';
import { MatIconRegistry } from '@angular/material';
import { DomSanitizer } from '@angular/platform-browser';

import { AuthService } from './auth/auth.service';
import * as schema from './schema/equipment.json';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

private userSubscription: Subscription;
public user: any;

@@ -24,18 +21,17 @@ export class AppComponent implements OnInit {
private domSanitizer: DomSanitizer,
private matIconRegistry: MatIconRegistry
) {
this.registerSvgIcons()
this.registerSvgIcons();
}

public ngOnInit() {

// init this.user on startup
this.authService.me().subscribe(data => {
this.user = data.user;
});

// update this.user after login/register/logout
this.userSubscription = this.authService.$userSource.subscribe((user) => {
this.userSubscription = this.authService.$userSource.subscribe(user => {
this.user = user;
});
}
@@ -49,7 +45,7 @@ export class AppComponent implements OnInit {
this.router.navigate([link]);
}

ngOnDestroy() {
ngOnDestroy() {
if (this.userSubscription) {
this.userSubscription.unsubscribe();
}
@@ -88,10 +84,12 @@ export class AppComponent implements OnInit {
'tow-truck',
'transportation',
'trolleybus',
'water-transportation',
].forEach((icon) => {
this.matIconRegistry.addSvgIcon(icon, this.domSanitizer.bypassSecurityTrustResourceUrl(`assets/icons/${icon}.svg`))
'water-transportation'
].forEach(icon => {
this.matIconRegistry.addSvgIcon(
icon,
this.domSanitizer.bypassSecurityTrustResourceUrl(`assets/icons/${icon}.svg`)
);
});
}

}
@@ -9,7 +9,6 @@ import { AuthService } from './auth.service';
import { TokenStorage } from './token.storage';
import { AuthRoutingModule } from './auth-routing.module';


@NgModule({
imports: [
CommonModule,
@@ -1,10 +1,8 @@
import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, Subject } from 'rxjs';

import { TokenStorage } from './token.storage';
import { TooltipComponent } from '@angular/material';

@Injectable()
export class AuthService {
@@ -1,19 +1,20 @@
import {HttpEvent, HttpInterceptor, HttpHandler, HttpRequest} from '@angular/common/http';
import {Observable} from 'rxjs/Observable';
import {TokenStorage} from '../auth/token.storage';
import { Injectable } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest } from '@angular/common/http';
import { Observable } from 'rxjs';

import { TokenStorage } from '../auth/token.storage';

@Injectable()
export class AuthHeaderInterceptor implements HttpInterceptor {
intercept(req : HttpRequest <any>, next : HttpHandler) : Observable <HttpEvent<any>> {
// Clone the request to add the new header
const token = new TokenStorage();
const tokenVal = token.getToken();
const clonedRequest = req.clone({
headers: req
.headers
.set('Authorization', tokenVal ? `Bearer ${ tokenVal}` : '')
});
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
// Clone the request to add the new header
const token = new TokenStorage();
const tokenVal = token.getToken();
const clonedRequest = req.clone({
headers: req.headers.set('Authorization', tokenVal ? `Bearer ${tokenVal}` : '')
});

// Pass the cloned request instead of the original request to the next handle
return next.handle(clonedRequest);
}
}
// Pass the cloned request instead of the original request to the next handle
return next.handle(clonedRequest);
}
}
@@ -1,20 +1,27 @@
import {HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpErrorResponse} from '@angular/common/http';
import {Observable} from 'rxjs/Observable';

import 'rxjs/add/operator/do';
import { Injectable } from '@angular/core';
import {
HttpEvent,
HttpInterceptor,
HttpHandler,
HttpRequest,
HttpErrorResponse
} from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';

@Injectable()
export class CatchErrorInterceptor implements HttpInterceptor {
intercept(request : HttpRequest < any >, next : HttpHandler) : Observable < HttpEvent < any >> {

return next
.handle(request)
.do
((event : HttpEvent < any >) => {}, (err : any) => {
if (err instanceof HttpErrorResponse) {
let text = (err.error && err.error.message) ? err.error.message : err.statusText;
(<any>window).globalEvents.emit('open error dialog', text);
}
});
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
return next.handle(request).pipe(
catchError(error => {
if (error instanceof HttpErrorResponse) {
const text =
error.error && error.error.message ? error.error.message : error.statusText;
(<any>window).globalEvents.emit('open error dialog', text);
}

}
}
return throwError(error);
})
);
}
}

0 comments on commit b5f22c8

Please sign in to comment.
You can’t perform that action at this time.