【问题标题】:Upgrading from angular 2 to 4.0.0-rc1从 Angular 2 升级到 4.0.0-rc1
【发布时间】:2017-02-28 12:18:28
【问题描述】:

我最近一直在使用 Angular 2,并且对它比较陌生。

鉴于即将发布的版本,我决定升级到最新版本,这是 Angular 4 的第一个候选版本。我尝试使用建议的命令:

npm install @angular/{common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router,animations}@next --save

此命令失败,我从其他帖子中了解到此语法在我不熟悉的 bash 中可用。

我将路径设置为我的项目文件夹,然后我尝试使用以下方法单独安装每个包:

npm install @angular/common@next --save 

对于每个包。 这似乎部分有效,但给出了一些依赖警告。

现在的结果是我不能再使用 ng serve 并且我认为我的设置至少可以说有点损坏。 有人可以建议一种使用节点卸载 angular(全局和本地)的方法,这样我就可以从头开始安装 angular 4 rc1 和最新的 angular cli。

【问题讨论】:

  • 所以您使用的是 Angular CLI?而不是以这种方式运行,我可能会尝试修改 package.json 文件。如果你在那里看,你会看到有角度的包(我刚刚用 ng new myproj 创建了一个项目)和版本说 2.2.1(无论如何在我的机器上)。您可以编辑该信息,删除您的 node_modules 目录,然后运行 ​​npm install。这将重新安装您所有的软件包和依赖项。请注意,新软件包通常需要更新的依赖项,但至少这样,当您运行 npm install 时,您会看到这些错误/警告,并且可以发现修复(或看到它还不能工作)。
  • 感谢您及时回复蒂姆。根据我对 package.json 的了解,您的建议很有道理,我会尝试一下。
  • 真的,不应该允许没有解释的投反对票。我无法想象为什么有人会否决这个问题。为了记录,我不仅认为这是一个好问题,而且我今天学到了一些东西。赞成。

标签: angular angular4


【解决方案1】:

我花了一些时间让它工作(据我所知)。

这是你必须做的(相反,这是我做了几次测试并且它有效)。按顺序执行这些步骤。

像往常一样使用 Angular cli 创建您的项目。

像往常一样,进入该项目目录。

删除节点模块。

单独安装 webpack(以确保您获得最新版本 ^2)。

npm install webpack

用下面的文件替换你的 package.json 文件,然后运行 ​​npm install。

运行服务

项目启动。

请注意,在运行 ng serve 时,您会看到 20 多个这样的错误。他们似乎没有阻止项目运行,我在浏览器控制台中没有看到任何错误。

[default] /Users/tcoz/web-dev-projects/angular4/node_modules/@angular/platform-browser/typings/src/dom/dom_renderer.d.ts:58:41 
    Initializers are not allowed in ambient contexts.

另一件事:我没有全局安装 TS。不确定这是否重要,但可能。确保您运行的是最新版本 (^2.2.1)。

package.json(请注意,很多东西都更新了,不仅仅是角度,在我刚安装 webpack 2 之前,一些依赖消息令人困惑):

{
  "name": "angular4",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "start": "ng serve",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/compiler": "4.0.0-rc.1",
    "@angular/core": "4.0.0-rc.1",
    "@angular/common": "4.0.0-rc.1",
    "@angular/forms": "4.0.0-rc.1",
    "@angular/http": "4.0.0-rc.1",
    "@angular/platform-browser": "4.0.0-rc.1",
    "@angular/platform-browser-dynamic": "4.0.0-rc.1",
    "@angular/router": "4.0.0-rc.1",
    "core-js": "^2.4.1",
    "rxjs": "^5.0.1",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.7.2"
  },
  "devDependencies": {
    "@angular/compiler-cli": "4.0.0-rc.1",
    "@types/jasmine": "2.5.38",
    "@types/node": "^6.0.42",
    "angular-cli": "1.0.0-beta.21",
    "codelyzer": "3.0.0-beta.0",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "4.0.9",
    "ts-node": "1.2.1",
    "tslint": "^4.0.0",
    "typescript": "^2.2.1",
    "webdriver-manager": "10.2.5"
  }
}

【讨论】:

  • 你说的单独安装webpack是不是应该安装到项目文件夹中?
  • 是的。删除 node_modules,使用我上面显示的命令安装 webpack(将安装 webpack 2),完成剩下的工作。我不使用任何全局标志等。
  • 感谢您的澄清。我按照您的建议进行了操作,但由于我还安装了新版本的 Angular CLI,因此需要在全局和本地安装它。它现在可以工作了。
  • 太好了,很高兴听到。我认为你可以让它在本地工作,但在这一点上任何工作。我相信 CLI 团队很快就会对此进行精简。
  • 顺便说一句,当你声明你不使用全局标志时,你的意思是对任何包都是这样吗? IE。您是否只安装到您的项目中?我必须承认对 Angular 中多次安装的需求感到困惑,但是,嘿,在我有更好的理解之前,我很高兴能取得进步!
【解决方案2】:

在 package.json 中,我将 angular 组件的版本号 (2.4.9) 替换为当前的新版本 (4.0.0-rc.3),并将 @angular/router 指定为 4.0.0- rc.3。除了来自某些剑道组件的警告外,构建一切顺利。尽管有警告,但 kendo 组件仍按预期运行。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2017-09-16
    • 2015-06-01
    • 2017-01-29
    • 2016-09-14
    • 2017-08-04
    • 1970-01-01
    • 2017-10-20
    相关资源
    最近更新 更多