Angular CLI 프로젝트를 업그레이드하는 방법은 무엇입니까?

Angular CLI 프로젝트를 업그레이드하는 방법은 무엇입니까?

---

angular 2 프로젝트를 2.0.0에서 2.4.1. 나는 2.0.0릴리스 이후 시맨틱 버전 관리가 채택 되었으며 2.x.x릴리스는 드롭 인 대체물이어야 함을 이해합니다 . 내 경험은 그렇지 않은 것 같습니다. 어쩌면 내가 뭘하는지 모르겠지만 이것이 간단하다는 것을 알지 못했습니다 ...

시도 1-수동 버전 업그레이드

내 순진한 첫 번째 접근 방식은 내 @angular종속성 을 수동으로 업데이트하는 것이 었습니다 . 아래의 package.json을 참조 할 수 있습니다 (업데이트 1). 나는 이러한 변경을 한 다음을 수행하고 npm install몇 가지 경고를 받았으며 ng serve.

정의되지 않은 속성 'AssetUrl'을 읽을 수 없습니다.

그리고 내 경고 ...

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.0.15: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN @angular/core@2.4.1 requires a peer of rxjs@^5.0.1 but none was installed.
npm WARN @angular/core@2.4.1 requires a peer of zone.js@^0.7.2 but none was installed.
npm WARN @angular/http@2.4.1 requires a peer of rxjs@^5.0.1 but none was installed.
npm WARN @angular/compiler-cli@0.6.4 requires a peer of @angular/compiler@2.0.2 but none was installed.
npm WARN @angular/compiler-cli@0.6.4 requires a peer of @angular/platform-server@2.0.2 but none was installed.
npm WARN @angular/compiler-cli@0.6.4 requires a peer of @angular/core@2.0.2 but none was installed.
npm WARN @ngtools/webpack@1.2.1 requires a peer of @angular/compiler-cli@^2.3.1 but none was installed.
npm WARN @ngtools/webpack@1.2.1 requires a peer of @angular/tsc-wrapped@^0.5.0 but none was installed.
npm WARN @ngtools/webpack@1.2.1 requires a peer of webpack@^2.1.0-beta.25 but none was installed.

그래서 저는이 경고를 고치려고 노력했지만 모두 고치는 방법을 모르고 (예 : @ ngtools / webpack) 일부는 서로 충돌하는 것처럼 보입니다. 그래서 angular 2 버전을 업데이트하는 수동 접근 방식을 포기했습니다 ...

원본 package.json

{
  "name": "frontend",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "start": "ng serve",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update",
    "e2e": "protractor",
    "build": "ng build",
    "buildProd": "ng build --env=prod"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/material": "^2.0.0-alpha.9-experimental-pizza",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/router": "3.0.0",
    "@types/google-libphonenumber": "^7.4.8",
    "angular2-datatable": "^0.4.2",
    "apollo-client": "^0.4.22",
    "core-js": "^2.4.1",
    "google-libphonenumber": "^2.0.4",
    "graphql-tag": "^0.1.15",
    "hammerjs": "^2.0.8",
    "ng2-bootstrap": "^1.1.16",
    "rxjs": "5.0.0-beta.12",
    "ts-helpers": "^1.1.2",
    "zone.js": "^0.6.26"
  },
  "devDependencies": {
    "@types/hammerjs": "^2.0.33",
    "@types/jasmine": "^2.2.30",
    "@types/lodash": "^4.14.39",
    "angular-cli": "1.0.0-beta.16",
    "codelyzer": "~0.0.26",
    "jasmine-core": "2.4.1",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "4.0.9",
    "ts-node": "1.2.1",
    "tslint": "3.13.0",
    "typescript": "2.0.2",
    "typings": "1.4.0"
  }
}

package.json 업데이트 1

