日本成人一区,日日爱99色资源,91亚洲人妻精品

Angular 4 在昨天（2017-03-24）正式發(fā)布了，我的系列教程也得更新一下。步驟略繁瑣，不用 cli 的項目反倒更簡單一些，但是 cli 平時給我們的便利還是很多的，升級最多半年一次而已。

教程鏈接：
第一節(jié)：初識Angular-CLI
第二節(jié)：登錄組件的構建
 第三節(jié)：建立一個待辦事項應用
 第四節(jié)：進化！模塊化你的應用
 第五節(jié)：多用戶版本的待辦事項應用
 第六節(jié)：使用第三方樣式庫及模塊優(yōu)化用
 第七節(jié)：給組件帶來活力
 Rx--隱藏在Angular 2.x中的利劍
 Redux你的Angular 2應用
 第八節(jié)：查缺補漏大合集(上)
第九節(jié)：查缺補漏大合集(下)

更新 angular-cli

隨著 Angular 升級到版本 4， angular-cli 也進入了 1.0 正式版。所以我們需要先更新 angular-cli 的版本。首先需要刪除舊的 angular-cli，如果你的 angular-cli 是在 beta-28 之前的版本，需要在工程目錄下執(zhí)行下面的命令：

npm uninstall -g angular-cli
npm uninstall --save-dev angular-cli

angular-cli 在 beta-28 之后改了包名，并入 @angular 的子項目，包名改成了 @angular/cli，所以如果是 beta-28 之后的版本，請執(zhí)行下面的命令刪除:

npm uninstall -g @angular/cli
npm uninstall --save-dev @angular/cli

然后我們需要安裝新的 @angular/cli，但進行之前需要清理一下緩存：

npm cache clean
npm install -g @angular/cli@latest

更新 angular-cli.json

工程根目錄下的 angular-cli.json 現在的命名前面多了一個點，變成了 .angular-cli.json，雖然舊的命名仍被接受，但為了保險起見，我們還是改一下。

這個 .angular-cli.json 比原來的版本改動了幾個地方，第一個是 Schema，我們需要在 "project": { 之上添加一條 Schema 的配置：

  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    ...
  },

添加完之后，在 VSCode 中會發(fā)現 project 配置中的 version 下面出現了綠線警告，也就是說 schema 中沒有這一項，所以 version 可以刪除了。

在 main 和 test 之間插入一行配置 polyfills:

"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",

并且刪除 src/main.ts 和 src/test.ts 中的 import './polyfills.ts'; 那一行。

然后把下面 "tsconfig": "tsconfig.app.json", 這句改成下面的2行：

"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",

接下來是 environments 的那段，原來的樣子是

"environments": {
  "source": "environments/environment.ts",
  "dev": "environments/environment.ts",
  "prod": "environments/environment.prod.ts"
}

現在需要改成：

"environmentSource": "environments/environment.ts",
"environments": {
  "dev": "environments/environment.ts",
  "prod": "environments/environment.prod.ts"
}

現在新增了 lint 配置，在 e2e 和 test 之間加入：

  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json"
    },
    {
      "project": "src/tsconfig.spec.json"
    },
    {
      "project": "e2e/tsconfig.e2e.json"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },

最后一段 defaults 那一坨改成：

"defaults": {
  "styleExt": "css", //或者 scss 根據項目情況而定 
  "component": {
    "inlineTemplate": false,
    "spec": true
  }
}

更新 tsconfig

src/tsconfig.json 需要改名成 tsconfig.app.json 并更新到下面的樣子：

{
  "compilerOptions": {
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "lib": [
      "es2016",
      "dom"
    ],
    "outDir": "../out-tsc/app",
    "module": "es2015",
    "baseUrl": "",
    "types": []
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

新增加定義單元測試配置的 src/tsconfig.spec.json ：

{
  "compilerOptions": {
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
      "es2016",
      "dom"
    ],
    "outDir": "../out-tsc/spec",
    "module": "commonjs",
    "target": "es5",
    "baseUrl": "",
    "types": [
      "jasmine",
      "node"
    ]
  },
  "files": [
    "test.ts"
  ],
  "include": [
    "**/*.spec.ts",
    "**/*.d.ts"
  ]
}

將 e2e 目錄下原有的 tsconfig.json 改名成 e2e/tsconfig.e2e.json 然后更新成：

{
  "compilerOptions": {
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
      "es2016"
    ],
    "outDir": "../out-tsc/e2e",
    "module": "commonjs",
    "target": "es5",
    "types":[
      "jasmine",
      "node"
    ]
  }
}

