chore: upgrade angular to 8.x & zorro to 7.x

Author: giscafer

.gitignore

@@ -42,4 +42,4 @@ testem.log
 # System Files
 .DS_Store
 Thumbs.db
-package-lock.json
+package-lock.json

angular.json

@@ -19,15 +19,18 @@
                         "assets": [
                             "src/assets",
                             "src/mock",
-                            "src/favicon.ico"
+                            "src/favicon.ico",
+                            {
+                                "glob": "**/*",
+                                "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
+                                "output": "/assets/"
+                            }
                         ],
                         "styles": [
                             "node_modules/ng-zorro-antd/src/ng-zorro-antd.min.css",
                             "src/styles.scss"
                         ],
-                        "scripts": [
-                            "node_modules/jquery/dist/jquery.min.js"
-                        ]
+                        "scripts": ["node_modules/jquery/dist/jquery.min.js"]
                     },
                     "configurations": {
                         "production": {
@@ -40,10 +43,12 @@
                             "extractLicenses": true,
                             "vendorChunk": false,
                             "buildOptimizer": true,
-                            "fileReplacements": [{
-                                "replace": "src/environments/environment.ts",
-                                "with": "src/environments/environment.prod.ts"
-                            }]
+                            "fileReplacements": [
+                                {
+                                    "replace": "src/environments/environment.ts",
+                                    "with": "src/environments/environment.prod.ts"
+                                }
+                            ]
                         }
                     }
                 },
@@ -71,18 +76,12 @@
                         "karmaConfig": "./karma.conf.js",
                         "polyfills": "src/polyfills.ts",
                         "tsConfig": "src/tsconfig.spec.json",
-                        "scripts": [
-                            "node_modules/jquery/dist/jquery.min.js"
-                        ],
+                        "scripts": ["node_modules/jquery/dist/jquery.min.js"],
                         "styles": [
                             "node_modules/ng-zorro-antd/src/ng-zorro-antd.min.css",
                             "src/styles.scss"
                         ],
-                        "assets": [
-                            "src/assets",
-                            "src/mock",
-                            "src/favicon.ico"
-                        ]
+                        "assets": ["src/assets", "src/mock", "src/favicon.ico"]
                     }
                 },
                 "lint": {
@@ -92,9 +91,7 @@
                             "src/tsconfig.app.json",
                             "src/tsconfig.spec.json"
                         ],
-                        "exclude": [
-                            "**/node_modules/**"
-                        ]
+                        "exclude": ["**/node_modules/**"]
                     }
                 }
             }
@@ -114,12 +111,8 @@
                 "lint": {
                     "builder": "@angular-devkit/build-angular:tslint",
                     "options": {
-                        "tsConfig": [
-                            "e2e/tsconfig.e2e.json"
-                        ],
-                        "exclude": [
-                            "**/node_modules/**"
-                        ]
+                        "tsConfig": ["e2e/tsconfig.e2e.json"],
+                        "exclude": ["**/node_modules/**"]
                     }
                 }
             }
@@ -135,4 +128,4 @@
             "prefix": "app"
         }
     }
-}
+}

package.json

