Angular 4 在昨天（2017-03-24）正式发布了，我的系列教程也得更新一下。步骤略繁琐，不用 cli 的项目反倒更简单一些，但是 cli 平时给我们的便利还是很多的，升级最多半年一次而已。
教程链接：
第一节：初识Angular-CLI
第二节：登录组件的构建
第三节：建立一个待办事项应用
第四节：进化！模块化你的应用
第五节：多用户版本的待办事项应用
第六节：使用第三方样式库及模块优化用
第七节：给组件带来活力
Rx--隐藏在Angular 2.x中的利剑
Redux你的Angular 2应用
第八节：查缺补漏大合集(上)
第九节：查缺补漏大合集(下)
更新 angular-cli
随着 Angular 升级到版本 4， angular-cli 也进入了 1.0 正式版。所以我们需要先更新 angular-cli 的版本。 首先需要删除旧的 angular-cli，如果你的 angular-cli 是在 beta-28 之前的版本，需要在工程目录下执行下面的命令：
npm uninstall -g angular-cli
npm uninstall --save-dev angular-cli
angular-cli 在 beta-28 之后改了包名，并入 @angular 的子项目，包名改成了 @angular/cli，所以如果是 beta-28 之后的版本，请执行下面的命令删除:
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 中会发现 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"],
然后新增下面的规则：
"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 陆续把教程代码都升级到 4.x。
4.0 代码地址：
https://github.com/wpcfan/awesome-tutorials/tree/ng4tut
2.x 代码地址：
