Изменения в package.json для перехода с Angular 2 на 4

Обычно я использую файлы здесь для руководства: https://github.com/angular/quickstart

Он предоставляет набор базовых исходных файлов, необходимых для приложения, и обычно обновляется с помощью Angular, поскольку он является частью документации Angular на angular.io.

Существует онлайн-приложение, которое поможет вам в (простом) процессе обновления 2 до 4: https://angular-update-guide.firebaseapp.com/

Вот хорошее видео на YouTube, в котором объясняется, как Мигрировать с Angular 2 на Angular 4

Резюмирую сказанное в видео. Переход с Angular 2 на Angular 4 — это трехэтапный процесс.

1. Удалите старую папку «node_modules», поскольку в ней есть ссылки на Angular 2.X.

2. Измените все версии @Angular с 2.X на 4.X и выполните «установку npm».

3. Вы можете получить сообщения о том, что эта версия несовместима с этой версией. Исправьте это, ошибка говорит вам. Посмотрите видео, как исправляются проблемы со сверстниками.

4. Запустите проект и проведите тщательный тест.

Вам не нужно вносить изменения в ts.config. Изменения, внесенные в package.json, кажутся правильными.

Пара моментов:

• Я думаю, что «машинопись» должна быть в «devDependencies», так как вам это не понадобится в режиме prod.
• Я рекомендую удалить "^" из всех ваших зависимостей b.c. точную версию лучше заблокировать
• Я также настоятельно рекомендую использовать "shrinkwrap", чтобы избежать свободных зависимостей внутри ваших зависимостей.

Чтобы установить последнюю версию Angular, удалите/переместите текущую папку node_modules. Затем:

npm cache clean
npm install

Для справки см. раздел «Обновление до 4.0.0» http://angularjs.blogspot.com/2017/03/angular-400-now-available.html

Мое решение в этих ситуациях состоит в том, чтобы использовать angular-cli для создания нового проекта в той версии angular, которую я хочу (почти всегда самая новая версия для меня), а затем добавить другие необходимые мне зависимости, позволяя диспетчеру пакетов разобраться, что версию, которую я должен иметь, или отстаиваю свое мнение об этом с помощью параметров команды моего менеджера пакетов.

Это позволяет мне быстро создать библиотеку поставщиков и быстро проверить, что все они будут загружаться без ошибок, используя «приложение работает!» проект, который предоставляет cli.

После завершения этого процесса у вас должен быть файл package.json, который вы можете просто вырезать и вставить в свой проект.

Еще одна вещь, на которую стоит обратить внимание, если вы еще не... Пряжа. Yarn — новый менеджер пакетов от наших друзей на facebook. Он новее и, следовательно, менее протестирован, чем npm, но у него есть несколько действительно хороших функций, и, по крайней мере, в моей настройке он работает примерно в 20 раз быстрее, чем npm. Другой комментатор упомянул термоусадочную пленку, которая является отличным инструментом, поэтому я подумал, что просто укажу другое решение в этой области.

Вам не нужно вносить изменения в файл package.json вручную, вы можете запустить эту команду, если вы используете Windows

npm cache clean

npm install @angular/common@next @angular/compiler@next @angular/compiler-cli@next @angular/core@next @angular/forms@next @angular/http@next @angular/platform-browser@next @angular/platform-browser-dynamic@next @angular/platform-server@next @angular/router@next @angular/animations@next --save

Это поможет

После того, как вы прокомментируете

вы должны обновить свой машинописный текст, а также можете попробовать изменить его в tsconfig.json

{
    "compilerOptions": {
        "target": "es5",
        "lib": ["es2016", "dom"] //or es6 instead of es2016(es7)
    }
}