@@ -5,7 +5,7 @@
     "license": "MIT",
     "scripts": {
         "ng": "ng",
-        "start": "ng serve --port 8888",
+        "start": "ng serve --port 8888 -o",
         "build": "ng build",
         "aot": "ng build --prod --aot",
         "test": "ng test",
@@ -21,53 +21,54 @@
     },
     "private": true,
     "dependencies": {
-        "@angular/animations": "^6.0.6",
-        "@angular/common": "^6.0.6",
-        "@angular/compiler": "^6.0.6",
-        "@angular/core": "^6.0.6",
-        "@angular/forms": "^6.0.6",
-        "@angular/http": "^6.0.6",
-        "@angular/platform-browser": "^6.0.6",
-        "@angular/platform-browser-dynamic": "^6.0.6",
-        "@angular/router": "^6.0.6",
-        "@stackblitz/sdk": "^1.2.0",
-        "bootstrap": "^3.3.7",
-        "copy-text-to-clipboard": "^1.0.4",
-        "core-js": "^2.4.1",
+        "@angular/animations": "^8.0.3",
+        "@angular/common": "^8.0.3",
+        "@angular/compiler": "^8.0.3",
+        "@angular/core": "^8.0.3",
+        "@angular/forms": "^8.0.3",
+        "@angular/http": "^7.2.15",
+        "@angular/platform-browser": "^8.0.3",
+        "@angular/platform-browser-dynamic": "^8.0.3",
+        "@angular/router": "^8.0.3",
+        "@ant-design/icons-angular": "^8.0.0",
+        "@stackblitz/sdk": "^1.3.0",
+        "bootstrap": "^4.3.1",
+        "copy-text-to-clipboard": "^2.1.0",
+        "core-js": "^3.1.4",
         "lodash": "^4.17.11",
-        "ng-ace-tern": "^1.1.0",
-        "ng-zorro-antd": "^1.1.1",
-        "ngx-highlightjs": "^2.1.1",
-        "ngx-md": "^6.0.9",
-        "rxjs": "^6.2.1",
-        "rxjs-compat": "^6.0.0-rc.0",
-        "strip-json-comments": "^2.0.1",
-        "z-schema": "^3.19.0",
-        "zone.js": "^0.8.26"
+        "ng-zorro-antd": "^7.5.1",
+        "ngx-ace-tern": "^1.2.2",
+        "ngx-highlightjs": "2.1.1",
+        "ngx-md": "^7.1.3",
+        "rxjs": "^6.5.2",
+        "rxjs-compat": "^6.5.2",
+        "strip-json-comments": "^3.0.1",
+        "z-schema": "^4.1.0",
+        "zone.js": "^0.9.1"
     },
     "devDependencies": {
-        "@angular-devkit/build-angular": "~0.6.8",
-        "@angular-devkit/core": "0.0.29",
-        "@angular/cli": "^6.0.8",
-        "@angular/compiler-cli": "^6.0.6",
-        "@angular/language-service": "^6.0.6",
-        "@types/jasmine": "~2.5.53",
-        "@types/jasminewd2": "~2.0.2",
-        "@types/node": "~6.0.60",
-        "jasmine-core": "~2.6.2",
-        "jasmine-spec-reporter": "~4.1.0",
-        "jquery": "^3.3.1",
+        "@angular-devkit/build-angular": "~0.800.4",
+        "@angular-devkit/core": "8.0.4",
+        "@angular/cli": "^8.0.4",
+        "@angular/compiler-cli": "^8.0.3",
+        "@angular/language-service": "^8.0.3",
+        "@types/jasmine": "~3.3.13",
+        "@types/jasminewd2": "~2.0.6",
+        "@types/node": "~12.0.10",
+        "jasmine-core": "~3.4.0",
+        "jasmine-spec-reporter": "~4.2.1",
+        "jquery": "^3.4.1",
         "json-loader": "^0.5.7",
-        "karma": "~1.7.0",
-        "karma-chrome-launcher": "~2.1.1",
-        "karma-cli": "~1.0.1",
-        "karma-coverage-istanbul-reporter": "^1.2.1",
-        "karma-jasmine": "~1.1.0",
-        "karma-jasmine-html-reporter": "^0.2.2",
-        "protractor": "^5.3.2",
-        "raw-loader": "^0.5.1",
-        "ts-node": "~3.2.0",
-        "tslint": "~5.7.0",
-        "typescript": "~2.7.2"
+        "karma": "~4.1.0",
+        "karma-chrome-launcher": "~2.2.0",
+        "karma-cli": "~2.0.0",
+        "karma-coverage-istanbul-reporter": "^2.0.5",
+        "karma-jasmine": "~2.0.1",
+        "karma-jasmine-html-reporter": "^1.4.2",
+        "protractor": "^5.4.2",
+        "raw-loader": "^1.0.0",
+        "ts-node": "~8.3.0",
+        "tslint": "~5.18.0",
+        "typescript": "3.4.2"
     }
 }

src/app/app-routing.module.ts

@@ -1,19 +1,23 @@
-import { NgModule } from "@angular/core";
-import { Routes, RouterModule } from "@angular/router";
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
 
