Angular 6 burada olduğu için, açısal 5 istemci uygulamamı açısal 6'ya yükseltmek veya taşımak istiyorum, ancak bana yol gösterecek herhangi bir eğitim veya herhangi bir şey alamıyorum.

Bana göre yeni bir Angular CLI çalıştırmam ve ardından eski kaynağımı yeni projeye taşımam gerekiyor. Angular 6'nın Ivy adında yeni bir oluşturucu kullandığını okudum. Ivy'ye göre projemi değiştirmem gerekecek mi?

Angular v6'dan Angular v7'ye yükseltme

Angular Versiyon 7 , Resmi Angular blog bağlantısı yayınlandı . Ayrıntılı bilgi için resmi açısal güncelleme kılavuzunu https://update.angular.io ziyaret edin . Bu adımlar, Angular Material kullanan temel açısal 6 uygulamalar için işe yarayacaktır.

ng update @angular/cli 
ng update @angular/core
ng update @angular/material

Angular v5'ten Angular v6'ya yükseltme

Angular Versiyon 6 , Resmi Angular blog bağlantısı yayınlandı . Aşağıda genel yükseltme adımlarından bahsetmiştim, ancak güncellemeden önce ve sonra v6'da çalışabilir hale getirmek için kodunuzda değişiklikler yapmanız gerekiyor, bu ayrıntılı bilgi için resmi web sitesini https://update.angular.io ziyaret edin .

Yükseltme Adımları (büyük ölçüde Angular Material kullanan temel bir Angular uygulama için resmi Açısal Güncelleme Kılavuzundan alınmıştır ):

1. Güncelleme değilse NodeJS sürümünün 8.9+ olduğundan emin olun.

2. Güncelleme Açısal küresel ve yerel olarak cli ve eski yapılandırma göç .angular-cli.json yeniye angular.json aşağıdaki çalıştırarak biçimi:

   npm install -g @angular/cli  
   npm install @angular/cli  
   ng update @angular/cli
   

3. Aşağıdakileri çalıştırarak tüm Angular çerçeve paketlerinizi v6'ya ve doğru RxJS ve TypeScript sürümüne güncelleyin:

   ng update @angular/core
   

4. Aşağıdakileri çalıştırarak Açısal Malzemeyi en son sürüme güncelleyin:

   ng update @angular/material
   

5. RxJS v6, v5'ten büyük değişikliklere sahiptir, v6, uygulamalarınızın çalışmaya devam etmesini sağlayacak geriye dönük uyumluluk paketi rxjs-uyumlu getirir, ancak TypeScript kodunu rxjs-uyumluluğuna bağlı olmayacak şekilde yeniden düzenlemelisiniz. TypeScript kodunu yeniden düzenlemek için aşağıdakileri çalıştırın:

   npm install -g rxjs-tslint   
   rxjs-5-to-6-migrate -p src/tsconfig.app.json
   

   Not: Tüm bağımlılıklarınız RxJS 6'ya güncellendikten sonra, paket boyutunu artırdığı için rxjs-uyumluluğunu kaldırın. Daha fazla bilgi için lütfen bu RxJS Yükseltme Kılavuzuna bakın.

   npm uninstall rxjs-compat
   

6. ng serveKontrol etmek için çalıştırıldı .
   Derlemede hata alırsanız , ayrıntılı bilgi için https ://update.angular.io'ya bakın .

Angular v5'ten Angular 6.0.0-rc.5'e yükseltin

1. Rxj'leri 6.0.0- beta.0'a yükseltin , daha fazla bilgi için lütfen bu RxJS Yükseltme Kılavuzuna bakın. RxJS v6'da büyük bir değişiklik var, bu nedenle önce kodunuzu en son RxJS sürümüyle uyumlu hale getirin.

2. NodeJS sürümünü 8.9+ sürümüne güncelleyin (bu, açısal cli 6 sürümü için gereklidir)

