Angular CLI 프로젝트를 업그레이드하는 방법은 무엇입니까?
저는 제 각진 2 프로젝트를 업그레이드하려고 합니다.2.0.02.4.1저는 시맨틱 버전 관리가 다음과 같이 채택된 것으로 알고 있습니다.2.0.0 및 제해및2.x.x릴리스는 드롭인 대체 버전이어야 합니다.제 경험은 다른 것을 나타내는 것 같습니다.내가 뭘 하고 있는지 모를 수도 있지만 이것이 간단하다는 것을 발견하지 못했습니다.
시도 1 - 수동 버전 업그레이드
나의 순진한 첫 번째 접근 방식은 수동으로 업데이트하는 것이었습니다.@angular은 제소포를 할 수 .당신은 제 소포를 참조할 수 있습니다.아래의 json(업데이트 1).변경을 하고 나는이변했고경을그, ▁an에,를 했습니다.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). 그리고 그들 중 일부는 서로 충돌하는 것 같습니다.그래서 저는 제 각진 2 버전을 업데이트하는 수동 접근 방식을 포기했습니다.
원래 패키지.제이손
{
"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"
}
}
패키지의 업데이트 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-checkupdates 사용
업데이트에 대한 각 종속성을 선택하려고 할 때 업데이트가 필요한 다른 종속성이 거미줄처럼 얽혀 있었기 때문에 다음에는 모든 것을 업데이트하려고 했습니다.
npm i -g npm-check-updates
npm-check-updates -u
npm install
문제는 해결되었지만 서비스를 시도할 때 다음 오류가 발생합니다.
AppModule의 오류가 NgModule이 아닙니다.
여기에 수집된 정보를 사용하여 제 타이프스크립트 버전을 다운그레이드했고, 그 오류는 사라졌지만, 새로운 오류가 발생했습니다.
오류에서 기호 값을 정적으로 확인하는 중 오류가 발생했습니다.내보내지 않은 함수에 대한 참조(원래 .ts 파일의 위치 29:10), rest-path.ts에서 심볼 restPath 해결, app.module.ts에서 심볼 AppModule 해결, app.module.ts에서 심볼 AppModule 해결
저는 이 오류들을 극복하기 위해 노력해 왔지만, 제가 너무 많은 어려움을 겪고 있다는 사실이 빨간 깃발을 들고 있습니다.
누가 도와줄 수 있습니까?제가 잘못된 접근법을 취하고 있나요?
angular-cli를 제거하고 다시 설치한 다음 angular-cli를 수행하고 구성 파일을 덮어쓸 것을 권장하는 angular-cli 프로젝트 업데이트에 대한 몇 가지 제안을 보았습니다.저는 이미 최신 버전을 가지고 있었기 때문에 이것은 저에게 효과가 없었습니다.
편집: 최신 angular-cli를 가지고 있다는 문장이 잘못되었습니다.나는 가지고 있었습니다angular-cli version 1.0.0-beta.16은 반에이편가최것은근의장집의면것▁whereas▁the은▁is최.1.0.0-beta.24그럼에도 불구하고, 저는 저의 angular-cli를 업데이트하고 기존 프로젝트에서 실행하려고 노력했습니다.각진 탭 페이지에 설명된 단계를 정확하게 따르지 않았다는 것을 알게 되었습니다.는 건너뛰다니습을 .npm install --save-dev angular-cli@latest그리고 rm 명령어로 개요를 설명하는 대신에 모든 node_modules를 날려버렸습니다.
유용:
공식 각도 업데이트 안내서를 사용하여 현재 버전과 업그레이드하려는 버전을 선택하여 관련 업그레이드 안내서를 참조하십시오.https://update.angular.io/
Angular CLI 변경 내용을 비교하려면 GitHub 저장소 Angular CLI diff를 참조하십시오.https://github.com/cexbrayat/angular-cli-diff/
2018년 12월 26일 업데이트:
위의 유용한 섹션에 언급된 공식 각도 업데이트 가이드를 사용합니다.업그레이드 중에 유용할 수 있는 다른 리소스에 대한 링크와 함께 최신 정보를 제공합니다.
2018년 8월 5일 업데이트됨:
1 Angular CLI 1.7 도ng update.
ng 업데이트
프로젝트를 최신 버전으로 간편하게 유지할 수 있도록 지원하는 새로운 Angular CLI 명령입니다.패키지는 최신 기능을 사용할 수 있도록 프로젝트에 적용할 논리를 정의하고 변경 사항을 변경하여 변경 사항과 관련된 영향을 줄이거나 제거할 수 있습니다.
업데이트에 대한 구성 정보는 여기에서 찾을 수 있습니다.
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..0-beta에 32개의 파일이 을 하시기 바랍니다.ng init and ng update
여기서 풀 요청은 다음과 같습니다.
BRAKING CHANGE: ng init & update 명령을 제거하는 것은 현재 구현으로 인해 해결되는 것보다 더 많은 문제가 발생하기 때문입니다.업데이트 기능은 응용 프로그램의 수동 업데이트가 필요할 때까지 CLI로 돌아갑니다.
angular-cli CHANGELOG.md 는 다음과 같이 설명합니다.
BRAKING CHANGES - @angular/cli : ng init & ng update 명령을 제거하는 것은 현재 구현되어 있는 것이 해결하는 것보다 더 많은 문제를 야기하기 때문입니다.RC가 출시되면 최신 버전의 CLI를 설치하는 것처럼 간단하게 수행되므로 RC를 사용하여 더 이상 업데이트할 필요가 없습니다.
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
원답
각도-cli를 통해 각도를 업데이트하려면 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에서는 ngnew에서 생성된 모든 자동 생성 파일의 변경 내용을 확인하고 사용자의 파일을 업데이트할 수 있습니다.변경된 각 파일에 대해 y(덮어쓰기), n(덮어쓰기 안 함), d(파일과 업데이트된 파일 사이에 차이 표시) 및 h(도움말)의 네 가지 선택지가 제공됩니다.
각 코드 파일의 diff를 주의 깊게 읽고 ng init가 완료된 후 변경사항을 수락하거나 수동으로 통합합니다.
Angular CLI의 기본 제공 기능을 사용하면 됩니다.
ng update
최신 버전으로 업데이트합니다.
JJB의 답변은 저를 올바른 방향으로 이끌었지만 업그레이드가 원활하게 진행되지 않았습니다.나의 과정은 아래와 같습니다.앞으로 프로세스가 더 쉬워지고 JJB의 답변이 사용되거나 훨씬 더 간단한 것이 사용될 수 있기를 바랍니다.
솔루션 세부 정보
저는 JJB의 답변에 캡처된 단계를 따라 각도-cli를 정확하게 업데이트했습니다. 단을 실행한 에는 행, 실, 후npm install각-cli가 깨졌습니다. 려고도해를 노력하기도 .ng version오류가 발생할 수 있습니다.▁the를 하지 못했습니다.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 명령을 사용할 수 있으려면 패키지를 업데이트해야 했습니다.json 파일을 손으로 작성하고 @dll 종속성을 2.4.1로 범핑한 다음 다른 작업을 수행합니다.npm install.
이 일이 있은 후에 저는 할 수 있었습니다.ng init구성 파일을 업데이트했지만 앱/* 파일이 없습니다.이 작업이 완료되었을 때도 여전히 오류가 발생했습니다.첫 번째는 아래에 자세히 설명되어 있고, 두 번째는 같은 유형의 오류이지만 다른 파일에 있습니다.
오류에서 기호 값을 정적으로 확인하는 중 오류가 발생했습니다.함수 호출은 지원되지 않습니다.C:/_git/my-project/code/src/main/frontend/src/app/app.module.ts의 기호 AppModule을 내보낸 함수(원래 .ts 파일의 위치 62:9)에 대한 참조로 함수 또는 람다를 바꾸는 것을 고려합니다.
이 오류는 내 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);
}
요약
제가 가장 중요한 세부 사항으로 이해하는 것을 요약하자면, 다음과 같은 변경이 필요했습니다.
JJB의 답변(및 해당 Github 페이지)에 자세히 설명된 단계를 사용하여 Angular-cli 버전을 업데이트합니다.
수동으로 @angular 버전을 업데이트한 2.0.0은 angular-cli 버전 1.0.0-beta에서 지원되지 않는 것 같습니다.24
각도-cli의 도움과 함께.
ng init구성 파일을 업데이트했습니다.제 생각에 중요한 변경 사항은 angular-cli.json과 package.json입니다.하단의 구성 파일 변경 내용을 참조하십시오.솔루션 세부 정보에 캡처된 대로 내보내기 기능을 참조하기 전에 내보내기 기능에 대한 코드를 변경합니다.
주요 구성 변경 사항
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"
],
...
내 소포.json은 ng-init에서 사용하는 버전을 고려한 수동 병합 후 이와 같이 보입니다.각 버전이 2.4.1은 아니지만 2.3에 도입된 구성 요소 상속을 원하는 변경 사항이었기 때문에 이러한 버전은 문제가 없었습니다.원래 패키지.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"
}
}
여기 http://angularjs.blogspot.co.uk/2017/03/angular-400-now-available.html 에 있는 문서에 따르면 실행할 수 있어야 합니다.
npm 설치 @filename/{common,sys,sys-cli,core,forms,sys,platform-filename,platform-filename-dynamic,platform-server,script,animations}@typescript@save
제 zone.js와 ngrx/store 라이브러리가 이전 버전이기 때문에 시도해 보았지만 몇 가지 오류가 발생했습니다.
버전으로 npm install zone.js@latest --save그리고.npm install @ngrx/store@latest -save각도 설치를 다시 실행하는 것이 저에게 효과가 있었습니다.
제거:
npm uninstall -g angular-cli
재설치(실 포함)
# npm install --global yarn
yarn global add @angular/cli@latest
ng set --global packageManager=yarn # This will help ng-cli to use yarn
다시 설치(npm 포함)
npm install --global @angular/cli@latest
글로벌 설치를 다른방글설사치용것않다입니를 추가하는 입니다./node_modules/.binPATH에 있는 폴더 또는 npm 스크립트를 사용합니다.업그레이드하는 것이 더 부드럽습니다.
효과적인 솔루션:
- node_modules 및 dist 폴더 삭제
- (단위: cmd)> ng update --all --force
- (in cmd)>> npm install typescript@>"=3.4.0 및 <3.5.0" --save-dev --save-dev
- (단위: cmd)> npm install --core-js 저장
- polyfill.ts의 'core-js/es7/reflect' 가져오기 주석 달기
- (단위: cmd)> ng serve
Angular CLI를 새 버전으로 업데이트하려면 글로벌 패키지와 프로젝트의 로컬 패키지를 모두 업데이트해야 합니다.
전역 패키지:
npm uninstall -g @angular/cli
npm cache clean
npm install -g @angular/cli@latest
로컬 프로젝트 패키지:
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
참조 자료 https://github.com/angular/angular-cli 를 참조하십시오.
언급URL : https://stackoverflow.com/questions/41403810/how-to-upgrade-angular-cli-project
'programing' 카테고리의 다른 글
| Intellij Idea 경고 - "반환된 약속은 무시됩니다" 및 aysnc/wait (0) | 2023.07.31 |
|---|---|
| Java의 mariadb 커넥터가 다른 언어의 커넥터보다 mariadb에 더 빨리 연결되는 이유는 무엇입니까? (0) | 2023.07.31 |
| PHP 사용 URL SPACE를 %20으로 바꾸기 (0) | 2023.07.31 |
| iOS 6 기기로 원격 디버깅하는 동안 Safari에 "No Inspectable Applications"(검사 가능한 응용 프로그램 없음)가 표시되는 이유는 무엇입니까? (0) | 2023.07.31 |
| Delphi 응용 프로그램을 테스트하는 가장 좋은 방법 (0) | 2023.07.31 |