Як правильно оновити кутовий 2 (н / хв) до останньої версії?

Нещодавно я розпочав навчальний посібник Angular 2 за адресою https://angular.io/docs/ts/latest/tutorial/ .

і зупинився з Angular 2 beta 8. Тепер я відновив підручник, а остання бета-версія - бета-14.

Якщо я просто роблю npm update, кілька модулів (попередньо завантажених підручником) будуть оновлені, але не Angular2 (я бачу, що з npm ls ).

Якщо я оновлюю npm update angular 2 або npm update angular2@2.0.0beta.14, це також нічого не робить.

Команда npm update -D && npm update -Sоновить всі пакунки всередині package.jsonдо останньої версії відповідно до визначеного діапазону версій . Більше про це можна прочитати тут .

Якщо ви хочете оновити Angular від версії до 2.0.0-rc.1, то вам потрібно буде вручну відредагувати package.json, оскільки Angular був розбитий на кілька модулів в хвилину. Без цього, як вказує пакет angular22.0.0-beta.21 , ви ніколи не будете користуватися останньою версією Angular.
Список із найпоширенішими модулями, які вам знадобляться для початку, можна знайти в сховищі швидкого запуску .

Примітки:

• Класний спосіб бути в курсі останньої версії ваших пакетів - це використання, npm outdatedяке показує вам усі застарілі пакунки разом з їх потрібною та останньою версією.

• Причина, чому нам потрібно зав'язати дві команди, npm update -Dі npm update -Sполягає в тому, щоб подолати цю помилку, поки вона не буде усунена.

Ще один приємний пакет, який я використовував для міграції, утворює бета-версію Angular2 на Angular2 2.0.0 final ISnpm-check-updates

У ньому відображається остання доступна версія всіх пакетів, вказаних у вашому пакеті.json. На відміну від npm outdatedцього він також може редагувати ваш package.json, що дозволяє вам робитиnpm upgrade пізніше.

Встановити

sudo npm install -g npm-check-updates

Використання

ncuдля відображення

ncu -u для повторного написання пакета.json

Оновіть до останньої кутової 5

Кутові пакети Dep: 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

Кутові пакети Dev: npm install --save-dev @angular/{compiler-cli,cli,language-service}@latest

Типи пакунків Dev: 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

Встановіть останню підтримувану версію, яку використовує кутовий кліп (не робіть @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прапор. Якщо ви зробите це, переконайтеся, що встановлена ​​вами версія встановленого сценарію підтримується вашою поточною кутовою версією, інакше вам може знадобитися зменшити версію typecript.

Ознайомтесь також з цим посібником Оновлення кутових проектів

Для баш користувачів

Якщо ви увімкнено 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
• Щоб перевірити останню стабільну @angularверсію, наявну в npm run:
  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

EDIT

Як вказував @candidj

npm cache clean перейменовано як npm cache verify з npm 5 і далі

3.Встановити кутовий в усьому світі

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-модернізації :

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" в іншому випадку .

З версії 6 є нова команда Angular CLI, ng updateяка розумно проходить ваші залежності і виконує перевірки, щоб переконатися, що ви оновлюєте правильні речі :-)

У кроках буде описано, як ним користуватися :-)

npm uninstall --save-dev angular-cli

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

оновлення @ angular / cli

оновлення @ angular / core --force

оновлення @ кутовий / матеріал або npm i @ angular / cdk @ 6 @ angular / material @ 6 - зберегти

npm встановити typecript @ '> = 2.7.0 <2.8.0'

Найкращий спосіб зробити це розширення (pflannery.vscode-versionlens) у vscode.

це перевірки на всі задоволення та перевірки на найкращу відповідність.

У мене було багато проблем з оновленням і збереженням мого додатка, функціонуючого unitll, я дозволив багатомовній лінзі зробити перевірку, а потім я запускаю

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