{
  "name": "frontend",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "start": "ng serve",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update",
    "e2e": "protractor",
    "build": "ng build",
    "buildProd": "ng build --env=prod"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "2.4.1",
    "@angular/compiler": "2.4.1",
    "@angular/core": "2.4.1",
    "@angular/forms": "2.4.1",
    "@angular/http": "2.4.1",
    "@angular/material": "^2.0.0-alpha.9-experimental-pizza",
    "@angular/platform-browser": "2.4.1",
    "@angular/platform-browser-dynamic": "2.4.1",
    "@angular/router": "3.0.0",
    "@types/google-libphonenumber": "^7.4.8",
    "angular2-datatable": "^0.4.2",
    "apollo-client": "^0.4.22",
    "core-js": "^2.4.1",
    "google-libphonenumber": "^2.0.4",
    "graphql-tag": "^0.1.15",
    "hammerjs": "^2.0.8",
    "ng2-bootstrap": "^1.1.16",
    "rxjs": "5.0.1",
    "ts-helpers": "^1.1.2",
    "zone.js": "^0.7.2"
  },
  "devDependencies": {
    "@types/hammerjs": "^2.0.33",
    "@types/jasmine": "^2.2.30",
    "@types/lodash": "^4.14.39",
    "angular-cli": "1.0.0-beta.16",
    "codelyzer": "~0.0.26",
    "jasmine-core": "2.4.1",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "4.0.9",
    "ts-node": "1.2.1",
    "tslint": "3.13.0",
    "typescript": "2.0.2",
    "typings": "1.4.0"
  }
}

시도 2-npm-check-updates 사용

업데이트를 위해 각도 종속성을 선택하려고 할 때 업데이트해야하는 다른 종속성의 거미줄이 되었기 때문에 다음으로 모든 것을 업데이트하려고했습니다.

이 답변을 바탕으로 다음을 시도했습니다.

npm i -g npm-check-updates
npm-check-updates -u
npm install

이것은 잘되었지만 서비스를 시도했을 때 다음과 같은 오류가 발생합니다.

AppModule의 오류가 NgModule이 아닙니다.

여기 에 수집 된 정보를 사용하여 타이프 스크립트 버전을 다운 그레이드했는데 그 오류가 사라졌지 만 새로운 오류가 발생했습니다.

ERROR in Error가 정적으로 기호 값을 해결하는 중에 발견되었습니다. 내 보내지 않은 함수에 대한 참조 (원래 .ts 파일의 위치 29:10), rest-paths.ts에서 기호 restPaths 확인, app.module.ts에서 기호 AppModule 확인, app.module.ts에서 기호 AppModule 확인

나는 이러한 오류를 통해 내 방식대로 싸우고 있지만 내가 너무 많은 문제를 겪고 있다는 사실은 위험 신호를 제기하고 있습니다.

아무도 도울 수 있습니까? 내가 잘못된 접근 방식을 취하고 있습니까?

angular-cli를 제거하고 다시 설치 한 다음 ng init를 수행하고 구성 파일을 덮어 쓰도록 권장하는 angular-cli 프로젝트 업데이트에 대한 몇 가지 제안을 보았습니다. 이미 최신 버전이 있기 때문에 이것은 나를 위해 작동하지 않았습니다.

편집 : 최신 angular-cli에 대한 진술이 잘못되었습니다. 나는 한 angular-cli version 1.0.0-beta.16이 편집은시의 최신 반면 1.0.0-beta.24. 그럼에도 불구하고 저는 angular-cli를 업데이트하고 기존 프로젝트에서 ng init를 실행하려고했습니다. 이제 angular-cli github 페이지에 설명 된 단계를 정확하게 따르지 않았 음을 알게되었습니다. 나는을 건너 뛰고 npm install --save-dev angular-cli@latest그들이 설명하는 rm 명령을 사용하는 대신 모든 node_modules를 날려 버렸습니다.

---

유능한:

공식 Angular 업데이트 가이드 를 사용하여 관련 업그레이드 가이드를 위해 현재 버전과 업그레이드하려는 버전을 선택하십시오. https://update.angular.io/

