Angular 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 -D및 npm 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 package.json을 다시 작성하기 위해

최신 Angular 5로 업그레이드

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

Angular CLI에서 설치하는 기타 패키지 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

각도 CLI에 의해 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": {}
  }
}

업데이트 : CLI v6
부터는 종속성을 새 버전으로 자동 업데이트하기 위해 실행할 수 있습니다 .ng update

함께 ng update때때로 당신은 추가 할 수 있습니다 --force플래그를. 이렇게하면이 방식으로 설치 한 typescript 버전이 현재 각도 버전에서 지원되는지 확인합니다. 그렇지 않으면 typescript 버전을 다운 그레이드해야 할 수 있습니다.

이 가이드도 확인 하십시오 Angular 프로젝트 업데이트

들어 bash는 사용자 만

on 상태 Mac/Linux이거나 bash on Windows(기본값에서는 작동하지 Windows CMD않음)을 실행중인 경우 해당 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

@ 4.4.5와 같이 원하지 않는 버전을 지정하거나 @latest를 입력하여 최신 정보를 얻으십시오.

당신을 확인 package.json단지 당신이 모든 업데이트 할 수 있도록 @angular/*당신이 응용 프로그램에 의존되는 패키지를

• @angular프로젝트 실행에서 정확한 버전 을 보려면 :
  npm ls @angular/compiler또는yarn list @angular/compiler
• @angularnpm에서 사용 가능한 최신 안정 버전 을 확인하려면 다음을 실행하십시오.
  npm show @angular/compiler version

공식 npm 페이지는 글로벌 및 로컬 시나리오 모두에 대해 각도 버전을 업데이트하는 구조화 된 방법을 제안합니다.

1. 우선, 시스템에서 현재 각도를 제거해야합니다.

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

2. 캐시 정리

npm cache clean

편집하다

@candidj가 지적한대로

npm cache cleannpm cache verifynpm 5 이후 로 이름이 변경 되었습니다.

3. Angular를 전역으로 설치

npm install -g @angular/cli@latest

4. 로컬 프로젝트 설정 (있는 경우)

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

아래 링크에서 동일한 내용을 확인하십시오.

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

이것은 문제를 해결할 것입니다.

npm-upgrade를 사용하는 대체 방법 :

1. npm i -g npm-upgrade

프로젝트 폴더로 이동

2. npm-upgrade check

패키지 업그레이드 여부를 묻는 메시지가 표시되면 예를 선택합니다.

간단합니다

모든 패키지를 최신 버전으로 설치 / 업그레이드하고 Windows를 실행중인 경우 다음에서 사용할 수 있습니다 powershell.exe.

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

를 사용하는 cli경우 다음을 수행 할 수 있습니다.

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

이것은 정확한 패키지 (-E)와 cli 패키지를 devDependencies(-D)에 저장합니다.

여기서 시작하세요.

https://update.angular.io

사용중인 버전을 선택하면 단계별 가이드가 제공됩니다.

모든 단계를 보려면 '고급'을 선택하는 것이 좋습니다. 복잡성은 상대적인 개념입니다.이 기능이 누구의 어리석은 아이디어인지는 모르겠지만 'Basic'을 선택하면 필요한 모든 단계가 표시되지 않으며 'Basic'응용 프로그램에서 사용하는 중요한 것을 놓칠 수 있습니다. .

버전 6부터는 ng update종속성을 지능적으로 살펴보고 올바른 업데이트가 있는지 확인 하는 새로운 Angular CLI 명령 이 있습니다. :-)

단계는 그것을 사용하는 방법을 설명합니다 :-)

npm 제거 --save-dev angular-cli

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

@ angular / cli 업데이트

@ angular / core --force 업데이트

@ angular / material 또는 npm i @ angular / cdk @ 6 @ angular / material @ 6 업데이트 --save

npm 설치 typescript @ '> = 2.7.0 <2.8.0'

가장 좋은 방법은 vscode에서 확장자 (pflannery.vscode-versionlens)를 사용하는 것입니다.

이것은 모든 만족을 확인하고 최적의 적합성을 확인합니다.

앱 기능을 업데이트하고 유지하는 데 많은 문제가있었습니다. verbose lense가 확인을하도록 한 다음 실행합니다.

npm i

새로 제안 된 종속성을 설치합니다.

프로젝트를 최신으로 업데이트하기 위해 저처럼 보이면 Angular 6 이후로 작동합니다.

프로젝트 폴더에서 콘솔을 엽니 다. If you type: ng update그러면 아래 메시지가 표시됩니다.

        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.

그래서 나는 보통 똑바로 가서 다음을 수행합니다.

ng update --all

마지막으로 새 버전을 확인할 수 있습니다.

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