Как правильно обновить angular 2 (npm) до последней версии?

Недавно я запустил руководство по Angular 2 по адресу https://angular.io/docs/ts/latest/tutorial/ .

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

Если я просто обновляю npm, обновляются несколько модулей (предварительно загруженных с учебником), но не 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 был разделен на несколько модулей npm. Без этого, как указывает пакет angular22.0.0-beta.21 , вы никогда не сможете использовать последнюю версию Angular.
Список с некоторыми из наиболее распространенных модулей, которые вам понадобятся для начала работы, можно найти в репозитории быстрого запуска .

Ноты:

• Отличный способ оставаться в курсе последней версии ваших пакетов - это использовать, npm outdatedкоторый показывает вам все устаревшие пакеты вместе с их желаемой и последней версией.

• Причина , почему мы должны приковать две команды, npm update -Dи npm update -S, чтобы преодолеть эту ошибку , пока не будет исправлена.

Другой пакет хороший , который я использовал для переноса образуют бета - версию Angular2 для Angular2 2.0.0 finalISnpm-check-updates

Он показывает последнюю доступную версию всех пакетов, указанных в вашем package.json. В отличие от npm outdatedнего, он также может редактировать ваш package.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

Типы пакетов Dev: npm install --save-dev @types/{jasmine,jasminewd2,node}@latest

Другие пакеты, которые устанавливаются как dev dev с помощью angular cli: 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флаг. Если вы это сделаете, убедитесь, что версия машинописного текста, которую вы установили таким образом, поддерживается вашей текущей версией angular, в противном случае вам может потребоваться понизить версию машинописного текста.

Также ознакомьтесь с этим руководством. Обновление ваших проектов Angular

Только для пользователей bash

Если у вас Mac/Linuxвключен или запущен bash 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. Прежде всего, вам нужно удалить текущий angular из вашей системы.

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

2. очистить кеш

npm cache clean

РЕДАКТИРОВАТЬ

Как указал @candidj

npm cache cleanпереименован npm cache verifyс npm 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

Выберите версию, которую вы используете, и она предоставит вам пошаговое руководство.

Я рекомендую выбрать «Дополнительно», чтобы увидеть все шаги. Сложность - понятие относительное, и я не знаю, чьей дурацкой идеей была эта функция, но если вы выберете «Базовый», он не покажет вам все необходимые шаги, и вы можете пропустить что-то важное, что использует ваше «базовое» приложение. ,

Начиная с версии 6 есть новая команда Angular CLI, ng updateкоторая интеллектуально просматривает ваши зависимости и выполняет проверки, чтобы убедиться, что вы обновляете правильные вещи :-)

В шагах будет описано, как его использовать :-)

npm uninstall --save-dev angular-cli

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

нг обновление @ angular / cli

ng update @ angular / core --force

ng update @ angular / material или npm i @ angular / cdk @ 6 @ angular / material @ 6 --save

npm install typescript @ '> = 2.7.0 <2.8.0'

Лучший способ сделать это - использовать расширение (pflannery.vscode-versionlens) в vscode.

это проверяет все на соответствие и проверяет наилучшее соответствие.

У меня было много проблем с обновлением и поддержанием функциональности моего приложения. Я позволил многословной линзе выполнить проверку, а затем я запустил

нпм я

для установки вновь предложенных зависимостей.

Если вы похожи на меня, просто обновив свой проект до последней версии, вот что работает у меня с 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