upgrade ng to 6.0, use ngcli, fixes zkweb-framework#3

Author: 303248153

README.md

@@ -11,7 +11,7 @@ This demo is host on [http://mvvmdemo.zkweb.org](http://mvvmdemo.zkweb.org)<br/>
 
 # Features
 
-- Use AngularJS 4.0 + Webpack 2.0
+- Use AngularJS 6.0 + NgCli
     - Support automatic generate script form dto and application service
     - Support return pre-compressed script bundle
     - Support CORS api request
@@ -36,7 +36,9 @@ This demo is host on [http://mvvmdemo.zkweb.org](http://mvvmdemo.zkweb.org)<br/>
 
 # How to start
 
-**Use taobao npm mirror if needed**
+**Use taobao npm mirror (optional)**
+
+If you're in china, use taobao registry will make the npm command much happier.
 
 ```
 npm config set registry http://registry.npm.taobao.org
@@ -47,26 +49,25 @@ npm config set sass_binary_site http://npm.taobao.org/mirrors/node-sass
 
 ```
 cd src/ZKWeb.MVVMPlugins/MVVM.Angular.Website/static
+npm install -g @angular/cli
 npm install
-npm run build
+ng build --prod --aot
 ```
 
-**Modify database configuration"
+**Modify database configuration (optional)**
 
-Open `ZKWeb.MVVMDemo.AspNetCore\App_Data\config.json` and modify database configuration.
+Open `ZKWeb.MVVMDemo.AspNetCore\App_Data\config.json` and modify database configuration.<br/>
+By default it uses sqlite.
 
 **Start website**
 
-Open `ZKWeb.MVVMDemo.sln` with VS2017 and run the project.
-
-**Use webpack-dev-server (optional)**
+Open `ZKWeb.MVVMDemo.sln` with visual studio (>= 2017) and run the project.<br/>
+If you're using linux, please install libgdiplus by following the instruction on [here](https://github.com/zkweb-framework/ZKWeb.System.Drawing).
 
-If you want more verbose error message and faster recompilation you can use webpack-dev-server, <br/>
-Run following command and open `http://127.0.0.1:3000` in your browser.
+**Use ng-serve (optional)**
 
-```
-npm run dev
-```
+If you want more verbose error message and faster recompilation you can use ng-serve, <br/>
+First, modify `apiUrlBase` in `src/ZKWeb.MVVMPlugins/MVVM.Angular.Website/static/index.html`, use the proper api server address, then run `ng serve` under `src/ZKWeb.MVVMPlugins/MVVM.Angular.Website/static`.
 
 # Documents
 
@@ -75,5 +76,5 @@ npm run dev
 # LICENSE
 
 LICENSE: MIT LICENSE<br/>
-Copyright © 2017 303248153@github<br/>
+Copyright © 2017-2018 303248153@github<br/>
 If you have any license issue please contact [email protected].<br/>

TODO.md

@@ -4,11 +4,16 @@ Angular的前端文件储存在`src\ZKWeb.MVVMPlugins\MVVM.Angular.Website\stati
 
 ![前端项目](img/frontend_struction.jpg)
 
-它们的作用如下
+TODO: 更新上图（结构还是使用webpack时的结构，现在已经换成了ngcli）
 
-- dist: webpack生成的最终前端文件，发布时只需要这个文件夹
+它们的作用如下:
+
+- dist: ngcli生成的最终前端文件，发布时只需要这个文件夹
 - node_modules: npm安装的库
 - src: 前端源代码
+  - environments: 保存ngcli使用的编译配置
+    - environment.prod.ts: 生产环境的编译配置 (编译时用--prod选项)
+    - environment.ts: 开发环境使用的编译配置
   - modules: 保存前端模块的文件夹
     - admin_base_module: 后台的基础模块，包含导航菜单等，其他后台模块需要引用此模块
     - admin_module: 后台主模块，包含后台的路由信息，其他后台模块不能引用此模块
@@ -29,12 +34,15 @@ Angular的前端文件储存在`src\ZKWeb.MVVMPlugins\MVVM.Angular.Website\stati
   - index.html: Html主程序文件
   - main.ts: Angular主程序文件
   - polyfills.ts: 用于引用为旧浏览器提供新功能支持的脚本
+  - tsconfig.app.json: TypeScript相关配置
+  - tsconfig.spec.json: TypeScript相关配置
+  - tslint.json: TypeScript规范设置
   - vendor.ts: 用于引用第三方脚本
 - .gitignore: git忽略文件，这里用于忽略dist和node_modules
+- angular.json: ngcli的配置文件
 - package.json: npm库文件，用于指定当前包名称和需要安装哪些包
 - tsconfig.json: TypeScript设置
-- tslint.json: TypeScript规范设置，使用npm run lint可以检查代码规范
-- webpack.config.js: Webpack设置，使用npm run build可以编译和打包前端
+- tslint.json: TypeScript规范设置，使用ng lint可以检查代码规范
 
 ### **路由的定义**
 

docs/cn/NgFrontendStruction.md

@@ -1,14 +1,14 @@
 基于ZKWeb网页框架的MVVM示例
 
-这份示例使用了ZKWeb提供的插件系统和AngularJS 4.0编写的模块化前端，支持前后端分离，并且提供了一套基本的后台管理系统
+这份示例使用了ZKWeb提供的插件系统和AngularJS 6.0编写的模块化前端，支持前后端分离，并且提供了一套基本的后台管理系统
 
 这份示例的开源协议是MIT，你可以随意的修改并用于个人或商业用途
 
 ![preview](../preview.jpg)
 
 ### 功能一览
 
-- 使用AngularJS 4.0 + Webpack 2.0
+- 使用AngularJS 6.0 + NgCli
     - 支持自动生成Api服务和DTO的TypeScript脚本
     - 支持返回预压缩好的脚本包
     - 支持跨站Api请求
@@ -33,7 +33,7 @@
 
 ### 如何开始
 
-**如果你访问官方npm源较慢，可以设置使用淘宝的npm镜像**
+**设置使用淘宝的npm镜像 (可选)**
 
 ```
 npm config set registry http://registry.npm.taobao.org
@@ -44,26 +44,25 @@ npm config set sass_binary_site http://npm.taobao.org/mirrors/node-sass
 
 ```
 cd src/ZKWeb.MVVMPlugins/MVVM.Angular.Website/static
+npm install -g @angular/cli
 npm install
-npm run build
+ng build --prod --aot
 ```
 
-**修改数据库配置**
+**修改数据库配置 (可选)**
 
-打开`ZKWeb.MVVMDemo.AspNetCore\App_Data\config.json`并修改到你使用的数据库连接
+打开`ZKWeb.MVVMDemo.AspNetCore\App_Data\config.json`并修改到你使用的数据库连接.
+如果不修改默认会使用sqlite.
 
 **启动网站**
 
-使用VS2017打开`ZKWeb.MVVMDemo.sln`并启动项目即可
+使用VS2017打开`ZKWeb.MVVMDemo.sln`并启动项目即可.<br/>
+如果你使用的是linux，请参考[这里](https://github.com/zkweb-framework/ZKWeb.System.Drawing)的步骤安装libgdiplus.
 
-**使用webpack-dev-server (可选)**
+**使用ng-serve (可选)**
 
-如果你想要更详细的错误信息和更快的编译速度可以使用webpack-dev-server,<br/>
-运行以下命令并在浏览器打开`http://127.0.0.1:3000`.
-
-```
-npm run dev
-```
+如果你想要更详细的错误信息和更快的编译速度可以使用ng-serve,<br/>
+首先你需要修改`src/ZKWeb.MVVMPlugins/MVVM.Angular.Website/static/index.html`中的`apiUrlBase`, 填写服务端对应的地址, 然后在`src/ZKWeb.MVVMPlugins/MVVM.Angular.Website/static`目录下运行`ng serve`命令.
 
 ### 更多内容
 

docs/cn/README.md

@@ -0,0 +1,3 @@
+dist
+dist-dev
+node_modules

src/ZKWeb.MVVMPlugins/MVVM.Angular.Website/static.old/.gitignore

@@ -0,0 +1,86 @@
+{
+    "name": "zkweb-mvvm-demo",
+    "version": "1.0.0",
+    "scripts": {
+        "build": "./node_modules/.bin/webpack --config webpack.config.js --colors --progress",
+        "watch": "./node_modules/.bin/webpack --config webpack.config.js --colors --progress --watch",
+        "lint": "./node_modules/.bin/tslint ./src/**/*.ts -t verbose",
+        "dev": "./node_modules/.bin/webpack-dev-server --config webpack.config.dev.js --colors --progress"
+    },
+    "keywords": [],
+    "author": "",
+    "license": "MIT",
+    "dependencies": {
+        "@angular/cli": "~1.0.0",
+        "@angular/common": "~4.0.0",
+        "@angular/compiler": "~4.0.0",
+        "@angular/core": "~4.0.0",
+        "@angular/forms": "~4.0.0",
+        "@angular/http": "~4.0.0",
+        "@angular/platform-browser": "~4.0.0",
+        "@angular/platform-browser-dynamic": "~4.0.0",
+        "@angular/router": "~4.0.0",
+        "angular-in-memory-web-api": "~0.3.0",
+        "core-js": "^2.4.1",
+        "reflect-metadata": "^0.1.10",
+        "rxjs": "5.3.0",
+        "systemjs": "0.19.40",
+        "zone.js": "^0.8.4"
+    },
+    "devDependencies": {
+        "@angular/cli": "~1.0.0",
+        "@angular/compiler-cli": "~4.0.0",
+        "@angular/animations": " ~4.0.0",
+        "@ngtools/webpack": "~1.6.0",
+        "@types/jasmine": "2.5.36",
+        "@types/node": "^6.0.46",
+        "awesome-typescript-loader": "^3.1.3",
+        "angular2-template-loader": "~0.6.2",
+        "angular-router-loader": "~0.6.0",
+        "babel-core": "^6.24.1",
+        "babel-loader": "^6.4.1",
+        "canonical-path": "0.0.2",
+        "compression-webpack-plugin": "^0.3.2",
+        "concurrently": "^3.2.0",
+        "copy-webpack-plugin": "^4.0.1",
+        "css-loader": "^0.27.3",
+        "glob-stream": "^6.1.0",
+        "gulp": "^3.9.1",
+        "gulp-sass": "^3.1.0",
+        "gulp-sourcemaps": "^2.5.1",
+        "gulp-typescript": "^3.1.6",
+        "html-webpack-plugin": "^2.28.0",
+        "is-valid-glob": "^0.3.0",
+        "jasmine-core": "~2.4.1",
+        "karma": "^1.3.0",
+        "karma-chrome-launcher": "^2.0.0",
+        "karma-cli": "^1.0.1",
+        "karma-jasmine": "^1.0.2",
+        "karma-jasmine-html-reporter": "^0.2.2",
+        "lazystream": "^1.0.0",
+        "lite-server": "^2.2.2",
+        "lodash": "^4.16.4",
+        "lodash.isequal": "^4.5.0",
+        "merge-stream": "^1.0.1",
+        "node-sass": "^4.5.2",
+        "primeng": "^4.0.0-rc.3",
+        "protractor": "~4.0.14",
+        "raw-loader": "^0.5.1",
+        "rimraf": "^2.5.4",
+        "sass-loader": "^6.0.3",
+        "strip-bom-stream": "^3.0.0",
+        "style-loader": "^0.13.1",
+        "stylus": "^0.54.5",
+        "stylus-loader": "^2.4.0",
+        "to-string-loader": "^1.1.5",
+        "tslint": "^3.15.1",
+        "typescript": "~2.1.5",
+        "vali-date": "^1.0.0",
+        "vinyl-fs": "^2.4.4",
+        "webpack": "~2.4.1",
+        "webpack-dev-server": "~2.4.2",
+        "webpack-merge": "~4.1.0",
+        "yargs": "^6.4.0"
+    },
+    "repository": {}
+}

src/ZKWeb.MVVMPlugins/MVVM.Angular.Website/static.old/package.json

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>ZKWeb MVVM Demo</title>
+    <base href="/">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link href="favicon.ico" rel="icon" type="image/x-icon" />
+    <link rel="stylesheet" href="preloader.css" />
+</head>
+<body class="skin-default">
+    <my-app>
+        <div class="preloader-container">
+            <div class="preloader"></div>
+        </div>
+    </my-app>
+    <script>
+        window.appConfig = {
+            // apiUrlBase: "http://localhost:53128",
+            apiUrlBase: null
+        };
+    </script>
+</body>
+</html>

src/ZKWeb.MVVMPlugins/MVVM.Angular.Website/static/src/index-dev.html renamed to src/ZKWeb.MVVMPlugins/MVVM.Angular.Website/static.old/src/index-dev.html

@@ -0,0 +1,8 @@
+// import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './modules/app_module/app.module';
+
+// 启用生产模式可以取消注释以下行
+// enableProdMode();
+
+platformBrowserDynamic().bootstrapModule(AppModule);

src/ZKWeb.MVVMPlugins/MVVM.Angular.Website/static.old/src/index.html

@@ -0,0 +1,46 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { RouterModule } from '@angular/router';
+import { InputTextModule } from 'primeng/components/inputtext/inputtext';
+import { PanelModule } from 'primeng/components/panel/panel';
+import { ButtonModule } from 'primeng/components/button/button';
+import { MessagesModule } from 'primeng/components/messages/messages';
+import { BlockUIModule } from 'primeng/components/blockui/blockui';
+import { GrowlModule } from 'primeng/components/growl/growl';
+import { SlideMenuModule } from 'primeng/components/slidemenu/slidemenu';
+
+import { BaseModule } from '../base_module/base.module';
+import { GeneratedModule } from '../generated_module/generated.module';
+
+import { AdminContainerComponent } from './components/admin-container.component';
+import { AdminToastService } from './services/admin-toast-service';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        InputTextModule,
+        PanelModule,
+        ButtonModule,
+        MessagesModule,
+        BlockUIModule,
+        GrowlModule,
+        SlideMenuModule,
+        BaseModule,
+        GeneratedModule,
+        RouterModule
+    ],
+    declarations: [
+        AdminContainerComponent,
+    ],
+    providers: [
+        AdminToastService
+    ],
+    exports: [
+        RouterModule,
+        AdminContainerComponent
+    ]
+})
+export class AdminBaseModule { }