Làm cách nào để nâng cấp chính xác góc 2 (npm) lên phiên bản mới nhất?

Gần đây tôi đã bắt đầu hướng dẫn Angular 2 tại https://angular.io/docs/ts/latest/tutorial/ .

và rời đi với Angular 2 beta 8. Bây giờ tôi đã tiếp tục hướng dẫn và phiên bản beta mới nhất là beta 14.

Nếu tôi chỉ đơn giản là cập nhật npm, một vài mô-đun (được tải sẵn với hướng dẫn) được cập nhật nhưng không phải là Angular2 (tôi có thể thấy điều đó với npm ls ).

Nếu tôi cập nhật npm angular 2 hoặc npm update angular2@2.0.0beta.14 thì cũng chẳng có gì cả.

Lệnh npm update -D && npm update -Ssẽ cập nhật tất cả các gói bên trong package.jsonlên phiên bản mới nhất của chúng, theo phạm vi phiên bản được xác định của chúng . Bạn có thể đọc thêm về nó ở đây .

Nếu bạn muốn cập nhật Angular từ một phiên bản trước 2.0.0-rc.1đó, thì bạn sẽ cần chỉnh sửa thủ công package.json, vì Angular được chia thành nhiều mô-đun npm. Nếu không có điều này, như gói angular2 chỉ ra 2.0.0-beta.21, bạn sẽ không bao giờ được sử dụng phiên bản Angular mới nhất.
Có thể tìm thấy danh sách với một số mô-đun phổ biến nhất mà bạn cần bắt đầu trong kho lưu trữ khởi động nhanh .

Ghi chú:

• Một cách hay để cập nhật với phiên bản mới nhất của các gói của bạn là sử dụng npm outdatedcho thấy tất cả các gói đã lỗi thời cùng với phiên bản mới nhất và mong muốn của chúng.

• Lý do tại sao chúng ta cần xâu chuỗi hai lệnh npm update -Dvà npm update -Sđể khắc phục lỗi này cho đến khi nó được sửa.

Một gói đẹp khác mà tôi đã sử dụng để di chuyển từ phiên bản beta của Angular2 sang Angular2 2.0.0 finallànpm-check-updates

Nó hiển thị phiên bản mới nhất có sẵn của tất cả các gói được chỉ định trong gói.json của bạn. Ngược lại, npm outdatednó cũng có khả năng chỉnh sửa gói.json của bạn, cho phép bạn thực hiện npm upgradesau.

Tải về

sudo npm install -g npm-check-updates

Sử dụng

ncuĐể trưng bày

ncu -u để viết lại gói.json của bạn

Nâng cấp lên Angular 5 mới nhất

Gói Angular Dep: npm install @angular/{animations,common,compiler,core,forms,http,platform-browser,platform-browser-dynamic,router}@latest --save

Các gói khác được cài đặt bởi cli góc npm install --save core-js@latest rxjs@latest zone.js@latest

Gói Angular Dev: npm install --save-dev @angular/{compiler-cli,cli,language-service}@latest

Các loại gói Dev: npm install --save-dev @types/{jasmine,jasminewd2,node}@latest

Các gói khác được cài đặt là dev dev bởi cli góc: npm install --save-dev codelyzer@latest jasmine-core@latest jasmine-spec-reporter@latest karma@latest karma-chrome-launcher@latest karma-cli@latest karma-coverage-istanbul-reporter@latest karma-jasmine@latest karma-jasmine-html-reporter@latest protractor@latest ts-node@latest tslint@latest

Cài đặt phiên bản được hỗ trợ mới nhất được sử dụng bởi Angular cli (không làm @latest): npm install --save-dev typescript@2.4.2

Đổi tên tệp angular-cli.json thành .angular-cli.json và cập nhật nội dung:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "project3-example"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "src/tsconfig.spec.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "e2e/tsconfig.e2e.json",
      "exclude": "**/node_modules/**"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {}
  }
}

CẬP NHẬT:
Bắt đầu từ CLI v6, bạn chỉ có thể chạy ng updateđể cập nhật phụ thuộc tự động lên phiên bản mới.

Với ng updateđôi khi bạn có thể muốn thêm --forcecờ. Nếu bạn làm như vậy, hãy đảm bảo rằng phiên bản bản thảo bạn đã cài đặt theo cách này được hỗ trợ bởi phiên bản góc hiện tại của bạn, nếu không bạn có thể cần phải hạ cấp phiên bản bản thảo.

Đồng thời kiểm tra hướng dẫn này Cập nhật các dự án Angular của bạn

Chỉ dành cho người dùng bash

Nếu bạn đang bật Mac/Linuxhoặc đang chạy bash on Windows(nó không hoạt động theo mặc định Windows CMD), bạn có thể chạy oneliner đó:

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

yarn add @angular/{animations,common,compiler,core,forms,http,platform-browser,platform-browser-dynamic,router,compiler-cli}@4.4.5

Chỉ cần chỉ định phiên bản bạn không ví dụ: @ 4.4.5 hoặc đặt @latest để nhận bản mới nhất

