Меняем SystemJS на Angular CLI БЕСПЛАТНО!

Всем привет ;),

Сегодня я вам расскажу как мы избавились от SystemJS ;), Именно этим я и занималась последовании пару дней. В целом не чего сложного, но немного подводных камней. У нас есть небольшой проект под кодовым названием "MiningInfoAggregator" это Visual Studio MVC web apps, и раньше он дружил SystemJS, но SystemJS нам не нравился, потому что:

• Медленная загрузка страниц (т.к каждый пакет подтягивается отдельно)
• Новые пакеты не поддерживают SystemJS.

И так мы решили наш фрон перетащить в отдельный подпроект с кодовым названием "MiningInfoAggregator.Front".

Установка angular/cli и создание тестового проекта

Я надеюсь у вас уже установлен Node. Если нет то тогда быстрей бежим на nodejs.org.
Открываем командную стоку(CMD) переходим в папку с нашим проектом.
Устанавливаем глобально последний angular/cli, он на еще не раз пригодиться ;)
 >npm install -g @angular/cli@latest
После установки проверим, что angular/cli установился, заодно и проверим что он умеет:
 >ng --help
Мы у себя в проектах очень любим yarn в качестве менеджера пакетов, он гораздо быстрее чем npm. Следующая команда задет yarn в качестве менеджера пакетов, и теперь все созданные проекты в angular/cli будут использовать yarn.
 >ng set --global packageManager=yarn
Пришло время создать свой первый проект в angular/cli, Назовем его MiningInfoAggregator.Front, а также не будем создавать новый git репозиторий.
 >ng new MiningInfoAggregator.Front --routing --skip-git

Миграция в новый под проект

В проекте создалась папка MiningInfoAggregator.Front где и расположился тестовй пример от angular/cli. Все что нам нужно аккуратненько подправить следующие файлы расположенные в папке MiningInfoAggregator.Front/src/app:
app.component.css
app.component.html
app.component.spec.ts (этот файл с тестам, пока его можно не трогать)
app.component.ts
app.module.ts
app-routing.module.ts

В нашем проекте эти файлы (аналогичные) лежали в корне, а не в папке app по этому пришлось вставить и подправить пути ;) Все остальное просто "заехало" как по маслу (копипаст с прошлого пректа).

В нашем проекте используются такие пакеты как:
@angular/material
bootstrap
primeng
angular2-notifications
@angular/cdk
Нам нужно добавить их, в MiningInfoAggregator.Front для этого в yarn.lock смотрим версию нужных нам пакетов и
 >yarn add @angular/[email protected] [email protected] [email protected] [email protected] @angular/[email protected]

Да да да, кто не знал yarn запоминает версию установленного пакета, что гарантирует одинаковую конфигурацию продукта у всех участников.

Далее нам нужно добавить стили в MiningInfoAggregator.Front/src/styles.css для material и primeng
@import '~@angular/material/prebuilt-themes/indigo-pink.css';

@import url('../node_modules/primeng/resources/themes/omega/theme.css');
@import url('../node_modules/primeng/resources/primeng.min.css');
@import url('../node_modules/bootstrap/dist/css/bootstrap.min.css');

И немного подправить наш index.html, добавить две ссылки:
< link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
< link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">

Обратите внимание на тег <app-root>, он должен соответствовать вашему основному компоненту, в нашем случаи это MiningInfoAggregator.Front/src/app/app.component.ts сточка кода со словом "секлетор"
selector: 'app-root',

Если мы все сделали правильно то теперь мы можем собрать проект
 >ng build
После этого в папке MiningInfoAggregator.Front\dist появятся:
inline.bundle.js
main.bundle.js
polyfills.bundle.js
styles.bundle.js
vendor.bundle.js
а также шрифты и картинки

Или запустить сервере, сервера запускает на http://localhost:4200/
 >ng serve

До свидания SystemJS!

И так нам осталось зачистить наш основной проект ;)
Удаляем папку app, мы ведь из нее все скопировали в наш под проект MiningInfoAggregator.Front
Подчищаем App_Start/BundleConfig.cs, раньше у нас тут были "бандлы", но теперь эту работу за нас делает angular/cli (по сути "вебпак" и его плагины, ну и ладно)

Уделяем из MVC web apps package.json, systemjs.config.js, yarn.lock tsconfig.json, node_modules и все что было в папке Scripts, теперь добавляем в папку Scripts,
inline.bundle.js
main.bundle.js
polyfills.bundle.js
styles.bundle.js
vendor.bundle.js

И не забываем подправить _Layout.cshtml, нужно удалить старые ссылки и добавить новые:
< script type="text/javascript" src="~/Scripts/inline.bundle.js">
< script type="text/javascript" src="~/Scripts/polyfills.bundle.js">
< script type="text/javascript" src="~/Scripts/styles.bundle.js">
< script type="text/javascript" src="~/Scripts/vendor.bundle.js">
< script type="text/javascript" src="~/Scripts/main.bundle.js">

Убеждаемся, что в файле Views/Home/Index.cshtml у нас правильный тег <app-root>.

Осталось закинуть в корень "шрифты и картинки", да да я знаю, что это не хорошо но мои попытки не успешны =( Может кто поможет?

Всем кто дочитал до конца большое спасибо!