3. Angular cli global paketini sonraki sürüme güncelleyin.

   npm uninstall -g @angular/cli
   npm cache verify
   

   npm sürümü <5 ise o zaman kullanın npm cache clean

   npm install -g @angular/cli@next
   

4. Package.json dosyasındaki açısal paket sürümlerini şu şekilde değiştirin: ^6.0.0-rc.5

   "dependencies": {
     "@angular/animations": "^6.0.0-rc.5",
     "@angular/cdk": "^6.0.0-rc.12",
     "@angular/common": "^6.0.0-rc.5",
     "@angular/compiler": "^6.0.0-rc.5",
     "@angular/core": "^6.0.0-rc.5",
     "@angular/forms": "^6.0.0-rc.5",
     "@angular/http": "^6.0.0-rc.5",
     "@angular/material": "^6.0.0-rc.12",
     "@angular/platform-browser": "^6.0.0-rc.5",
     "@angular/platform-browser-dynamic": "^6.0.0-rc.5",
     "@angular/router": "^6.0.0-rc.5",
     "core-js": "^2.5.5",
     "karma-jasmine": "^1.1.1",
     "rxjs": "^6.0.0-uncanny-rc.7",
     "rxjs-compat": "^6.0.0-uncanny-rc.7",
     "zone.js": "^0.8.26"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "~0.5.0",
     "@angular/cli": "^6.0.0-rc.5",
     "@angular/compiler-cli": "^6.0.0-rc.5",
     "@types/jasmine": "2.5.38",
     "@types/node": "~8.9.4",
     "codelyzer": "~4.1.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-coverage-istanbul-reporter": "^0.2.0",
     "karma-jasmine": "~1.1.0",
     "karma-jasmine-html-reporter": "^0.2.2",
     "postcss-loader": "^2.1.4",
     "protractor": "~5.1.0",
     "ts-node": "~5.0.0",
     "tslint": "~5.9.1",
     "typescript": "^2.7.2"
   }
   

5. Sonraki Angular cli yerel paketini sonraki sürüme güncelleyin ve yukarıda belirtilen paketleri kurun.

   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@next
   npm install 
   

6. Angular CLI yapılandırma formatı, açısal cli 6.0.0-rc.2 sürümünden değiştirilmiştir ve mevcut yapılandırmanız aşağıdaki komut çalıştırılarak otomatik olarak güncellenebilir. Eski yapılandırma dosyası kaldıracaktır .angular-cli.json ve yeni yazacak angular.json dosyasını.

   ng update @angular/cli --migrate-only --from=1.7.4

Not: - "Angular Compiler, TypeScript gerektirir> = 2.7.2 ve <2.8.0, ancak bunun yerine 2.8.3 bulundu" hatasını alırsanız. aşağıdaki komutu çalıştırın:

npm install typescript@2.7.2

Angular 6 yayınlandı.

https://blog.angular.io/version-6-of-angular-now-available-cc56b0efa7a4

Küçük projelerimden birinde işe yarayan şey şu

1. npm install -g @ angular / cli
2. npm install @ angular / cli
3. ng güncelleme @ angular / cli --migrate-only - from = 1.7.0
4. ng güncelleme @ açısal / çekirdek
5. npm rxjs-uyumlu yükle
6. ng servis

Package.json içindeki çalıştırma betiklerinizi güncellemeniz gerekebilir. Örneğin. "uygulama" ve "ortam" gibi bayraklar kullanırsanız Bunlar sırasıyla "proje" ve "yapılandırma" olarak güncellenmiştir.

Daha ayrıntılı kılavuz için https://update.angular.io/ adresine bakın .

Kendi özel ihtiyaçlarınız için ne yapmanız gerektiğini size söyleyen resmi yükseltme kılavuzunu kullanın:

https://update.angular.io/

Angular 5'ten Angular 6'ya adım adım yükseltme ayrıntılarını kontrol edin. Bunlar, yükseltme sırasında karşılaştığınız sorunlar ve bunların nasıl çözüleceği hakkında ayrıntılar sağlar.