Angular CLI 변경 사항을 비교하려면 GitHub 저장소 Angular CLI diff 를 참조하십시오 . https://github.com/cexbrayat/angular-cli-diff/

업데이트 : 2018 년 12 월 26 일 :

위의 유용한 섹션에 언급 된 공식 Angular 업데이트 가이드를 사용하세요 . 업그레이드 중에 유용 할 수있는 다른 리소스에 대한 링크와 함께 최신 정보를 제공합니다.

업데이트 : 2018 년 8 월 5 일 :

Angular CLI 1.7이 도입되었습니다 ng update.

ng 업데이트

최신 버전으로 프로젝트를 최신 상태로 유지하는 것을 단순화하는 새로운 Angular CLI 명령. 패키지는 최신 기능의 사용을 보장하고 주요 변경 사항과 관련된 영향을 줄이거 나 제거하기 위해 변경을 수행하기 위해 프로젝트에 적용될 로직을 정의 할 수 있습니다.

ng 업데이트에 대한 구성 정보는 여기 에서 찾을 수 있습니다.

1.7 ~ 6 업데이트

CLI 1.7은 자동 v6 업데이트를 지원하지 않습니다. 패키지 관리자를 통해 @ angular / cli를 수동으로 설치 한 다음 업데이트 마이그레이션 회로도를 실행하여 프로세스를 완료하십시오.

npm install @angular/cli@^6.0.0
ng update @angular/cli --migrate-only --from=1

---

2017 년 4 월 30 일 업데이트 :

1.0 업데이트

이제 Angular CLI 마이그레이션 가이드를 따라야합니다.

---

업데이트 : 2017 년 4 월 3 일 :

RC 업데이트

Angular CLI RC 마이그레이션 가이드를 따라야합니다.

---

2017 년 2 월 20 일 업데이트 :

1.0.0-beta.32에는 주요 변경 사항이 있으며 제거되었습니다. ng init and ng update

끌어 오기 요청 여기에는 다음 상태 :

주요 변경 사항 : 현재 구현이 해결하는 것보다 더 많은 문제를 야기하기 때문에 ng init 및 ng 업데이트 명령을 제거합니다. 업데이트 기능은 애플리케이션의 수동 업데이트가 필요할 때까지 CLI로 돌아갑니다.

angular-cli CHANGELOG.md 는 다음과 같이 말합니다.

주요 변경 사항 -@ angular / cli : 현재 구현이 해결하는 것보다 더 많은 문제를 일으키기 때문에 ng init 및 ng 업데이트 명령을 제거합니다. RC가 출시되면 최신 버전의 CLI를 설치하는 것만 큼 간단하므로 더 이상이를 사용하여 업데이트 할 필요가 없습니다.

---

업데이트 : 2017 년 2 월 17 일 :

Angular-cli는 이제 NPM @angular 패키지에 추가되었습니다. 이제 위의 명령을 다음으로 대체해야합니다.

글로벌 패키지 :

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

로컬 프로젝트 패키지 :

rm -rf node_modules dist # On Windows use rmdir /s /q node_modules dist
npm install --save-dev @angular/cli@latest
npm install
ng init

---

원래 답변

angular-cli 를 통해 angular를 업데이트 하려면 GitHub 의 README.md 에 있는 단계를 따라야합니다 .

여기 있습니다:

angular-cli 업데이트

angular-cli를 새 버전으로 업데이트하려면 전역 패키지와 프로젝트의 로컬 패키지를 모두 업데이트해야합니다.

글로벌 패키지 :

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

로컬 프로젝트 패키지 :

rm -rf node_modules dist tmp # On Windows use rmdir /s /q node_modules dist tmp
npm install --save-dev angular-cli@latest
npm install
ng init

실행 ng init하면 ng new에 의해 생성 된 모든 자동 생성 파일의 변경 사항을 확인하고 업데이트 할 수 있습니다. 변경된 각 파일에 대해 y (덮어 쓰기), n (덮어 쓰지 않음), d (파일과 업데이트 된 파일 간의 차이점 표시) 및 h (도움말)의 네 가지 선택 사항이 제공됩니다.