-import { SharedModule } from "./shared/shared.module";
-import { DndModule } from "../lib/dnd/dnd.module";
-import { ZorroFormComponent } from "./pages/zorro-form/zorro-form.component";
-import { BootstrapFormComponent } from "./pages/bootstrap-form/bootstrap-form.component";
-import { DndComponent } from "./pages/dnd-form/dnd.component";
-import { DocumentComponent } from "./document/document.component";
+import { SharedModule } from './shared/shared.module';
+import { DndModule } from '../lib/dnd/dnd.module';
+import { ZorroFormComponent } from './pages/zorro-form/zorro-form.component';
+import { BootstrapFormComponent } from './pages/bootstrap-form/bootstrap-form.component';
+// import { DndComponent } from "./pages/dnd-form/dnd.component";
+import { DocumentComponent } from './document/document.component';
 
 const routes: Routes = [
     { path: '', redirectTo: 'zorro', pathMatch: 'full' },
-    { path: 'dnd', component: DndComponent },
+    // { path: 'dnd', component: DndComponent },
     { path: 'bootstrap', component: BootstrapFormComponent },
     { path: 'zorro', component: ZorroFormComponent },
-    { path: 'document', redirectTo: 'document/getting-started', pathMatch: 'full' },
+    {
+        path: 'document',
+        redirectTo: 'document/getting-started',
+        pathMatch: 'full'
+    },
     {
         path: 'document/:id',
         component: DocumentComponent
@@ -24,7 +28,7 @@ const routes: Routes = [
     declarations: [
         BootstrapFormComponent,
         ZorroFormComponent,
-        DndComponent,
+        // DndComponent,
         DocumentComponent
     ],
     imports: [
@@ -34,4 +38,4 @@ const routes: Routes = [
     ],
     exports: []
 })
-export class AppRoutingModule { }
+export class AppRoutingModule {}

src/app/app.component.ts

@@ -1,50 +1,54 @@
-import { Component, ViewChild, ViewEncapsulation, OnDestroy } from '@angular/core';
+import {
+    Component,
+    ViewChild,
+    ViewEncapsulation,
+    OnDestroy
+} from '@angular/core';
 import { Title } from '@angular/platform-browser';
 import { NavigationEnd, Router } from '@angular/router';
 import { Subscription } from 'rxjs';
 import { NavComponent } from './layout/nav/nav.component';
 import { BuilderService } from './services/builder-service';
 import { StartUpService } from './services/startup.service';
 
-
 @Component({
-  selector: 'sf-app',
-  templateUrl: './app.component.html',
-  encapsulation: ViewEncapsulation.None,
-  styleUrls: ["./app.component.scss"],
-  providers: [BuilderService]
+    selector: 'sf-app',
+    templateUrl: './app.component.html',
+    encapsulation: ViewEncapsulation.None,
+    styleUrls: ['./app.component.scss'],
+    providers: [BuilderService]
 })
-export class AppComponent implements OnDestroy{
-  @ViewChild('nav') navRef: NavComponent;
+export class AppComponent implements OnDestroy {
+    @ViewChild('nav', { static: false }) navRef: NavComponent;
 
-  subject: Subscription;
-  constructor(
-    private router: Router,
-    private titleService: Title,
-    private startUpService: StartUpService,
-    private builderService: BuilderService
-  ) {
-    this.subject = builderService.builderChanged.subscribe(value => {
-      this.navRef._builder_type = value || 'zorro';
-    });
-    this.startUpService.initData().then(() => {
-      this.startUpService.mockChanged.next('mock chaged')
-    });
-  }
+    subject: Subscription;
+    constructor(
+        private router: Router,
+        private titleService: Title,
+        private startUpService: StartUpService,
+        private builderService: BuilderService
+    ) {
+        this.subject = builderService.builderChanged.subscribe(value => {
+            this.navRef._builder_type = value || 'zorro';
+        });
+        this.startUpService.initData().then(() => {
+            this.startUpService.mockChanged.next('mock chaged');
+        });
+    }
 
-  ngOnInit() {
-    this.router.events
-      .subscribe((event) => {
-        if (event instanceof NavigationEnd) { // 当导航成功结束时执行
-          let title = event.url.substr(1);
-          this.titleService.setTitle(`${title} builder`);
-          this.builderService.builderChanged.next(title);
-          this.startUpService.mockChanged.next('route mock chaged');
-        }
-      });
-  }
+    ngOnInit() {
+        this.router.events.subscribe(event => {
+            if (event instanceof NavigationEnd) {
+                // 当导航成功结束时执行
+                let title = event.url.substr(1);
+                this.titleService.setTitle(`${title} builder`);
+                this.builderService.builderChanged.next(title);
+                this.startUpService.mockChanged.next('route mock chaged');
+            }
+        });
+    }
 
-  ngOnDestroy() {
-    this.subject.unsubscribe();
-  }
+    ngOnDestroy() {
+        this.subject.unsubscribe();
+    }
 }

src/app/document/document.component.html

@@ -4,19 +4,33 @@
             <li nz-menu-group>
                 <div title>入门</div>
                 <ul>
-                    <li nz-menu-item *ngFor="let i of data.basic" [routerLink]="'/document/' + i.id" routerLinkActive="ant-menu-item-selected">{{i.title}}</li>
+                    <li
+                        nz-menu-item
+                        *ngFor="let i of data.basic"
+                        [routerLink]="'/document/' + i.id"
+                        routerLinkActive="ant-menu-item-selected"
+                    >
+                        {{ i.title }}
+                    </li>
                 </ul>
             </li>
             <li nz-menu-group>
                 <div title>小部件</div>
                 <ul>
-                    <li nz-menu-item *ngFor="let i of data.widgets" [routerLink]="'/document/' + i.id" routerLinkActive="ant-menu-item-selected">{{i.id}}-{{i.title}}</li>
+                    <li
+                        nz-menu-item
+                        *ngFor="let i of data.widgets"
+                        [routerLink]="'/document/' + i.id"
+                        routerLinkActive="ant-menu-item-selected"
+                    >
+                        {{ i.id }}-{{ i.title }}
+                    </li>
                 </ul>
             </li>
         </ul>
     </nz-sider>
     <nz-content class="markdown" *ngIf="item" class="bg-white doc">
-        <h1>{{item.title}}</h1>
+        <h1>{{ item.title }}</h1>
         <markdown [data]="item.content"></markdown>
     </nz-content>
-</nz-layout>
+</nz-layout>