• Düğüm sürümünüzü 8 veya üzerine güncelleyin ve en son küresel olarak npm i -g @ angular / cli @ latest ile Angular cli'yi kurun.
• Angular 6, yapılandırma dosyası olarak .anguar-cli.json yerine angular.json kullanır. Ayrıca tslint değiştirildi. En son yapılandırma ayrıntıları için https://github.com/angular/angular-cli/wiki/angular-workspace kontrol edin . Mevcut konfigürasyonlarınızdan herhangi birini yeni konfigürasyon dosyasına taşımalısınız.
• Bunu yapmak için, yeni 'projeniz' ve projeniz için daha önce kullandığınız önek, stil vb. Gibi aynı varsayılanları kullanarak en son cli ng ile başka bir kukla proje oluşturun. Cli https://github.com/angular/angular-cli/wiki/new ile yeni proje oluşturun
• Mevcut Angular → Angular 6 sürümünüzden nelerin değiştirildiğini kontrol etmek için https://update.angular.io/ adresini kullanın . Bunların nasıl değiştirileceği / düzeltileceği hakkında kullanım sağlar.
• Yukarıdaki adımları izleyin ve 2. adımda oluşturulan angular.json dosyasını kopyalayın / güncelleyin. Tüm bağımlılıkları almak ve npm güncellemesi yapmak için projenizde npm i yapın
• Şimdi büyük kısım geliyor. RxJS yükseltmesi ve çakışmaları çözme. RxJS, bu sürümle birlikte operatörlerin ve Gözlemlenebilir yaratıcıların ithalatını standart hale getirdi. Npm i -g rxjs-tslint yapın ve tslint.json dosyasında lint yapılandırmasının altına ekleyin

{
  "rulesDirectory": [
    "node_modules/rxjs-tslint"
  ],
  "rules": {
    "rxjs-collapse-imports": true,
    "rxjs-pipeable-operators-only": true,
    "rxjs-no-static-observable-methods": true,
    "rxjs-proper-imports": true
  }
}

• Şimdi tiftik-düzeltme çalıştırılıyor. Bu, birkaç öğeyi düzeltir, ancak kalan sorunların çoğu vurgulanır ve manuel olarak düzeltmeniz gerekir.

Operatör Adı değişikliği:

do -> tap, 
catch -> catchError, 
switch -> switchAll, 
finally -> finalize

Tüm operatörler rxjs / operatörlere taşındı

import { map, filter, reduce } from 'rxjs/operators';

Gözlenebilir oluşturma yöntemleri rxj'lere taşınır

   import { Observable, Subject, of, from } from 'rxjs'; 

Hazırsınız. Angular 6'ya hoş geldiniz :) Yükseltme hakkında blog yazıma buradan göz atın

Angular-cli.json'un angular.json olarak değiştirilmesi için update @ angular / cli'yi yeniden çalıştırmak zorunda kaldım

Angular 5'ten Angular 6'ya güncellemek için lütfen aşağıdaki yorumları çalıştırın