각 코드 파일의 차이점을주의 깊게 읽고 변경 사항을 수락하거나 초기화가 완료된 후 수동으로 통합하십시오.

---

JJB의 대답은 저를 올바른 방향으로 이끌었지만 업그레이드가 원활하게 진행되지 않았습니다. 내 프로세스는 아래에 자세히 설명되어 있습니다. 바라건대 프로세스가 앞으로 더 쉬워지고 JJB의 답변을 사용할 수 있거나 훨씬 더 간단합니다.

솔루션 세부 정보

angular-cli를 정확하게 업데이트하기 위해 JJB의 답변에 캡처 된 단계를 따랐습니다. 그러나 실행 후 npm installangular-cli가 깨졌습니다. 그렇게하려고해도 ng version오류가 발생합니다. 그래서 ng init명령을 할 수 없었습니다 . 아래 오류를 참조하십시오.

$ ng init
core_1.Version is not a constructor
TypeError: core_1.Version is not a constructor
    at Object.<anonymous> (C:\_git\my-project\code\src\main\frontend\node_modules\@angular\compiler-cli\src\version.js:18:19)
    at Module._compile (module.js:556:32)
    at Object.Module._extensions..js (module.js:565:10)
    at Module.load (module.js:473:32)
    ...

angular-cli 명령을 사용할 수 있으려면 package.json 파일을 직접 업데이트하고 @angular 종속성을 2.4.1로 올린 다음 다른 npm install.

이 후 나는 할 수 있었다 ng init. 구성 파일을 업데이트했지만 app / * 파일이 없습니다. 이것이 완료되었을 때 여전히 오류가 발생했습니다. 첫 번째는 아래에 자세히 설명되어 있고 두 번째는 동일한 유형의 오류이지만 다른 파일에 있습니다.

ERROR in Error가 정적으로 기호 값을 해결하는 중에 발견되었습니다. 함수 호출은 지원되지 않습니다. 함수 또는 람다를 내 보낸 함수 (원본 .ts 파일의 62 : 9 위치)에 대한 참조로 바꾸고 C : / _ git / my-project / code / src / main / frontend / src / app에서 기호 AppModule을 해결하는 것이 좋습니다. /app.module.ts

이 오류는 내 AppModule의 다음 팩토리 공급자와 관련이 있습니다.

{ provide: Http, useFactory: 
    (backend: XHRBackend, options: RequestOptions, router: Router, navigationService: NavigationService, errorService: ErrorService) => {
    return new HttpRerouteProvider(backend, options, router, navigationService, errorService);  
  }, deps: [XHRBackend, RequestOptions, Router, NavigationService, ErrorService]
}

이 오류를 해결하기 위해 내 보낸 함수를 사용하고 공급자를 다음과 같이 변경했습니다.

    { 
      provide: Http, 
      useFactory: httpFactory, 
      deps: [XHRBackend, RequestOptions, Router, NavigationService, ErrorService]
    }

... // elsewhere in AppModule

export function httpFactory(backend: XHRBackend, 
                            options: RequestOptions, 
                            router: Router, 
                            navigationService: NavigationService, 
                            errorService: ErrorService) {
  return new HttpRerouteProvider(backend, options, router, navigationService, errorService);
}

요약

내가 이해하는 가장 중요한 세부 사항을 요약하기 위해 다음과 같은 변경이 필요했습니다.

1. JJB의 답변 (및 github 페이지)에 설명 된 단계를 사용하여 angular-cli 버전을 업데이트하십시오.

2. @angular 버전을 수동으로 업데이트하면 2.0.0이 angular-cli 버전 1.0.0-beta.24에서 지원되지 않는 것 같습니다.

3. angular-cli와 ng init명령 의 도움으로 구성 파일을 업데이트했습니다. 중요한 변경 사항은 angular-cli.json 및 package.json이라고 생각합니다. 하단의 구성 파일 변경 사항을 참조하십시오.

