programing tip

각도 2 (npm)를 최신 버전으로 올바르게 업그레이드하려면 어떻게합니까?

itbloger 2020. 7. 8. 07:58
반응형

각도 2 (npm)를 최신 버전으로 올바르게 업그레이드하려면 어떻게합니까?


최근에 https://angular.io/docs/ts/latest/tutorial/ 에서 Angular 2 튜토리얼을 시작했습니다 .

이제 Angular 2 베타 8을 사용하지 않았습니다. 이제 튜토리얼을 다시 시작했으며 최신 베타는 베타 14입니다.

단순히 npm 업데이트 를 수행 하면 몇 가지 모듈 (튜토리얼에 사전로드 됨)이 업데이트되지만 Angular2는 아닙니다 ( npm ls로 볼 수 있습니다 ).

내가 할 경우 2 각도 NPM 갱신 또는 NPM 업데이트 angular2@2.0.0beta.14을 그것은 아무 것도 하나를하지 않습니다 만.


이 명령 npm update -D && npm update -S정의 된 버전 범위 에 따라 내부의 모든 패키지 package.json를 최신 버전으로 업데이트합니다 . 자세한 내용은 여기를 참조 하십시오 .

이전 버전에서 Angular를 업데이트 2.0.0-rc.1하려면 package.jsonAngular가 여러 npm 모듈로 분할되어 있으므로 수동으로 편집해야 합니다. 이것이 없으면 angular2 패키지가 가리키는 것처럼 2.0.0-beta.21최신 버전의 Angular를 절대 사용할 수 없습니다.
시작해야 할 가장 일반적인 모듈 목록은 빠른 시작 저장소 에서 찾을 수 있습니다 .

노트:

  • 당신의 패키지 '최신 버전으로 최신 상태로 유지하는 멋진 방법은 사용하는 것입니다 npm outdated그들의 원 및 최신 버전과 함께하는 쇼 모두 오래된 패키지를.

  • 우리가 체인에 두 명령을해야하는 이유 npm update -Dnpm update -S극복하는 것입니다 이 버그 가 해결 될 때까지.


Angular2의 베타 버전에서 마이그레이션하는 데 사용 된 또 다른 멋진 패키지 Angular2 2.0.0 final는 다음과 같습니다.npm-check-updates

package.json에 지정된 모든 패키지의 최신 버전이 표시됩니다. 반대로 npm outdatedpackage.json을 편집하여 npm upgrade나중에 할 수 있습니다 .

설치

sudo npm install -g npm-check-updates

용법

ncu디스플레이 용

ncu -u 패키지를 다시 작성하십시오.


최신 Angular 5로 업그레이드

앵귤러 뎁 패키지 : npm install @angular/{animations,common,compiler,core,forms,http,platform-browser,platform-browser-dynamic,router}@latest --save

앵귤러 클리에 의해 설치되는 다른 패키지 npm install --save core-js@latest rxjs@latest zone.js@latest

Angular Dev 패키지 : npm install --save-dev @angular/{compiler-cli,cli,language-service}@latest

개발자 패키지 유형 : npm install --save-dev @types/{jasmine,jasminewd2,node}@latest

각도 클리에서 dev dev로 설치되는 다른 패키지 : 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

Angular cli에서 사용하는 최신 지원 버전을 설치하십시오 (@latest하지 마십시오). npm install --save-dev typescript@2.4.2

파일 angular-cli.json의 이름을 .angular-cli.json으로 바꾸고 내용을 업데이트하십시오.

{
  "$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": {}
  }
}

UPDATE:
Starting from CLI v6 you can just run ng update in order to get your dependencies updated automatically to a new version.

With ng update sometimes you might want to add --force flag. If you do so make sure that the version of typescript you got installed this way is supported by your current angular version, otherwise you might need to downgrade the typescript version.

Also checkout this guide Updating your Angular projects


For bash users only

If you are on are on Mac/Linux or running bash on Windows(that wont work in default Windows CMD) you can run that 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

Just specify version you wan't e.g @4.4.5 or put @latest to get the latest

Check your package.json just to make sure you are updating all @angular/* packages that you app is relying on

  • To see exact @angular version in your project run:
    npm ls @angular/compiler or yarn list @angular/compiler
  • To check the latest stable @angular version available on npm run:
    npm show @angular/compiler version

Official npm page suggest a structured method to update angular version for both global and local scenarios.

1.First of all, you need to uninstall the current angular from your system.

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

2.Clean up the cache

npm cache clean

EDIT

As pointed out by @candidj

npm cache clean is renamed as npm cache verify from npm 5 onwards

3.Install angular globally

npm install -g @angular/cli@latest

4.Local project setup if you have one

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

Please check the same down on the link below:

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

This will solve the problem.


Alternative approach using npm-upgrade:

  1. npm i -g npm-upgrade

Go to your project folder

  1. npm-upgrade check

It will ask you if you wish to upgrade the package, select Yes

That's simple


If you want to install/upgrade all packages to the latest version and you are running windows you can use this in powershell.exe:

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

If you also use the cli, you can do this:

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'})";
}

This will save the packages exact (-E), and the cli packages in devDependencies (-D)


Just start here:

https://update.angular.io

Select the version you're using and it will give you a step by step guide.

I recommend choosing 'Advanced' to see all steps. Complexity is a relative concept - and I don't know whose stupid idea this feature was, but if you select 'Basic' it won't show you all steps needed and you may miss something important that your otherwise 'Basic' application is using.

enter image description here

As of version 6 there is a new Angular CLI command ng update which intelligently goes through your dependencies and performs checks to make sure you're updating the right things :-)

The steps will outline how to use it :-)


npm uninstall --save-dev angular-cli

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

ng update @angular/cli

ng update @angular/core --force

ng update @angular/material or npm i @angular/cdk@6 @angular/material@6 --save

npm install typescript@'>=2.7.0 <2.8.0'


Best way to do is use the extension(pflannery.vscode-versionlens) in vscode.

this checks for all satisfy and checks for best fit.

i had lot of issues with updating and keeping my app functioining unitll i let verbose lense did the check and then i run

npm i

to install newly suggested dependencies.


If you are looking like me for just updating your project to the latest these is what works form me since Angular 6:

Open the console on your project folder: If you type: ng update then you will get the below message:

        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.

So I usually go straight and do:

ng update --all

Finally you can check your new version:

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

참고URL : https://stackoverflow.com/questions/36597780/how-do-i-correctly-upgrade-angular-2-npm-to-the-latest-version

반응형