Kiểm tra package.jsonchỉ để đảm bảo bạn đang cập nhật tất cả@angular/* các gói mà ứng dụng của bạn đang dựa vào

• Để xem @angularphiên bản chính xác trong dự án của bạn chạy:
  npm ls @angular/compiler hoặcyarn list @angular/compiler
• Để kiểm tra @angularphiên bản ổn định mới nhất có sẵn trên npm run:
  npm show @angular/compiler version

Trang npm chính thức đề xuất một phương pháp có cấu trúc để cập nhật phiên bản góc cho cả kịch bản toàn cầu và cục bộ.

1. Trước hết, bạn cần gỡ cài đặt các góc hiện tại khỏi hệ thống của bạn.

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

2.Làm sạch bộ nhớ cache

npm cache clean

BIÊN TẬP

Như được chỉ ra bởi @candidj

npm cache cleanđược đổi tên npm cache verifytừ npm 5 trở đi

3. Lắp đặt góc trên toàn cầu

npm install -g @angular/cli@latest

4. Thiết lập dự án địa phương nếu bạn có

rm -rf node_modules
npm install --save-dev @angular/cli@latest
npm install

Vui lòng kiểm tra tương tự xuống liên kết dưới đây:

https://www.npmjs.com/package/@angular/cli#updating-angular-cli

Điều này sẽ giải quyết vấn đề.

Phương pháp thay thế bằng cách sử dụng nâng cấp npm :

1. npm i -g npm-upgrade

Chuyển đến thư mục dự án của bạn

2. npm-upgrade check

Nó sẽ hỏi bạn nếu bạn muốn nâng cấp gói, chọn Có

Thật đơn giản

Nếu bạn muốn cài đặt / nâng cấp tất cả các gói lên phiên bản mới nhất và bạn đang chạy windows, bạn có thể sử dụng gói này trong powershell.exe:

foreach($package in @("animations","common","compiler","core","forms","http","platform-browser","platform-browser-dynamic","router")) {
    npm install @angular/$package@latest -E
}

Nếu bạn cũng sử dụng cli, bạn có thể làm điều này:

foreach($package in @('animations','common','compiler','core','forms','http','platform-browser','platform-browser-dynamic','router', 'cli','compiler-cli')){
    iex "npm install @angular/$package@latest -E $(If($('cli','compiler-cli').Contains($package)){'-D'})";
}

Điều này sẽ lưu chính xác các gói (-E) và các gói cli trong devDependencies(-D)

Chỉ cần bắt đầu ở đây:

https://update.angular.io

Chọn phiên bản bạn đang sử dụng và nó sẽ cung cấp cho bạn hướng dẫn từng bước.

Tôi khuyên bạn nên chọn 'Nâng cao' để xem tất cả các bước. Sự phức tạp là một khái niệm tương đối - và tôi không biết ý tưởng ngu ngốc này là tính năng gì, nhưng nếu bạn chọn 'Cơ bản', nó sẽ không hiển thị cho bạn tất cả các bước cần thiết và bạn có thể bỏ lỡ điều gì đó quan trọng mà ứng dụng 'Cơ bản' của bạn đang sử dụng .

Kể từ phiên bản 6, có một lệnh CLI Angular mới ng updatethông qua các phụ thuộc của bạn và thực hiện kiểm tra để đảm bảo bạn đang cập nhật đúng thứ :-)

Các bước sẽ phác thảo cách sử dụng nó :-)

gỡ cài đặt npm --save-dev angular-cli

cài đặt npm --save-dev @ angular / cli @ mới nhất

ng cập nhật @ angular / cli

ng cập nhật @ góc / lõi - lực lượng

ng update @ angular / liệu hoặc npm i @ angular / cdk @ 6 @ angular / liệu @ 6 --save

npm cài đặt bản thảo @ '> = 2.7.0 <2.8.0'

Cách tốt nhất để làm là sử dụng phần mở rộng (pflannery.vscode-versionlens) trong vscode.

kiểm tra này cho tất cả sự hài lòng và kiểm tra cho phù hợp nhất.

tôi đã có rất nhiều vấn đề với việc cập nhật và giữ đơn vị ứng dụng của mình, tôi sẽ để cho verbose lense kiểm tra và sau đó tôi chạy

npm tôi

để cài đặt các phụ thuộc mới được đề xuất.

Nếu bạn trông giống tôi vì chỉ cập nhật dự án của bạn lên mới nhất thì đây là những gì hoạt động với tôi kể từ Angular 6:

Mở bàn điều khiển trên thư mục dự án của bạn: If you type: ng updatesau đó bạn sẽ nhận được thông báo bên dưới:

        We analyzed your package.json, there are some packages to update:

          Name                               Version                  Command to update
         --------------------------------------------------------------------------------
          @angular/cli                       7.0.7 -> 7.2.2           ng update @angular/cli
          @angular/core                      7.0.4 -> 7.2.1           ng update @angular/core

There might be additional packages that are outdated.
    Run "ng update --all" to try to update all at the same time.

Vì vậy, tôi thường đi thẳng và làm:

ng update --all

Cuối cùng, bạn có thể kiểm tra phiên bản mới của mình:

ng version

Angular CLI: 7.2.2
Node: 8.12.0
OS: win32 x64
Angular: 7.2.1
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.12.2
@angular-devkit/build-angular     0.12.2
@angular-devkit/build-optimizer   0.12.2
@angular-devkit/build-webpack     0.12.2
@angular-devkit/core              7.2.2
@angular-devkit/schematics        7.2.2
@angular/cli                      7.2.2
@ngtools/webpack                  7.2.2
@schematics/angular               7.2.2
@schematics/update                0.12.2
rxjs                              6.3.3
typescript                        3.2.4
webpack                           4.28.4