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 代码地址:
https://github.com/wpcfan/awesome-tutorials/tree/master