> 웹 프론트엔드 > JS 튜토리얼 > 각도 프로젝트를 최신 버전으로 업데이트하는 방법

각도 프로젝트를 최신 버전으로 업데이트하는 방법

Christopher Nolan
풀어 주다: 2025-02-15 11:24:13
원래의
652명이 탐색했습니다.

How to Update Angular Projects to the Latest Version 키 포인트

업데이트를 시도하기 전에 최신 버전의 Angular CLI가 를 실행하여 설치되어 있는지 확인하십시오. 각도 업데이트 가이드를 사용하여 현재 각도 버전에서 필요한 버전으로 업데이트하는 특정 단계를 결정하고 응용 프로그램의 복잡성에 따라 조정하십시오.

    로 교체하여 새로운 HTTPClient의 자동 JSON 처리 및 HTTP 인터셉터에 대한 지원을 활용하십시오.
  • 트리 쉐이킹을 향상시키고 에서 가져 와서 패키지 크기를 줄이고 npm install -g @angular/cli@latest 방법으로 rxjs 피펫 가능한 연산자 사용에 적용하여 패키지 크기를 줄입니다.
  • 가 업데이트 된 후 를 실행하고 앱 root 요소에서
  • 속성을 ​​확인하여 응용 프로그램의 기능과 각도 버전을 확인하십시오.
  • 공식 각도 블로그를 따르고 새로운 버전 및 업데이트를 위해 로그를 변경하여 최신 개선 사항 및 기능으로 응용 프로그램을 유지하십시오.
  • HttpModule 이 기사에서는 각도 프로젝트를 최신 버전으로 업데이트하는 방법을 설명합니다. HttpClientModule 이 기사는 SitePoint Angular 2 튜토리얼의 6 부로 각도 CLI를 사용하여 CRUD 응용 프로그램을 만드는 방법을 설명합니다.
  • Part 0 - 최종 각도 CLI 참조 안내서 rxjs/operators 1 부 - Todo Application의 첫 번째 버전을 시작하고 실행하십시오. 2 부 - TODO 목록 및 개별 TODO를 표시 할 별도 구성 요소를 작성하십시오. 파트 3 - 나머지 API와의 의사 소통을 위해 TODO 서비스를 업데이트하십시오. 파트 4 - 각도 라우터를 사용하여 데이터를 구문 분석합니다 5 부 - 개인 내용을 보호하기 위해 인증을 추가하십시오 .pipe() 6 부 - 각도 프로젝트를 최신 버전으로 업데이트하는 방법
  • 1 부에서는 Todo 신청서를 올려서 실행하여 GitHub 페이지에 배포하는 방법을 배웠습니다. 이것은 훌륭하지만 불행히도 전체 응용 프로그램은 구성 요소로 채워져 있습니다. ng serve 2 부에서는보다 모듈 식 구성 요소 아키텍처를 검사 하고이 단일 구성 요소를 이해하고 재사용하고 유지하기가 더 쉬운 구조적이고 작은 구성 요소 트리로 분해하는 방법을 배웠습니다. ng-version 파트 3에서는 RXJS 및 Angular의 HTTP 서비스를 사용하여 나머지 API 백엔드와 통신하기 위해 응용 프로그램을 업데이트했습니다.
  • 파트 4에서는 각도 라우터를 소개하고 브라우저 URL이 변경 될 때 라우터가 응용 프로그램을 업데이트하는 방법과 라우터를 사용하여 백엔드 API에서 데이터를 구문 분석하는 방법을 배웁니다.
  • 파트 5에서는 응용 프로그램에 인증을 추가하고 무단 액세스로부터 응용 프로그램의 다양한 부분을 보호하는 방법을 배웠습니다.
  • 걱정하지 마세요! 파트 6을 이해하기 위해이 자습서의 1, 2, 3, 4 또는 5 부를 따를 필요가 없습니다. 코드 기반의 사본을 가져 와서 파트 5의 코드를보고 시작점으로 사용할 수 있습니다. 이것은 아래에서 더 자세히 설명합니다. 업로드 및 실행 Angular 대상 업데이트를 시작하려면 최신 버전의 Angular CLI가 설치되어 있는지 확인하십시오. 그렇지 않은 경우 다음 명령으로 설치할 수 있습니다.

    이전 버전의 Angular CLI를 삭제 해야하는 경우 다음을 수행 할 수 있습니다.

    후에는 파트 5에 대한 코드 사본이 필요합니다. 이것은 Github에서 사용할 수 있습니다. 이 시리즈의 각 게시물에는 저장소에 해당 태그가 있으므로이 앱의 다른 상태를 앞뒤로 전환 할 수 있습니다.

    파트 5의 끝에서 사용한 코드 와이 기사에서 시작한 코드는 Part-5로 표시되어 있습니다. 이 기사를 종료하는 데 사용한 코드는 Part-6으로 표시되어 있습니다.

    태그를 특정 커밋 ID의 별칭으로 취급 할 수 있습니다. GIT 체크 아웃을 사용하여 그들 사이를 전환 할 수 있습니다. 당신은 그것에 대해 더 읽을 수 있습니다.
    npm install -g @angular/cli@latest
    로그인 후 복사
    로그인 후 복사
    로그인 후 복사
    로그인 후 복사
    <<> 따라서 일어나서 실행하려면 (최신 버전의 Angular CLI를 설치) 다음을 수행합니다.

    그런 다음 <🎜 https://www.php.cn/link/d11f133fa0ea545d48291f9b0a72b2d

    todo 응용 프로그램을 방문하십시오.
    npm uninstall -g @angular/cli angular-cli
    npm cache clean
    npm install -g @angular/cli@latest
    로그인 후 복사
    로그인 후 복사
    로그인 후 복사
    로그인 후 복사
    <:> angular 업데이트 : 우리의 공격 계획 <🎜 🎜> <,>이 기사에서는 Angular를 업데이트 할 때 다음을 배울 것입니다.

    angular 버전은 어떻게 작동합니까? angular를 업데이트하는 방법에 대한 지침을 어디서 찾을 수 있습니까? 코드를 Angular 4에서 angular 5로 업데이트하는 방법 (작성시, Angular 5는 최신 버전입니다).

    이 기사의 끝에서 다음에 대해 배울 것입니다.

    특정 각도 버전의 기본 의미

    angular 응용 프로그램을 업데이트하는 방법에 대한 정확한 지침을 어디서 찾을 수 있습니까? angular 5에 필요한 코드 변경 사항을 결정하는 방법 (있는 경우). 시작하자!

    각도 버전의 의미 <🎜 🎜> 번성하는 생태계를 지원하기 위해서는 각도가 안정적이고 발전해야합니다.

    한편으로, Angular는 미션 크리티컬 애플리케이션에 대한 최대 안정성을 제공하도록 설계되었습니다. 반면에 웹 기술의 최신 변경 사항을 지원하기 위해 적응하고 진화해야합니다.

    따라서 따라서 각도 팀은 시간 기반 릴리스주기와 시맨틱 버전을 사용하기로 결정했습니다.
    git clone git@github.com:sitepoint-editors/angular-todo-app.git
    cd angular-todo-app
    git checkout part-5
    npm install
    ng serve
    로그인 후 복사
    로그인 후 복사
    로그인 후 복사
    시간 기반 릴리스주기는 새로운 각도 버전 (Angular 5, Angular 6, Angular 7 등)이 몇 주 또는 몇 달마다 나타날 것으로 예상 할 수 있음을 의미합니다.

    시맨틱 버전화는 Angular의 버전 번호를 사용하면 업그레이드되면 응용 프로그램을 중단 할 것인지 예측할 수 있음을 의미합니다. 본질적으로 시맨틱 버전은 마이너 버전입니다. 따라서 버전 v1.3.8의 기본 버전 값은 1이고, 보조 버전 값은 3이고, 개정 값은 1입니다.

    새 버전이 릴리스되면 새 버전은 암시 적으로 코드의 변경 유형을 나타냅니다.

    시맨틱 버전을 추가 할 때 다음 규칙이 적용됩니다.

    각 증분은 1의 증분으로 숫자 증분됩니다.

    1. 오류를 수정할 때 수정 된 버전이 추가되고 코드는 뒤로 호환됩니다.

    2. 기능을 추가하고 코드가 뒤로 호환되면 전복이 추가되고 개정이 0으로 재설정됩니다 : <🎜 🎜>
    3. 코드가 호환되지 않도록하는 변경 사항을 구현할 때 (주요 변경이라고도 함) 주요 버전이 추가되고 마이너 버전과 개정은 0으로 재설정됩니다 : <🎜 🎜>.
      npm install -g @angular/cli@latest
      로그인 후 복사
      로그인 후 복사
      로그인 후 복사
      로그인 후 복사
    4. 시맨틱 버전 작성에 익숙하지 않은 경우이 간단한 시맨틱 버전 관리 안내서를 확인하십시오.

      Angular 팀은 시맨틱 버전을 시간 기반 릴리스주기와 결합하여 다음을 목표로합니다.

      새로운 개정은 매주 <🎜
      npm uninstall -g @angular/cli angular-cli
      npm cache clean
      npm install -g @angular/cli@latest
      로그인 후 복사
      로그인 후 복사
      로그인 후 복사
      로그인 후 복사
      입니다 새로운 전복이 매월 <🎜
    5. 새로운 메이저 릴리스는 6 개월마다 릴리스됩니다
    6. 공휴일이나 특별 행사가있을 수 있으므로 릴리스 계획은 석재로 설정되어 있지 않지만 다가오는 릴리스를 기대할 수있는 좋은 지표입니다.

      공식 각도 블로그와 공식 변경 로그를 따라 최신 개발에 최신 정보를 얻을 수 있습니다.

      시맨틱 버전 설정의 큰 이점은 응용 프로그램을 깨는 것에 대해 걱정하지 않고 개정 또는 파괴로 각도 응용 프로그램을 안전하게 업데이트 할 수 있다는 것입니다.
      git clone git@github.com:sitepoint-editors/angular-todo-app.git
      cd angular-todo-app
      git checkout part-5
      npm install
      ng serve
      로그인 후 복사
      로그인 후 복사
      로그인 후 복사
      그러나 새로운 메이저 버전이 나타나면 어떻게됩니까?
    7. Angular 업데이트 가이드 <🎜 🎜> 우리는 주요 버전이 중대한 변화를 가져올 수 있다는 것을 배웠습니다. 따라서 업데이트하면 기존 응용 프로그램이 중단 될지 어떻게 알 수 있습니까?
    한 가지 방법은 공식 변경 로그를 읽고 변경 목록을 보는 것입니다.

    더 쉬운 방법은 Angular 업데이트 안내서를 사용하여 Angular를 업데이트하는 것입니다. 현재 각도 버전과 업그레이드하려는 버전을 선택할 수 있으며 응용 프로그램에서 수행 해야하는 정확한 단계를 알려줍니다.

    <<>

    각도 TODO 적용의 경우 각도 4.0에서 Angular 5.0으로 업그레이드하려고합니다.

    응용 프로그램 복잡성 수준을 선택합시다.
      <<>
    • 우리는 응용 프로그램을 업데이트하기 위해 취해야 할 모든 단계에 대한 완전한 개요를 얻었습니다.
    • 대단해!
    • <🎜 🎜> 업데이트 전 <🎜 🎜 🎜> 업데이트하기 전에 <🎜 🎜> <<> 목록에는 12 개의 항목이 포함되어 있습니다. Angular Todo 응용 프로그램에는 아무런 프로젝트가 없으므로 다음 단계로 안전하게 이동할 수 있습니다.
    • 업데이트 기간 <🎜 🎜>

      <🎜 🎜> 업데이트 기간 <🎜 🎜> 목록에서 마지막 항목 만 응용 프로그램에 적용됩니다. 우리는 종속성을 업데이트해야하므로 프로젝트의 루트에서 제안 된 명령을 실행합시다.

      우리는 up and running <🎜 🎜> 섹션의 최신 버전으로 Angular CLI를 업데이트했기 때문에 로컬 버전도 업데이트했습니다. 응용 프로그램이 올바르게 실행 중인지 확인하려면 다음을 실행합니다.

      npm install -g @angular/cli@latest
      로그인 후 복사
      로그인 후 복사
      로그인 후 복사
      로그인 후 복사
      가 시작되지 않으면 <🎜 🎜> 디렉토리와 <🎜 🎜> 파일을 삭제 한 다음 <🎜 🎜>를 실행하여 <🎜 🎜> 디렉토리와 <🎜 🎜> 파일을 재현하십시오.

      <🎜 🎜> 업데이트 후 <🎜 🎜> <<> 업데이트 후 <🎜 🎜> 목록에 4 개의 항목이 포함되어 있으며 첫 번째 항목과 마지막 항목은 응용 프로그램에 적용됩니다. httpModule에서 httpclientModule로 전환

      RXJS/운영자에서 RXJS 운영자를 가져 와서 RXJS 파이프 라인 운영자 <🎜 🎜
      npm uninstall -g @angular/cli angular-cli
      npm cache clean
      npm install -g @angular/cli@latest
      로그인 후 복사
      로그인 후 복사
      로그인 후 복사
      로그인 후 복사
      를 사용하십시오.

      하나를 하나씩 해결합시다.

      httpModule에서 httpclientModule로 전환
      git clone git@github.com:sitepoint-editors/angular-todo-app.git
      cd angular-todo-app
      git checkout part-5
      npm install
      ng serve
      로그인 후 복사
      로그인 후 복사
      로그인 후 복사
      Angular 업데이트 가이드는 httpmodule에서 httpclientModule로 전환해야한다고 알려줍니다.

      Angular 버전 5.0.0에 대한 릴리스 노트를 확인하면 Angular 4.3 이상에 JSON 응답을 자동으로 처리하고 HTTP 인터셉터를 지원하는 새로운 HTTPClient가 제공됩니다. ng serve 코드를 업데이트하려면 httpmodule을 httpclientModule로 바꾸고 httpclient 서비스를 주입하고 모든 node_modules 호출을 삭제해야합니다. package-lock.json <<> <🎜 🎜>를 열고 httpmodule : <🎜 🎜>를 교체합시다 npm install httpclientModule 사용 : <🎜 🎜> node_modules 다음으로, 우리는 새로운 httpclient가 자동으로 응답을 구문 분석하기 때문에 HTTP 서비스 대신 httpclient 서비스를 사용하고 코드의 모든 <🎜 🎜> 호출을 삭제해야합니다. package-lock.json <,> 파트 3에서는 Apiservice라는 서비스에 모든 HTTP 관련 코드를 집중하고 있으며 현재이 접근법의 이점을 누리고 있습니다.

      따라서 하나의 파일 만 업데이트하면

      를 열고 대체하겠습니다.

      <<> 사용 : <🎜 🎜>

      우리는 httpmodule의 이전 클래스를 httpclientModule의 새로운 클래스로 대체합니다. 보다 구체적으로, 우리는 다음을 대체합니다

      • <<> import { Http, Headers, RequestOptions, Response } from '@angular/http'; import { HttpClient, HttpErrorResponse, HttpHeaders } from '@angular/common/http'; <: :> 라인 81 : <🎜
      • <🎜 🎜>
      • <: :> 라인 90 : <🎜 <🎜 Response HttpErrorResponse
      • <: :> 라인 93 : <🎜
      • Headers HttpHeaders
      • <:> 우리가 달리면 : <🎜 🎜>
      • 그리고 브라우저를 <🎜 🎜 https://www.php.cn/link/03e03424a898e574153a10db9a4db79a로 탐색하십시오. return new RequestOptions({ headers }); 프로젝트 2 : RXJS 운영자를 RXJS/운영자에서 가져 와서 RXJS 파이프 라인 연산자를 사용해야합니다. return { headers }; RXJS 파이프 라인 연산자 사용 Angular 5는 RXJS 5.5.2 이상을 사용하도록 업데이트되었습니다.
      • <5.> 버전 5.5로 시작하여 RXJS에는 배관 가능한 연산자가 제공됩니다. 공식 문서는 다음과 같이 말합니다
      파이프 가능한 연산자는 다음 서명으로 함수를 반환하는 기능입니다.

      당신은 필요한 연산자를 위치에서 추출합니다 (
      npm install -g @angular/cli@latest
      로그인 후 복사
      로그인 후 복사
      로그인 후 복사
      로그인 후 복사
      (복수!). 또한 사용 범위와 같이 필요한 관찰 가능한 생성 방법을 직접 추출하는 것이 좋습니다.

      이것은 복잡하게 들리지만 기본적으로 우리가 이전에 묶인 방법을 사용한 곳을 의미합니다.

      이제 <🎜 🎜>에서 연산자를 가져 와서

      메소드를 사용하여 적용해야합니다.

      파이프 가능한 연산자의 주요 이점은 다음과 같습니다

      <-sh> 그들은 나무가 흔들리고 있지 않아 사용되지 않은 코드를 제거하여 도구가 응용 프로그램 패키지의 크기를 줄일 수 있습니다.

      그들은 정상적인 기능이므로 고유 한 사용자 정의 파이프 작업자를 쉽게 만들 수 있습니다.

      <🎜 🎜>

      메소드는 코드에 미치는 영향을 최소화합니다.
      우리의 응용 프로그램에는 리팩토링 해야하는 두 가지 프로젝트가 있습니다 : Apiservice 및 Todoscomponent.

      <'s> 먼저, <T, R>(source: Observable<T>) => Observable<R>를 열어 보자

      <<> 우리는 <🎜 🎜>에서
      피펫 가능한 연산자를 가져 와서 <🎜 🎜> <🎜 🎜 <🎜 <🎜
      의 모든 발생을 업데이트합니다.

      <'s 's> 다음으로, rxjs/operators를 열어 보자.

      마찬가지로, <🎜 🎜> 피펫 가능한 연산자를
      에서 가져 와서 <🎜 🎜>로 <🎜 🎜>로 가져옵니다.
      그게 다야! 우리의 응용 프로그램의 사슬 연산자는 각도 업데이트 가이드가 우리를 지시하는 것처럼 배관 가능한 연산자로 대체되었습니다.
      npm uninstall -g @angular/cli angular-cli
      npm cache clean
      npm install -g @angular/cli@latest
      로그인 후 복사
      로그인 후 복사
      로그인 후 복사
      로그인 후 복사
      로 이동하면. 우리가 실제로 각도 5를 실행 중인지 확인하기 위해 요소 검사관을 열 수 있습니다. angular는 실행중인 버전의 값으로

      속성을 ​​에 추가합니다. 우리는 , 우리가 각도 5.2.9를 실행하고 있음을 나타냅니다.

      미션이 완료되었습니다! 우리의 응용 프로그램은 Angular 5.2.9로 성공적으로 업그레이드되었습니다.

      우리는 많은 것을 다루므로 우리가 배운 것을 검토합시다. How to Update Angular Projects to the Latest Version

      요약
      첫 번째 기사에서 우리는 방법을 배웠습니다

      angular cli ng-version를 사용하여 TODO 응용 프로그램을 초기화하십시오 단일 TODO를 나타내는 TODO 클래스를 만듭니다 tododataservice 서비스를 작성하여 Todo를 작성, 업데이트 및 삭제하십시오. appComponent 구성 요소를 사용하여 사용자 인터페이스 app-root를 표시하십시오 응용 프로그램을 GitHub 페이지에 배포하십시오. ng-version="5.2.9"

      두 번째 기사에서, 우리는 appcomponent가 대부분의 작업을 다음과 같이 위임하도록 재조정했습니다.

        todolistcomponent todo list 를 표시합니다
          adolistitemcomponent가 단일 할 일을 표시하려면 입니다
            TodolistheAderComponent가 새로운 TODO 를 만듭니다
              todolistfootercomponent는 얼마나 많은 토도가 남아 있는지 보여줍니다.

              세 번째 기사에서 우리는 방법을 배웠습니다

              시뮬레이션 된 REST API 백엔드를 만듭니다

              API URL을 환경 변수로 저장합니다 나머지 api

              와 통신하기 위해 애비서를 만듭니다 새로운 Apiservice를 사용하려면 Tododataservice를 업데이트하십시오

              비동기 API 호출을 처리하려면 AppComponent를 업데이트하십시오 단위 테스트를 실행할 때 실제 HTTP 호출을 피하기 위해 APIMOCKSERVICE를 만듭니다.

    위 내용은 각도 프로젝트를 최신 버전으로 업데이트하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