Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-09-22 05:50:48 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: upgrade to Angular 9 and Nebular 5 (#5628)

Browse source 
BREAKING CHANGE:
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).
This commit is contained in:
Evgeny Lupanov 2020-03-30 12:06:51 +03:00 • committed by GitHub
parent df3bc2a60d
commit fbbf94448b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
22 changed files with 5732 additions and 3580 deletions
Download patch file Download diff file Expand all files Collapse all files

10
angular.json
View file

@ -11,6 +11,7 @@
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"aot": true,
"preserveSymlinks": true,
"rebaseRootRelativeCssUrls": true,
"outputPath": "dist",
@ -36,7 +37,6 @@
"node_modules/@fortawesome/fontawesome-free/css/all.css",
"node_modules/socicon/css/socicon.css",
"node_modules/nebular-icons/scss/nebular-icons.scss",
"node_modules/angular-tree-component/dist/angular-tree-component.css",
"node_modules/pace-js/templates/pace-theme-flash.tmpl.css",
"node_modules/leaflet/dist/leaflet.css",
"src/app/@theme/styles/styles.scss"
@ -55,6 +55,12 @@
},
"configurations": {
"production": {
"budgets": [
{
"type": "anyComponentStyle",
"maximumWarning": "6kb"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
@ -172,7 +178,7 @@
"schematics": {
"@schematics/angular:component": {
"prefix": "ngx",
"styleext": "scss"
"style": "scss"
},
"@schematics/angular:directive": {
"prefix": "ngx"

9058
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

68
package.json
View file

@ -26,70 +26,70 @@
"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",
"@angular/animations": "^8.0.0",
"@angular/cdk": "^8.0.0",
"@angular/common": "^8.0.0",
"@angular/compiler": "^8.0.0",
"@angular/core": "^8.0.0",
"@angular/forms": "^8.0.0",
"@angular/platform-browser": "^8.0.0",
"@angular/platform-browser-dynamic": "^8.0.0",
"@angular/router": "^8.0.0",
"@akveo/ng2-completer": "^9.0.1",
"@angular/animations": "^9.0.4",
"@angular/cdk": "^9.1.2",
"@angular/common": "^9.0.4",
"@angular/compiler": "^9.0.4",
"@angular/core": "^9.0.4",
"@angular/forms": "^9.0.4",
"@angular/google-maps": "^9.1.0",
"@angular/platform-browser": "^9.0.4",
"@angular/platform-browser-dynamic": "^9.0.4",
"@angular/router": "^9.0.4",
"@asymmetrik/ngx-leaflet": "3.0.1",
"@nebular/auth": "4.4.0",
"@nebular/eva-icons": "4.4.0",
"@nebular/security": "4.4.0",
"@nebular/theme": "4.4.0",
"@swimlane/ngx-charts": "^10.0.0",
"angular-tree-component": "7.2.0",
"@nebular/auth": "5.0.0",
"@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",
"angular2-toaster": "^7.0.0",
"bootstrap": "4.3.1",
"chart.js": "2.7.1",
"ckeditor": "4.7.3",
"classlist.js": "1.1.20150312",
"core-js": "2.5.1",
"echarts": "^4.0.2",
"eva-icons": "^1.1.0",
"eva-icons": "^1.1.3",
"intl": "1.2.5",
"ionicons": "2.0.1",
"leaflet": "1.2.0",
"nebular-icons": "1.1.0",
"ng2-ckeditor": "^1.2.2",
"ng2-completer": "2.0.8",
"ng2-smart-table": "1.3.5",
"ngx-echarts": "^4.0.1",
"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",
"tinymce": "4.5.7",
"tslib": "^1.9.0",
"tslib": "^1.10.0",
"typeface-exo": "0.0.22",
"web-animations-js": "github:angular/web-animations-js#release_pr208",
"zone.js": "~0.9.1"
"web-animations-js": "^2.3.2",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.800.2",
"@angular/cli": "^8.0.2",
"@angular/compiler-cli": "^8.0.0",
"@angular/language-service": "8.0.0",
"@angular-devkit/build-angular": "~0.900.4",
"@angular/cli": "^9.0.4",
"@angular/compiler-cli": "^9.0.4",
"@angular/language-service": "9.0.4",
"@compodoc/compodoc": "1.0.1",
"@fortawesome/fontawesome-free": "^5.2.0",
"@types/d3-color": "1.0.5",
"@types/googlemaps": "^3.30.4",
"@types/googlemaps": "^3.39.3",
"@types/jasmine": "2.5.54",
"@types/jasminewd2": "2.0.3",
"@types/leaflet": "1.2.3",
"@types/node": "6.0.90",
"codelyzer": "^5.0.1",
"@types/node": "^12.11.1",
"codelyzer": "^5.1.2",
"conventional-changelog-cli": "1.3.4",
"husky": "0.13.3",
"jasmine-core": "2.6.4",
@ -107,6 +107,6 @@
"ts-node": "3.2.2",
"tslint": "^5.7.0",
"tslint-language-service": "^0.9.9",
"typescript": "3.4.5"
"typescript": "3.7.5"
}
}

4
src/app/@core/core.module.ts
View file

@ -159,8 +159,8 @@ export class CoreModule {
throwIfAlreadyLoaded(parentModule, 'CoreModule');
}
static forRoot(): ModuleWithProviders {
return <ModuleWithProviders>{
static forRoot(): ModuleWithProviders<CoreModule> {
return {
ngModule: CoreModule,
providers: [
...NB_CORE_PROVIDERS,

4
src/app/@core/mock/mock-data.module.ts
View file

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

4
src/app/@theme/theme.module.ts
View file

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

4
src/app/app-routing.module.ts
View file

@ -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),
},
{

4
src/app/app.module.ts
View file

@ -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],
})

7
src/app/pages/e-commerce/country-orders/country-orders.component.ts
View file

@ -1,4 +1,4 @@
import { Component, OnDestroy } from '@angular/core';
import { Component, OnDestroy, OnInit } from '@angular/core';
import { NbMediaBreakpoint, NbMediaBreakpointsService, NbThemeService } from '@nebular/theme';
import { takeWhile } from 'rxjs/operators';
import { CountryOrderData } from '../../../@core/data/country-order';
@ -22,7 +22,7 @@ import { CountryOrderData } from '../../../@core/data/country-order';
</nb-card>
`,
})
export class CountryOrdersComponent implements OnDestroy {
export class CountryOrdersComponent implements OnInit, OnDestroy {
private alive = true;
@ -36,6 +36,9 @@ export class CountryOrdersComponent implements OnDestroy {
private breakpointService: NbMediaBreakpointsService,
private countryOrderService: CountryOrderData) {
this.breakpoints = this.breakpointService.getBreakpointsMap();
}
ngOnInit() {
this.themeService.onMediaQueryChange()
.pipe(takeWhile(() => this.alive))
.subscribe(([oldValue, newValue]) => {

8
src/app/pages/maps/gmaps/gmaps.component.html Normal file
View file

@ -0,0 +1,8 @@
<nb-card>
<nb-card-header>Google Maps</nb-card-header>
<nb-card-body>
<google-map [center]="position" [zoom]="8" width="100%" height="36.5625rem">
<map-marker [position]="position"></map-marker>
</google-map>
</nb-card-body>
</nb-card>

15
src/app/pages/maps/gmaps/gmaps.component.ts
View file

@ -3,19 +3,8 @@ import { Component } from '@angular/core';
@Component({
selector: 'ngx-gmaps',
styleUrls: ['./gmaps.component.scss'],
template: `
<nb-card>
<nb-card-header>Google Maps</nb-card-header>
<nb-card-body>
<agm-map [latitude]="lat" [longitude]="lng">
<agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map>
</nb-card-body>
</nb-card>
`,
templateUrl: './gmaps.component.html',
})
export class GmapsComponent {
lat = 51.678418;
lng = 7.809007;
readonly position = { lat: 51.678418, lng: 7.809007 };
}

7
src/app/pages/maps/maps.module.ts
View file

@ -1,5 +1,5 @@
import { NgModule } from '@angular/core';
import { AgmCoreModule } from '@agm/core';
import { GoogleMapsModule } from '@angular/google-maps';
import { LeafletModule } from '@asymmetrik/ngx-leaflet';
import { NgxEchartsModule } from 'ngx-echarts';
import { NbCardModule } from '@nebular/theme';
@ -10,10 +10,7 @@ import { MapsRoutingModule, routedComponents } from './maps-routing.module';
@NgModule({
imports: [
ThemeModule,
AgmCoreModule.forRoot({
apiKey: 'AIzaSyCpVhQiwAllg1RAFaxMWSpQruuGARy0Y1k',
libraries: ['places'],
}),
GoogleMapsModule,
LeafletModule.forRoot(),
MapsRoutingModule,
NgxEchartsModule,

4
src/app/pages/maps/search-map/entity/Location.ts
View file

@ -1,4 +0,0 @@
export class Location {
constructor(public latitude: number = 53.9, public longitude: number = 27.5667) {
}
}

6
src/app/pages/maps/search-map/entity/position.model.ts Normal file
View file

@ -0,0 +1,6 @@
export class PositionModel {
constructor(
public lat = 53.9,
public lng = 27.5667,
) {}
}

10
src/app/pages/maps/search-map/map/map.component.html
View file

@ -1,7 +1,3 @@
<agm-map [latitude]="latitude"
[longitude]="longitude"
[scrollwheel]="false"
[zoom]="zoom">
<agm-marker [latitude]="latitude"
[longitude]="longitude"></agm-marker>
</agm-map>
<google-map [center]="position" [zoom]="zoom" width="100%" height="36.5625rem">
<map-marker [position]="position"></map-marker>
</google-map>

23
src/app/pages/maps/search-map/map/map.component.ts
View file

@ -1,5 +1,5 @@
import { Component, Input, OnInit } from '@angular/core';
import { Location } from '../entity/Location';
import { PositionModel } from '../entity/position.model';
@Component({
selector: 'ngx-map',
@ -7,23 +7,24 @@ import { Location } from '../entity/Location';
styleUrls: ['./map.component.scss'],
})
export class MapComponent implements OnInit {
latitude: number;
longitude: number;
zoom: number;
position: PositionModel = null;
zoom: number = 1;
@Input()
public set searchedLocation(searchedLocation: Location) {
this.latitude = searchedLocation.latitude;
this.longitude = searchedLocation.longitude;
this.zoom = 12;
public set searchedPosition(position: PositionModel) {
if (position) {
this.position = position;
this.zoom = 12;
}
}
ngOnInit(): void {
ngOnInit() {
// set up current location
if ('geolocation' in navigator) {
navigator.geolocation.getCurrentPosition((position) => {
this.searchedLocation = new Location(
position.coords.latitude, position.coords.longitude,
this.searchedPosition = new PositionModel(
position.coords.latitude,
position.coords.longitude,
);
});
}

4
src/app/pages/maps/search-map/search-map.component.html
View file

@ -1,7 +1,7 @@
<nb-card>
<nb-card-header>Google Maps with search</nb-card-header>
<nb-card-body>
<ngx-search (positionChanged)="updateLocation($event)"></ngx-search>
<ngx-map [searchedLocation]="searchedLocation"></ngx-map>
<ngx-search (positionChanged)="setPosition($event)"></ngx-search>
<ngx-map [searchedPosition]="searchedPosition"></ngx-map>
</nb-card-body>
</nb-card>

9
src/app/pages/maps/search-map/search-map.component.ts
View file

@ -1,15 +1,14 @@
import { Component } from '@angular/core';
import { Location } from './entity/Location';
import { PositionModel } from './entity/position.model';
@Component({
selector: 'ngx-search-map',
templateUrl: './search-map.component.html',
})
export class SearchMapComponent {
searchedPosition: PositionModel = new PositionModel();
searchedLocation: Location = new Location();
updateLocation(event: Location) {
this.searchedLocation = new Location(event.latitude, event.longitude);
setPosition(position: PositionModel) {
this.searchedPosition = position;
}
}

46
src/app/pages/maps/search-map/search/search.component.ts
View file

@ -1,7 +1,5 @@
import { Component, ElementRef, EventEmitter, NgZone, OnInit, Output, ViewChild } from '@angular/core';
import { MapsAPILoader } from '@agm/core';
import { Location } from '../entity/Location';
import { PositionModel } from '../entity/position.model';
@Component({
selector: 'ngx-search',
@ -9,35 +7,33 @@ import { Location } from '../entity/Location';
})
export class SearchComponent implements OnInit {
@Output() positionChanged = new EventEmitter<Location>();
@Output()
positionChanged: EventEmitter<PositionModel> = new EventEmitter<PositionModel>();
@ViewChild('search', { static: true })
public searchElementRef: ElementRef;
searchElementRef: ElementRef;
constructor(private mapsAPILoader: MapsAPILoader,
private ngZone: NgZone) {
}
constructor(private ngZone: NgZone) {}
ngOnInit() {
// load Places Autocomplete
this.mapsAPILoader.load().then(() => {
const autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement, {
types: ['address'],
});
autocomplete.addListener('place_changed', () => {
this.ngZone.run(() => {
// get the place result
const place: google.maps.places.PlaceResult = autocomplete.getPlace();
const autocomplete = new google.maps.places.Autocomplete(
this.searchElementRef.nativeElement, { types: ['address'] },
);
// verify result
if (place.geometry === undefined || place.geometry === null) {
return;
}
autocomplete.addListener('place_changed', () => {
this.ngZone.run(() => {
// get the place result
const place: google.maps.places.PlaceResult = autocomplete.getPlace();
this.positionChanged.emit(
new Location(place.geometry.location.lat(),
place.geometry.location.lng()));
});
// verify result
if (place.geometry === undefined || place.geometry === null) {
return;
}
this.positionChanged.emit(new PositionModel(
place.geometry.location.lat(),
place.geometry.location.lng(),
));
});
});
}

6
src/app/pages/modal-overlays/toastr/toastr.component.ts
View file

@ -1,13 +1,11 @@
import { Component } from '@angular/core';
import { ToasterConfig } from 'angular2-toaster';
import 'style-loader!angular2-toaster/toaster.css';
import {
NbComponentStatus,
NbGlobalLogicalPosition,
NbGlobalPhysicalPosition,
NbGlobalPosition,
NbToastrService,
NbToastrConfig,
} from '@nebular/theme';
@Component({
@ -18,7 +16,7 @@ import {
export class ToastrComponent {
constructor(private toastrService: NbToastrService) {}
config: ToasterConfig;
config: NbToastrConfig;
index = 1;
destroyByClick = true;

1
src/index.html
View file

@ -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>

10
src/tsconfig.app.json
View file

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