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

Недавно я начал Angular 2 учебник в https://angular.io/docs/ts/latest/tutorial/.

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

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

Если я выполняю обновление npm Angular 2 или npm update angular2 @2.0.0beta.14, он просто ничего не делает.

Ответ 1

Команда npm update -D && npm update -S обновит все пакеты внутри package.json до их последней версии, в соответствии с их определенный диапазон версий. Вы можете прочитать об этом здесь.

Если вы хотите обновить Angular от версии до 2.0.0-rc.1, вам нужно вручную отредактировать package.json, так как Angular был разделен на несколько модулей npm. Без этого, поскольку angular2 указывает на 2.0.0-beta.21, вы никогда не сможете использовать последнюю версию Angular.
Список с некоторыми из наиболее распространенных модулей, которые вам нужно для начала работы, можно найти в реестре быстрого запуска.

Примечания:

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

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

Ответ 2

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

Он показывает последнюю доступную версию всех пакетов, указанных в вашем пакете. json. В отличие от npm outdated, он также способен редактировать ваш пакет .json, позволяя вам позже npm upgrade.

Установить

sudo npm install -g npm-check-updates

Использование

ncu для отображения

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

Ответ 3

Обновите до последней версии Angular 5

Угловые Dep-пакеты: npm install @angular/{animations,common,compiler,core,forms,http,platform-browser,platform-browser-dynamic,router}@latest --save

Другие пакеты, устанавливаемые с помощью угловой npm install --save [email protected] [email protected] [email protected]

Угловые пакеты Dev: npm install --save-dev @angular/{compiler-cli,cli,language-service}@latest

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

Другие пакеты, которые установлены как dev dev с помощью углового cli: npm install --save-dev [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected]

Установите последнюю поддерживаемую версию, используемую Angular cli (не делайте @latest): npm install --save-dev [email protected]

Переименуйте файл 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": {}
  }
}

Ответ 4

ОБНОВИТЬ:
Начиная с CLI v6, вы можете просто запустить ng update для автоматического обновления ваших зависимостей до новой версии.

Иногда с помощью ng update вы можете добавить флаг --force. Если вы сделаете это, убедитесь, что версия машинописного текста, который вы установили таким образом, поддерживается вашей текущей угловой версией, в противном случае вам может потребоваться понизить версию машинописного текста.

Также ознакомьтесь с этим руководством Обновление ваших 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, выполните:
    npm show @angular/compiler version

Ответ 5

Официальная страница npm предлагает структурированный метод для обновления угловой версии для глобальных и локальных сценариев.

1. Прежде всего, вам нужно удалить текущий угловой из вашей системы.

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 с npm 5 onwards

3.Установить угловое глобальное

npm install -g @angular/[email protected]

4. Настройка локального проекта, если у вас есть

rm -rf node_modules
npm install --save-dev @angular/[email protected]
npm install

Пожалуйста, проверьте то же самое по ссылке ниже:

https://www.npmjs.com/package/@angular/cli#updating-angular-cli

Это решит проблему.

Ответ 6

Если вы хотите установить/обновить все пакеты до последней версии, а вы работаете с окнами, вы можете использовать это в powershell.exe:

foreach($package in @("animations","common","compiler","core","forms","http","platform-browser","platform-browser-dynamic","router")) {
    npm install @angular/[email protected] -E
}

Если вы также используете cli, вы можете сделать это:

foreach($package in @('animations','common','compiler','core','forms','http','platform-browser','platform-browser-dynamic','router', 'cli','compiler-cli')){
    iex "npm install @angular/[email protected] -E $(If($('cli','compiler-cli').Contains($package)){'-D'})";
}

Это сохранит пакеты точные (-E), а пакеты cli в devDependencies (-D)

Ответ 7

Альтернативный подход с использованием npm-upgrade:

  • npm i -g npm-upgrade

Перейдите в папку проекта

  1. npm-upgrade check

Он спросит вас, хотите ли вы обновить пакет, выберите Да

Этот простой

Ответ 8

Просто начните здесь:

https://update.angular.io

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

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

enter image description here

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

Шаги расскажут, как использовать его :-)

Ответ 9

npm uninstall --save -dev angular-cli

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

ng update @angular/cli

ng update @angular/core --force

ng update @угловой/материал или npm я @угловой /cdk @6 @угловой/материал @6 --save

npm install typescript @'> = 2.7.0 <2.8.0'

Ответ 10

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

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

у меня было много проблем с обновлением и поддержанием моего приложения, дополняющего unitll, я позволил verbose lense сделать чек, а затем я запускаю

npm i

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

Ответ 11

Если вы ищете меня, просто обновляющего ваш проект до последней версии, это то, что работает со мной после 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