Skip to content

Commit fbbf944

Browse files
elupanovelupanov
authored
feat: upgrade to Angular 9 and Nebular 5 (#5628)
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](akveo/ng2-smart-table#1140 (comment)).
1 parent df3bc2a commit fbbf944

22 files changed

+16086
-13934
lines changed

‎angular.json

+8-2
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
"build": {
1212
"builder": "@angular-devkit/build-angular:browser",
1313
"options": {
14+
"aot": true,
1415
"preserveSymlinks": true,
1516
"rebaseRootRelativeCssUrls": true,
1617
"outputPath": "dist",
@@ -36,7 +37,6 @@
3637
"node_modules/@fortawesome/fontawesome-free/css/all.css",
3738
"node_modules/socicon/css/socicon.css",
3839
"node_modules/nebular-icons/scss/nebular-icons.scss",
39-
"node_modules/angular-tree-component/dist/angular-tree-component.css",
4040
"node_modules/pace-js/templates/pace-theme-flash.tmpl.css",
4141
"node_modules/leaflet/dist/leaflet.css",
4242
"src/app/@theme/styles/styles.scss"
@@ -55,6 +55,12 @@
5555
},
5656
"configurations": {
5757
"production": {
58+
"budgets": [
59+
{
60+
"type": "anyComponentStyle",
61+
"maximumWarning": "6kb"
62+
}
63+
],
5864
"optimization": true,
5965
"outputHashing": "all",
6066
"sourceMap": false,
@@ -172,7 +178,7 @@
172178
"schematics": {
173179
"@schematics/angular:component": {
174180
"prefix": "ngx",
175-
"styleext": "scss"
181+
"style": "scss"
176182
},
177183
"@schematics/angular:directive": {
178184
"prefix": "ngx"

‎package-lock.json

+15,964-13,798
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+34-34
Original file line numberDiff line numberDiff line change
@@ -26,70 +26,70 @@
2626
"docs": "compodoc -p src/tsconfig.app.json -d docs",
2727
"docs:serve": "compodoc -p src/tsconfig.app.json -d docs -s",
2828
"prepush": "npm run lint:ci",
29-
"release:changelog": "npm run conventional-changelog -- -p angular -i CHANGELOG.md -s"
29+
"release:changelog": "npm run conventional-changelog -- -p angular -i CHANGELOG.md -s",
30+
"postinstall": "ngcc --properties es2015 es5 browser module main --first-only --create-ivy-entry-points"
3031
},
3132
"dependencies": {
32-
"@agm/core": "^1.0.0-beta.5",
33-
"@angular/animations": "^8.0.0",
34-
"@angular/cdk": "^8.0.0",
35-
"@angular/common": "^8.0.0",
36-
"@angular/compiler": "^8.0.0",
37-
"@angular/core": "^8.0.0",
38-
"@angular/forms": "^8.0.0",
39-
"@angular/platform-browser": "^8.0.0",
40-
"@angular/platform-browser-dynamic": "^8.0.0",
41-
"@angular/router": "^8.0.0",
33+
"@akveo/ng2-completer": "^9.0.1",
34+
"@angular/animations": "^9.0.4",
35+
"@angular/cdk": "^9.1.2",
36+
"@angular/common": "^9.0.4",
37+
"@angular/compiler": "^9.0.4",
38+
"@angular/core": "^9.0.4",
39+
"@angular/forms": "^9.0.4",
40+
"@angular/google-maps": "^9.1.0",
41+
"@angular/platform-browser": "^9.0.4",
42+
"@angular/platform-browser-dynamic": "^9.0.4",
43+
"@angular/router": "^9.0.4",
4244
"@asymmetrik/ngx-leaflet": "3.0.1",
43-
"@nebular/auth": "4.4.0",
44-
"@nebular/eva-icons": "4.4.0",
45-
"@nebular/security": "4.4.0",
46-
"@nebular/theme": "4.4.0",
47-
"@swimlane/ngx-charts": "^10.0.0",
48-
"angular-tree-component": "7.2.0",
45+
"@nebular/auth": "5.0.0",
46+
"@nebular/eva-icons": "5.0.0",
47+
"@nebular/security": "5.0.0",
48+
"@nebular/theme": "5.0.0",
49+
"@swimlane/ngx-charts": "^13.0.2",
4950
"angular2-chartjs": "0.4.1",
50-
"angular2-toaster": "^7.0.0",
5151
"bootstrap": "4.3.1",
5252
"chart.js": "2.7.1",
5353
"ckeditor": "4.7.3",
5454
"classlist.js": "1.1.20150312",
5555
"core-js": "2.5.1",
5656
"echarts": "^4.0.2",
57-
"eva-icons": "^1.1.0",
57+
"eva-icons": "^1.1.3",
5858
"intl": "1.2.5",
5959
"ionicons": "2.0.1",
6060
"leaflet": "1.2.0",
6161
"nebular-icons": "1.1.0",
6262
"ng2-ckeditor": "^1.2.2",
63-
"ng2-completer": "2.0.8",
64-
"ng2-smart-table": "1.3.5",
65-
"ngx-echarts": "^4.0.1",
63+
"ng2-smart-table": "^1.6.0",
64+
"ngx-echarts": "^4.2.2",
6665
"node-sass": "^4.12.0",
6766
"normalize.css": "6.0.0",
6867
"pace-js": "1.0.2",
6968
"roboto-fontface": "0.8.0",
70-
"rxjs": "6.5.2",
69+
"rxjs": "6.5.4",
7170
"rxjs-compat": "6.3.0",
7271
"socicon": "3.0.5",
72+
"style-loader": "^1.1.3",
7373
"tinymce": "4.5.7",
74-
"tslib": "^1.9.0",
74+
"tslib": "^1.10.0",
7575
"typeface-exo": "0.0.22",
76-
"web-animations-js": "github:angular/web-animations-js#release_pr208",
77-
"zone.js": "~0.9.1"
76+
"web-animations-js": "^2.3.2",
77+
"zone.js": "~0.10.2"
7878
},
7979
"devDependencies": {
80-
"@angular-devkit/build-angular": "~0.800.2",
81-
"@angular/cli": "^8.0.2",
82-
"@angular/compiler-cli": "^8.0.0",
83-
"@angular/language-service": "8.0.0",
80+
"@angular-devkit/build-angular": "~0.900.4",
81+
"@angular/cli": "^9.0.4",
82+
"@angular/compiler-cli": "^9.0.4",
83+
"@angular/language-service": "9.0.4",
8484
"@compodoc/compodoc": "1.0.1",
8585
"@fortawesome/fontawesome-free": "^5.2.0",
8686
"@types/d3-color": "1.0.5",
87-
"@types/googlemaps": "^3.30.4",
87+
"@types/googlemaps": "^3.39.3",
8888
"@types/jasmine": "2.5.54",
8989
"@types/jasminewd2": "2.0.3",
9090
"@types/leaflet": "1.2.3",
91-
"@types/node": "6.0.90",
92-
"codelyzer": "^5.0.1",
91+
"@types/node": "^12.11.1",
92+
"codelyzer": "^5.1.2",
9393
"conventional-changelog-cli": "1.3.4",
9494
"husky": "0.13.3",
9595
"jasmine-core": "2.6.4",
@@ -107,6 +107,6 @@
107107
"ts-node": "3.2.2",
108108
"tslint": "^5.7.0",
109109
"tslint-language-service": "^0.9.9",
110-
"typescript": "3.4.5"
110+
"typescript": "3.7.5"
111111
}
112112
}

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -159,8 +159,8 @@ export class CoreModule {
159159
throwIfAlreadyLoaded(parentModule, 'CoreModule');
160160
}
161161

162-
static forRoot(): ModuleWithProviders {
163-
return <ModuleWithProviders>{
162+
static forRoot(): ModuleWithProviders<CoreModule> {
163+
return {
164164
ngModule: CoreModule,
165165
providers: [
166166
...NB_CORE_PROVIDERS,

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -54,8 +54,8 @@ const SERVICES = [
5454
],
5555
})
5656
export class MockDataModule {
57-
static forRoot(): ModuleWithProviders {
58-
return <ModuleWithProviders>{
57+
static forRoot(): ModuleWithProviders<MockDataModule> {
58+
return {
5959
ngModule: MockDataModule,
6060
providers: [
6161
...SERVICES,

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -76,8 +76,8 @@ const PIPES = [
7676
declarations: [...COMPONENTS, ...PIPES],
7777
})
7878
export class ThemeModule {
79-
static forRoot(): ModuleWithProviders {
80-
return <ModuleWithProviders>{
79+
static forRoot(): ModuleWithProviders<ThemeModule> {
80+
return {
8181
ngModule: ThemeModule,
8282
providers: [
8383
...NbThemeModule.forRoot(

‎src/app/app-routing.module.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,10 @@ import {
99
NbResetPasswordComponent,
1010
} from '@nebular/auth';
1111

12-
const routes: Routes = [
12+
export const routes: Routes = [
1313
{
1414
path: 'pages',
15-
loadChildren: () => import('app/pages/pages.module')
15+
loadChildren: () => import('./pages/pages.module')
1616
.then(m => m.PagesModule),
1717
},
1818
{

‎src/app/app.module.ts

+1-3
Original file line numberDiff line numberDiff line change
@@ -28,9 +28,6 @@ import {
2828
BrowserAnimationsModule,
2929
HttpClientModule,
3030
AppRoutingModule,
31-
32-
ThemeModule.forRoot(),
33-
3431
NbSidebarModule.forRoot(),
3532
NbMenuModule.forRoot(),
3633
NbDatepickerModule.forRoot(),
@@ -41,6 +38,7 @@ import {
4138
messageGoogleMapKey: 'AIzaSyA_wNuCzia92MAmdLRzmqitRGvCF7wCZPY',
4239
}),
4340
CoreModule.forRoot(),
41+
ThemeModule.forRoot(),
4442
],
4543
bootstrap: [AppComponent],
4644
})

‎src/app/pages/e-commerce/country-orders/country-orders.component.ts

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component, OnDestroy } from '@angular/core';
1+
import { Component, OnDestroy, OnInit } from '@angular/core';
22
import { NbMediaBreakpoint, NbMediaBreakpointsService, NbThemeService } from '@nebular/theme';
33
import { takeWhile } from 'rxjs/operators';
44
import { CountryOrderData } from '../../../@core/data/country-order';
@@ -22,7 +22,7 @@ import { CountryOrderData } from '../../../@core/data/country-order';
2222
</nb-card>
2323
`,
2424
})
25-
export class CountryOrdersComponent implements OnDestroy {
25+
export class CountryOrdersComponent implements OnInit, OnDestroy {
2626

2727
private alive = true;
2828

@@ -36,6 +36,9 @@ export class CountryOrdersComponent implements OnDestroy {
3636
private breakpointService: NbMediaBreakpointsService,
3737
private countryOrderService: CountryOrderData) {
3838
this.breakpoints = this.breakpointService.getBreakpointsMap();
39+
}
40+
41+
ngOnInit() {
3942
this.themeService.onMediaQueryChange()
4043
.pipe(takeWhile(() => this.alive))
4144
.subscribe(([oldValue, newValue]) => {

‎src/app/pages/maps/gmaps/gmaps.component.html

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<nb-card>
2+
<nb-card-header>Google Maps</nb-card-header>
3+
<nb-card-body>
4+
<google-map [center]="position" [zoom]="8" width="100%" height="36.5625rem">
5+
<map-marker [position]="position"></map-marker>
6+
</google-map>
7+
</nb-card-body>
8+
</nb-card>

‎src/app/pages/maps/gmaps/gmaps.component.ts

+2-13
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,8 @@ import { Component } from '@angular/core';
33
@Component({
44
selector: 'ngx-gmaps',
55
styleUrls: ['./gmaps.component.scss'],
6-
template: `
7-
<nb-card>
8-
<nb-card-header>Google Maps</nb-card-header>
9-
<nb-card-body>
10-
<agm-map [latitude]="lat" [longitude]="lng">
11-
<agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
12-
</agm-map>
13-
</nb-card-body>
14-
</nb-card>
15-
`,
6+
templateUrl: './gmaps.component.html',
167
})
178
export class GmapsComponent {
18-
19-
lat = 51.678418;
20-
lng = 7.809007;
9+
readonly position = { lat: 51.678418, lng: 7.809007 };
2110
}

‎src/app/pages/maps/maps.module.ts

+2-5
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { NgModule } from '@angular/core';
2-
import { AgmCoreModule } from '@agm/core';
2+
import { GoogleMapsModule } from '@angular/google-maps';
33
import { LeafletModule } from '@asymmetrik/ngx-leaflet';
44
import { NgxEchartsModule } from 'ngx-echarts';
55
import { NbCardModule } from '@nebular/theme';
@@ -10,10 +10,7 @@ import { MapsRoutingModule, routedComponents } from './maps-routing.module';
1010
@NgModule({
1111
imports: [
1212
ThemeModule,
13-
AgmCoreModule.forRoot({
14-
apiKey: 'AIzaSyCpVhQiwAllg1RAFaxMWSpQruuGARy0Y1k',
15-
libraries: ['places'],
16-
}),
13+
GoogleMapsModule,
1714
LeafletModule.forRoot(),
1815
MapsRoutingModule,
1916
NgxEchartsModule,

‎src/app/pages/maps/search-map/entity/Location.ts

-4
This file was deleted.

‎src/app/pages/maps/search-map/entity/position.model.ts

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export class PositionModel {
2+
constructor(
3+
public lat = 53.9,
4+
public lng = 27.5667,
5+
) {}
6+
}

‎src/app/pages/maps/search-map/map/map.component.html

+3-7
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1-
<agm-map [latitude]="latitude"
2-
[longitude]="longitude"
3-
[scrollwheel]="false"
4-
[zoom]="zoom">
5-
<agm-marker [latitude]="latitude"
6-
[longitude]="longitude"></agm-marker>
7-
</agm-map>
1+
<google-map [center]="position" [zoom]="zoom" width="100%" height="36.5625rem">
2+
<map-marker [position]="position"></map-marker>
3+
</google-map>

‎src/app/pages/maps/search-map/map/map.component.ts

+12-11
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,30 @@
11
import { Component, Input, OnInit } from '@angular/core';
2-
import { Location } from '../entity/Location';
2+
import { PositionModel } from '../entity/position.model';
33

44
@Component({
55
selector: 'ngx-map',
66
templateUrl: './map.component.html',
77
styleUrls: ['./map.component.scss'],
88
})
99
export class MapComponent implements OnInit {
10-
latitude: number;
11-
longitude: number;
12-
zoom: number;
10+
position: PositionModel = null;
11+
zoom: number = 1;
1312

1413
@Input()
15-
public set searchedLocation(searchedLocation: Location) {
16-
this.latitude = searchedLocation.latitude;
17-
this.longitude = searchedLocation.longitude;
18-
this.zoom = 12;
14+
public set searchedPosition(position: PositionModel) {
15+
if (position) {
16+
this.position = position;
17+
this.zoom = 12;
18+
}
1919
}
2020

21-
ngOnInit(): void {
21+
ngOnInit() {
2222
// set up current location
2323
if ('geolocation' in navigator) {
2424
navigator.geolocation.getCurrentPosition((position) => {
25-
this.searchedLocation = new Location(
26-
position.coords.latitude, position.coords.longitude,
25+
this.searchedPosition = new PositionModel(
26+
position.coords.latitude,
27+
position.coords.longitude,
2728
);
2829
});
2930
}

‎src/app/pages/maps/search-map/search-map.component.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<nb-card>
22
<nb-card-header>Google Maps with search</nb-card-header>
33
<nb-card-body>
4-
<ngx-search (positionChanged)="updateLocation($event)"></ngx-search>
5-
<ngx-map [searchedLocation]="searchedLocation"></ngx-map>
4+
<ngx-search (positionChanged)="setPosition($event)"></ngx-search>
5+
<ngx-map [searchedPosition]="searchedPosition"></ngx-map>
66
</nb-card-body>
77
</nb-card>

‎src/app/pages/maps/search-map/search-map.component.ts

+4-5
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
11
import { Component } from '@angular/core';
2-
import { Location } from './entity/Location';
2+
import { PositionModel } from './entity/position.model';
33

44
@Component({
55
selector: 'ngx-search-map',
66
templateUrl: './search-map.component.html',
77
})
88
export class SearchMapComponent {
9+
searchedPosition: PositionModel = new PositionModel();
910

10-
searchedLocation: Location = new Location();
11-
12-
updateLocation(event: Location) {
13-
this.searchedLocation = new Location(event.latitude, event.longitude);
11+
setPosition(position: PositionModel) {
12+
this.searchedPosition = position;
1413
}
1514
}

0 commit comments

Comments
 (0)