4. 솔루션 세부 정보에 캡처 된대로 함수를 참조하기 전에 내보내기 기능에 대한 코드를 변경합니다.

주요 구성 변경

angular-cli.json 변경

{
  "project": {
    "version": "1.0.0-beta.16",
    "name": "frontend"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": "assets",
...

바뀌었다...

{
  "project": {
    "version": "1.0.0-beta.24",
    "name": "frontend"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
...

내 package.json은 ng-init에서 사용하는 버전을 고려하는 수동 병합 후 다음과 같이 보입니다. 내 앵귤러 버전은 2.4.1이 아니지만 내가 추구했던 변경 사항은 2.3에서 도입 된 구성 요소 상속이므로이 버전에 문제가 없습니다. 원래 package.json이 문제에 있습니다.

{
  "name": "frontend",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "e2e": "protractor",
    "build": "ng build",
    "buildProd": "ng build --env=prod"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^2.3.1",
    "@angular/compiler": "^2.3.1",
    "@angular/core": "^2.3.1",
    "@angular/forms": "^2.3.1",
    "@angular/http": "^2.3.1",
    "@angular/platform-browser": "^2.3.1",
    "@angular/platform-browser-dynamic": "^2.3.1",
    "@angular/router": "^3.3.1",
    "@angular/material": "^2.0.0-beta.1",
    "@types/google-libphonenumber": "^7.4.8",
    "angular2-datatable": "^0.4.2",
    "apollo-client": "^0.4.22",
    "core-js": "^2.4.1",
    "rxjs": "^5.0.1",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.7.2",
    "google-libphonenumber": "^2.0.4",
    "graphql-tag": "^0.1.15",
    "hammerjs": "^2.0.8",
    "ng2-bootstrap": "^1.1.16"
  },
  "devDependencies": {
    "@types/hammerjs": "^2.0.33",
    "@angular/compiler-cli": "^2.3.1",
    "@types/jasmine": "2.5.38",
    "@types/lodash": "^4.14.39",
    "@types/node": "^6.0.42",
    "angular-cli": "1.0.0-beta.24",
    "codelyzer": "~2.0.0-beta.1",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "~4.0.13",
    "ts-node": "1.2.1",
    "tslint": "^4.0.2",
    "typescript": "~2.0.3",
    "typings": "1.4.0"
  }
}

---

Angular CLI의 내장 기능을 사용하십시오.

ng update

최신 버전으로 업데이트합니다.

---

According to the documentation on here http://angularjs.blogspot.co.uk/2017/03/angular-400-now-available.html you 'should' just be able to run...

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

I tried it and got a couple of errors due to my zone.js and ngrx/store libraries being older versions.

Updating those to the latest versions npm install zone.js@latest --save and npm install @ngrx/store@latest -save, then running the angular install again worked for me.

---

Remove :

npm uninstall -g angular-cli

Reinstall (with yarn)

# npm install --global yarn
yarn global add @angular/cli@latest
ng set --global packageManager=yarn  # This will help ng-cli to use yarn

Reinstall (with npm)

npm install --global @angular/cli@latest

Another way is to not use global install, and add /node_modules/.bin folder in the PATH, or use npm scripts. It will be softer to upgrade.

---

Solution that worked for me:

• Delete node_modules and dist folder
• (in cmd)>> ng update --all --force
• (in cmd)>> npm install typescript@">=3.4.0 and <3.5.0" --save-dev --save-exact
• (in cmd)>> npm install --save core-js
• Commenting import 'core-js/es7/reflect'; in polyfill.ts
• (in cmd)>> ng serve

---

To update Angular CLI to a new version, you must update both the global package and your project's local package.

Global package:

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

Local project package:

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

See the reference https://github.com/angular/angular-cli

참고URL : https://stackoverflow.com/questions/41403810/how-to-upgrade-angular-cli-project