在項目根目錄下新建一個 tsconfig.json：

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "src",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2016",
      "dom"
    ]
  }
}

更新 package.json

更新 package.json 中的軟件包版本號

在 dependencies 段落中的:

所有以 @angular 開頭的包的版本都改成 ^4.0.0
rxjs 版本改成 ^5.1.0
刪掉 ts-helpers
zone.js 版本號更新至 ^0.8.4

在 devDependencies 段落中的：

@angular/compiler-cli 的版本改成 ^4.0.0
@types/node 版本改成 ~6.0.60
codelyzer 版本改成 ~2.0.0
jasmine-core 版本號更新至 ~2.5.2
jasmine-spec-reporter 版本號更新至 ~3.2.0
karma 版本號更新至 ~1.4.1
karma-chrome-launcher 版本號更新至 ~2.0.0
karma-cli 版本號更新至 ~1.0.1
karma-jasmine 版本號更新至 ~1.1.0
添加一行 "karma-jasmine-html-reporter": "^0.2.2",
添加一行 "karma-coverage-istanbul-reporter": "^0.2.0",
刪除 karma-remap-istanbul
protractor 版本號更新至 ~5.1.0
ts-node 版本號更新至 ~2.0.0
tslint 版本號更新至 ~4.5.0
typescript 版本號更新至 ~2.1.0

最后更新 scripts 為：

"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },

更新 kama.conf.js

把 src/kama.conf.js 改成如下：

// Karma configuration file, see link for more information
// https://karma-runner.github.io/0.13/config/configuration-file.html

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular/cli'],
    plugins: [
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('@angular/cli/plugins/karma')
    ],
    client:{
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    files: [
      { pattern: './src/test.ts', watched: false }
    ],
    preprocessors: {
      './src/test.ts': ['@angular/cli']
    },
    mime: {
      'text/x-typescript': ['ts','tsx']
    },
    coverageIstanbulReporter: {
      reports: [ 'html', 'lcovonly' ],
      fixWebpackSourcePaths: true
    },
    reporters: config.angularCli && config.angularCli.codeCoverage
          ? ['progress', 'coverage-istanbul']
          : ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false
  });
};

更新 protractor.conf.js

把 src/protractor.conf.js 改成如下

// Protractor configuration file, see link for more information
// https://github.com/angular/protractor/blob/master/docs/referenceConf.js

/*global jasmine */
const { SpecReporter } = require('jasmine-spec-reporter');

exports.config = {
  allScriptsTimeout: 11000,
  specs: [
    './e2e/**/*.e2e-spec.ts'
  ],
  capabilities: {
    'browserName': 'chrome'
  },
  directConnect: true,
  baseUrl: 'http://localhost:4200/',
  framework: 'jasmine',
  jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 30000,
    print: function() {}
  },
  beforeLaunch: function() {
    require('ts-node').register({
      project: 'e2e'
    });
  },
  onPrepare: function() {
    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
  }
};

更新 tslint.json

搜索 no-inferrable-types 把這行改成：

"no-inferrable-types": [true, "ignore-params"],

然后新增下面的規(guī)則：

"callable-types": true,
"import-blacklist": [true, "rxjs"],
"import-spacing": true,
"interface-over-type-literal": true,
"no-empty-interface": true,
"no-string-throw": true,
"prefer-const": true,
"typeof-compare": true,
"unified-signatures": true,

重新安裝依賴軟件包

接下來需要重新安裝依賴項：

rm -rf node_modules dist # Windows 用戶使用 rmdir 來刪除
npm install --save-dev @angular/cli@latest
npm install

到此為止，升級結束，運行 ng serve 和 ng build 一切正常。我目前只升級了第一章代碼，計劃會在 ng4tut 陸續(xù)把教程代碼都升級到 4.x。

4.0 代碼地址：
https://github.com/wpcfan/awesome-tutorials/tree/ng4tut

2.x 代碼地址：

https://github.com/wpcfan/awesome-tutorials/tree/master

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

Angular 2 升級 Angular 4 歷程

Angular 2 升級 Angular 4 歷程

更新 angular-cli

更新 angular-cli.json

更新 tsconfig

更新 package.json

更新 kama.conf.js

更新 protractor.conf.js

更新 tslint.json

重新安裝依賴軟件包

相關閱讀更多精彩內容

友情鏈接更多精彩內容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

Angular 2 升級 Angular 4 歷程

更新 angular-cli

更新 angular-cli.json

更新 tsconfig

更新 package.json

更新 kama.conf.js

更新 protractor.conf.js

更新 tslint.json

重新安裝依賴軟件包

相關閱讀更多精彩內容

友情鏈接更多精彩內容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av