it-swarm-vi.tech

Cách cập nhật/nâng cấp từ Angular 4 lên Angular 5+

Tôi cần cập nhật dự án của mình từ Angular 4 lên Angular 5+,

Tôi cần thay đổi tất cả các phụ thuộc sau thành Angular 5+.

Tôi cũng đã cập nhật Angular CLI lên 1.5.0.

Tôi đã cố gắng tạo dự án mới nhưng dường như chỉ tạo dự án Angular 4.

ng NG5_ Dự án mới

"dependencies": {
  "@angular/animations": "^4.2.4",
  "@angular/common": "^4.2.4",
  "@angular/compiler": "^4.2.4",
  "@angular/core": "^4.2.4",
  "@angular/forms": "^4.2.4",
  "@angular/http": "^4.2.4",
  "@angular/platform-browser": "^4.2.4",
  "@angular/platform-browser-dynamic": "^4.2.4",
  "@angular/router": "^4.2.4",
  "core-js": "^2.4.1",
  "rxjs": "^5.4.2",
  "zone.js": "^0.8.14"
}

Tôi đang làm gì sai.

Cấu hình CLI:

 CLI Config

36
Sangwin Gawande

Sự cố được khắc phục với bản cập nhật phiên bản Node. 

Tôi đã phải cập nhật phiên bản Node,

Sudo apt-get install nodejs

npm uninstall -g @angular/cli

npm cache clean

npm install -g @angular/[email protected]

ng new ProjectName

nút --version ==> 8,9.0

ng - đảo ngược ==> 1.5.0

"dependencies": {
    "@angular/animations": "^5.0.0",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",
    "rxjs": "^5.5.2",
    "zone.js": "^0.8.14"
}
16
Sangwin Gawande

Giải pháp này dành cho visual studio 2017 sử dụng mẫu angular

Sử dụng lệnh Node.js Nhắc hoặc Mở PowerShell. Điều hướng đến thư mục dự án và sử dụng lệnh dir để kiểm tra xem tệp package.json có tồn tại không.

Đóng phiên bản Visual Studio và chạy lệnh npm install -g npm-check-updates sau đó xuất ra sau

output

Sau đó sử dụng lệnh ncu -u Gói sau sẽ cập nhật lên phiên bản mới nhất

pakage update

Nếu các gói vẫn đang trỏ đến Angular 4, thì hãy xóa package-lock.json và làm lại các bước đã cho ở trên.

Webpack được Visual Studio sử dụng làm gói mô-đun. Webpack sử dụng AotPlugin để biên dịch các ứng dụng Angular 4, giờ đây Webpack không còn sử dụng Aotplugin cho Angular 5. Hiện tại nó sử dụng AngularCompilerPlugin. Mở webpack.config.js và thay thế tất cả các lần xuất hiện của A với AngularCompilerPlugin.

Mở tệp ClientApp/boot.server.ts và thay thế dòng mã sau (dòng số 22).

const zone = moduleRef.injector.get(NgZone);

với,

const zone: NgZone = moduleRef.injector.get(NgZone);

Liên kết nguồn

47
San Jaisy

Nếu bạn muốn đơn giản nâng cấp dự án angular4 của mình lên angular 5, hãy làm như sau.

  1. Chuyển đến thư mục dự án của bạn. 
  2. Mở lệnh Nhắc và chạy các lệnh sau
  3. cài đặt npm -g npm-kiểm tra cập nhật
  4. ncu -u

Điều này làm việc cho tôi.

http://www.talkingdotnet.com/upTHER-angular-4-app-angular-5-visual-studio-2017/

7
Jerin Kurian

Kiểm tra blog góc cạnh 

https://blog.angular.io/version-5-0-0-of-angular-now-av Available-37e414935ced

Trong bài viết, một hướng dẫn cập nhật được đề cập. 

Bạn có thể tìm thấy nó ở đây: https://angular-update-guide.firebasản.com/

Ngoài ra, bạn có thể cập nhật angular-CLI thành 1.5.0 sẽ tạo dự án v5 góc cạnh. Bạn có thể so sánh sự khác biệt với bạn.

6
Bunyamin Coskuner

Đây là câu trả lời đúng, và nó siêu đơn giản. 

Thực hiện theo hướng dẫn nâng cấp Angular chính thức. 

Bạn sẽ điền vào một biểu mẫu ngắn để chọn phiên bản Angular bạn đang sử dụng và phiên bản nào bạn muốn nâng cấp lên. Sau đó nó hiển thị cho bạn danh sách các bước cần thiết để thực hiện nâng cấp. Bạn nên làm theo hướng dẫn này cho tất cả các nâng cấp. (Vui lòng upvote trước khi điều hướng đi) :)

https://update.angular.io/

 enter image description here

5
Francisco d'Anconia

Xây dựng thêm một chút nữa, điều này đã giúp tôi với CẢ HAI toàn cầu khi nâng cấp DỰ ÁN ĐỊA ĐIỂM

Các dòng hướng dẫn chính xác là (tất nhiên) trong https://update.angular.io/

Toàn cầu

$ npm uninstall -g angular-cli (to be sure)
$ npm uninstall -g @angular/cli
$ npm cache clean
$ npm install -g @[email protected]
$ ng -v ... this will show you the current CLI version. 

Dự án cục bộ

$ cd to/your/project/folder
$ remove the folder node_modules
$ npm install --save-dev @angular/[email protected]
$ npm install

Sau đó

npm install @angular/[email protected]^5.0.0 @angular/[email protected]^5.0.0 @angular/[email protected]^5.0.0 @angular/[email protected]^5.0.0 @angular/[email protected]^5.0.0 @angular/[email protected]^5.0.0 @angular/[email protected]^5.0.0 @angular/[email protected]^5.0.0 @angular/[email protected]^5.0.0 @angular/[email protected]^5.0.0 @angular/[email protected]^5.0.0 [email protected] [email protected]^5.5.2

Điều này có thể cần thiết (và sẽ không bị tổn thương): sửa lỗi kiểm toán $ npm

$ npm cài đặt [email protected] - chính xác

Nguồn: 

https://update.angular.io/ sẽ chỉ cho bạn tuyến đường tốt nhất. 

Sự khác biệt chính là khi bạn vẫn sử dụng mô-đun 'http'. Bạn có thể (hoặc cần) để di chuyển từ http sang mô đun httpclient. Trong hầu hết các trường hợp, điều này là khá dễ dàng. 

0
tjm1706

Để nâng cấp Angular 4 của bạn lên Angular 5

Mở webpack.config.js

Thêm mã dưới đây vào bên trong ContextReplocationPlugin

 /angular(\\|\/)core(\\|\/)(@angular|esm5)/
0
user1349544