Angular2升级到Angular4

Angular4终于在二日前发布了正规化版本,那么怎么跳级吗?其实Angular2和Angular4之间属于平滑过渡,并不像1和第22中学间颠覆性的重写代码。

Angular 4
在今天(2017-03-24)正式发布了,小编的文山会海教程也得更新一下。步骤略繁琐,不用
cli 的花色反倒更简约一些,不过 cli
日常给大家的方便人民群众依然广大的,晋级最多四个月三遍而已。

Angular4现已发表 
http://www.linuxidc.com/Linux/2017-03/142268.htm

课程链接:第3节:初识Angular-CLI第一节:登陆组件的塑造第四节:创设一个待办事项应用第4节:进化!模块化你的行使第五节:多客商版本的待办事项应用第六节:使用第三方样式库及模块优化用第七节:给组件带来活力ENCOREx–隐蔽在Angular
2.x中的利剑Redux你的Angular
2应用第八节:查缺补漏大合集第九节:查缺补漏大合集

  1. 动用npm-check方案进级 使用如下命令检查,并按下空格来摘取要晋升的包

    npm-check -u
    
  2. 法定推荐

    1. 升级cli

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

      rm -rf node_modules dist # use rmdir /S/Q node_modules dist in Windows Command Prompt; use rm -r -fo node_modules,dist in Windows PowerShell
      npm install –save-dev @angular/cli@latest

    2. 升级包

      // linux/mac
      npm install @angular/{common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router,animations}@latest typescript@latest –save
      // Windows
      npm install @angular/common@latest @angular/compiler@latest @angular/compiler-cli@latest @angular/core@latest @angular/forms@latest @angular/http@latest @angular/platform-browser@latest @angular/platform-browser-dynamic@latest @angular/platform-server@latest @angular/router@latest @angular/animations@latest typescript@latest –save

    3. 转移一些任何包

      npm install zone.js@0.8.4 –save

    4. 实施安装命令

      npm install

趁着 Angular 进级到版本 4, angular-cli 也跻身了 1.0
正式版。所以我们必要先更新 angular-cli 的本子。 首先要求删除旧的
angular-cli,若是你的 angular-cli 是在 beta-28
以前的版本,须要在工程目录下推行下边包车型大巴指令:

局地AngularJS相关小说链接Angular2升级到Angular4。:

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

AngularJS权威教程 清晰PDF版 
http://www.linuxidc.com/Linux/2015-01/111429.htm

angular-clibeta-28 之后改了包名,并入 @angular
的子项目,包名改成了 @angular/cli,所以一旦是 beta-28
之后的版本,请实行下边包车型大巴命令删除:

盼望您欣赏,并共享本身的职业~带你走近AngularJS体系

npm uninstall -g @angular/clinpm uninstall --save-dev @angular/cli
  1. 带你走近AngularJS – 基本作用介绍
    http://www.linuxidc.com/Linux/2014-05/102140.htm
  2. 带你走近AngularJS – 体验指令实例
    http://www.linuxidc.com/Linux/2014-05/102141.htm
  3. 带你走近AngularJS – 创立自定义指令
    http://www.linuxidc.com/Linux/2014-05/102142.htm

接下来大家必要设置新的 @angular/cli,但进展事先需求清理一下缓存:

怎么样在 AngularJS 中对调整器进行单元测量检验
http://www.linuxidc.com/Linux/2013-12/94166.htm

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

在 AngularJS 应用中经过 JSON 文件来设置处境
http://www.linuxidc.com/Linux/2014-07/104083.htm

工程根目录下的 angular-cli.json 以往的命名前边多了一个点,产生了
.angular-cli.json,即便旧的命名仍被接受,但为了保险起见,我们依旧改一下。

AngularJS入门之动画 
http://www.linuxidc.com/Linux/2017-01/139198.htm

这个 .angular-cli.json 比原先的本子改造了多少个地方,第二个是
Schema,大家必要在 "project": { 之上加多一条 Schema 的布局:

AngularJS 之 Factory vs Service vs Provider
http://www.linuxidc.com/Linux/2014-05/101475.htm

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

AngularJS —— 使用 ngResource、RESTful APIs 和 Spring MVC 框架提交数据
http://www.linuxidc.com/Linux/2014-07/104402.htm

增加完之后,在 VSCode 中会开采 project 配置中的 version
下边现身了绿线警告,也正是说 schema 中并未有这一项,所以 version
能够去除了。

AngularJS
的详细介绍
:请点这里
AngularJS
的下载地址
:请点这里

maintest 之间插入一行配置 polyfills:

正文永恒更新链接地址:http://www.linuxidc.com/Linux/2017-03/142315.htm

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

图片 1

并且删除 src/main.tssrc/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 配置,在 e2etest 之间踏向:

 "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 }}

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" ]}

相关文章