1. ng güncelleme @ angular / cli
2. ng güncelleme @ açısal / çekirdek
3. npm rxjs-uyumlu yükle (Daha eski rxjs 5.6 sürümünü desteklemek için)
4. npm install -g rxjs-tslint (Kodda rxjs 5'ten rxjs 6 formatına değiştirmek için. Global olarak kurun, o zaman sadece çalışacaktır)
5. rxjs-5-to-6-migrate -p src / tsconfig.app.json (Kurduktan sonra bunu kaynak kodumuzda rxjs6 formatına değiştirmeliyiz)
6. npm rxjs-uyumlu kaldırma (Sonunda bunu kaldırın)

Tam rehber

----------------- Köşeli klipsli --------------------------

1. CLI'yi global ve yerel olarak güncelleyin

1. NPM kullanma (düğüm sürümünün 8+ olduğundan emin olun)

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

2. İplik Kullanımı

   yarn remove @angular/cli yarn global add @angular/cli yarn add @angular/cli

2. Bağımlılıkları güncelleyin

ng update @angular/cli
ng update @angular/core
ng update @angular/material
ng update rxjs

Angular 6 artık TypeScript 2.7 ve RxJS 6'ya bağlı

Normalde bu, kodunuzu RxJS içe aktarmalarının ve operatörlerinin kullanıldığı her yerde güncellemeniz gerektiği anlamına gelir, ancak şükür ki, ağır yüklerin çoğunu halleden bir paket var:

npm i -g rxjs-tslint 

//or using yarn

yarn global add rxjs-tslint

Daha sonra rxjs-5-to-6-migrate çalıştırabilirsiniz

rxjs-5-to-6-migrate -p src/tsconfig.app.json

sonunda rxjs-uyumlu kaldır

npm uninstall rxjs-compat

// or using Yarn

yarn remove rxjs-compat

Bu bağlantıya bakın https://alligator.io/angular/angular-6/

------------------- Açısal-klipsiz -------------------------

Bu nedenle package.jsondosyanızı manuel olarak güncellemeniz gerekir .

O zaman koş

 npm update
 npm install --save rxjs-compat
 npm i -g rxjs-tslint
 rxjs-5-to-6-migrate -p src/tsconfig.app.json

Vinay Kumar'ın belirttiği gibi, küresel yüklü Angular CLI'yi güncellemeyecek. Global olarak güncellemek için aşağıdaki komutları kullanın:

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

Mevcut projeyi güncellemek istiyorsanız, mevcut projeyi değiştirmeniz gerektiğine dikkat edin, projenizin içindeki package.json'u değiştirmelisiniz .

Angular'ın kendisinde kırılma değişikliği yoktur, ancak bunlar RxJS'dedir, bu nedenle eski kodla çalışmak için rxjs-uyumlu kitaplığı kullanmayı unutmayın.

  npm install --save rxjs-compat  

Angular CLI kurulumu / güncellenmesi hakkında güzel bir makale yazdım http://bmnteam.com/angular-cli-installation/

sadece aşağıdaki komutu çalıştırın:

ng update

not: bu genel olarak güncellenmeyecektir.

Ben böyle çalıştırıyorum.

Ortamım:

Açısal CLI Global: 6.0.0, Yerel: 1.7.4, Açısal: 5.2, Typcript 2.5.3

Not: Etkinleştirmek ng Updateiçin önce Angular CLI 6.0 yüklemeniz gerekir npm install -g @angular/cli or npm install @angular/cli

1. ng update //update Angular Package core/common/complier... to 6.0.0

2. ng update @angular/cli //change angular-cli.json to angular.json

açısal malzeme 5.4.2, ngx-translate 9.1.1, ng-bootstrap / ng-bootstrap 1.1.1 varsa isteğe bağlı:

3. ng update @angular/material //upgrade to 6.0.1

4. npm install @ngx-translate/core@10.0.1 --save //upgrade ngX translate to 10.0.1 for Angular 6

5 npm install --save @ng-bootstrap/ng-bootstrap@2.0.0 //for ng-bootstrap

Gözlemlenebilir'i kullanırsanız ve hatayı alırsanız:

ERROR in node_modules/rxjs/Observable.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Observable'. node_modules/rxjs/observable/of.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/observable/of'.

Değişiklik: import { Observable } from "rxjs/Observable"; import { of } from 'rxjs/observable/of';

için

import { Observable, of } from "rxjs";

Açısal CLI sorunu: https://github.com/angular/angular-cli/issues/10621

2/4 / 5'i Angular 6'ya yükseltmek için birkaç adım var.

npm uninstall --save-dev angular-cli
npm install --save-dev @angular/cli@latest
npm install

"Angular.json" ile ilgili sorunu çözmek için: -

ng update @angular/cli --migrate-only --from=1.7.4

Mağaza Taşımacılığı
https://github.com/ngrx/platform/blob/master/MIGRATION.md#ngrxstore

RXJS TAŞIMA
https://www.academind.com/learn/javascript/rxjs-6-what-changed/

Bunun size yardımcı olacağını umuyorum :)