Что не так с кодом async\await?

Ну да, логично. Функция то у вас не async.
А если поставить Async - будет всё сразу выполняться. forEach не подойдет видимо. Сделайте обычный цикл, внутри которого будет цикл. Вот если что для спавки: https://stackoverflow.com/questions/37576685/using...

Как применять знания javascript?

Калькулятор то так себе. Не учитывает приоритет операций.

Как в gulp выполнить таски по очередно?

Либо поставить 4.x либо этот плагин использовать: https://www.npmjs.com/package/gulp-series

Как перебрать такой массив?

Как-то сложно.

var obj = {}; // наш объект после reduce
Object.keys(obj).sort((a, b) => obj[a] - obj[b]).map(key => console.log(key, obj[key]))

Не говнокод ли я пишу?

Адекватные модули вполне себе прикручены. Не хватает неймспейов только.
По поводу стрелочных функций их плюс не в том, что избавились от функции, а в том что bind не нужен.
Ну и в целом, если ваши знания основаны на 2014 ~ годе - они очень сильно устарели.
jQuery в 2017 году не нужен. Весь его смысл был в том, что браузеры вели себя неадекватно и это была огромная коллекция полифилов с более-менее удобным API.

Не говнокод ли я пишу?

Советовать jQuery в 2017?
Проще уж на ES6 писать, arrow functions и сахар для классов, деструктуринг и прочие приятные фишки сильно уменьшат бойлерплейт.

Плачу кровавыми слезами. Что это? Не боитесь сборщика мусора? Не надо так. Вообще global space - не есть хорошо.

Это, очевидно просто пример работы функционала на jsFiddle. Такое чувство, что вы как линтер по коду прошлись.
Ну и шедевр:

В остальном, javascript не идеальный вариант, чтобы показывать задротство в области clear code. И с паттернами у него беда.

Статья 2014 года и ссылка на объектную модель как подтверждение фразы "беда с паттернами"?

Почему резко тормозит анимация JS?

залейте на планкер или фидл. Вряд ли кто-то будет это за вас делать.

Возможно ли динамически загрузить модули в Angular 2+ без знания о его reference?

Максим Иванов: эм. нет.
Посмотрите ваш первый скриншот. Вот то что вы понапихали в модуль сравните вот с этим:

{
            modulePath: 'app/components/userRating/',
            moduleFile: 'userRatingModule.js',
            moduleName: 'UserRatingModule',
            componentName: 'UserRating',
            roles: ['Viewer', 'Admin'],
            hideMenu: false,
            title: 'User Rating'
},

Заполните свойства модуля по аналогии. По сути важны только modulePath и ComponentName

Как корректно тестировать класс в angular?

Я два раза перечитал ваш пост, но так и не понял, что значит эта фраза:

Насколько я понимаю, сам по себе этот компонент ничего не создает, потому что обращение к нему из верхнего компонента в конструкторе...

В любом случае - писать какой-то код только ради прохождения тестов - всегда плохая практика.

Возможно ли динамически загрузить модули в Angular 2+ без знания о его reference?

Максим Иванов: я как-то слабо представляю как для такого написать plunker.
Ну bundle - это ваш собранный js файл модуля.
Попробуйте использовать конфиг модуля как я писал выше подставив правильные значения для путей файла. После этого в конфиге роутера уже не нужен будет loadChildren, т.к. вы уже загрузили модуль и заново грузить компоненты не нужно. System.js должен создавать для бандла файл %bundle_name%.ngfactory, который и используется для загрузки модуля (см. https://github.com/angular/angular/blob/master/pac...). Т.е. в modulePath нужно указать путь до папки с бандлом.

Возможно ли динамически загрузить модули в Angular 2+ без знания о его reference?

Ну то есть, нам обязательно иметь ts файлы, исходники модулей?

Наоборот же. Не нужны исходники модулей. Я об этом и написал.

А покажите как у вас какой-нибудь бандл выглядит.

Возможно ли динамически загрузить модули в Angular 2+ без знания о его reference?

По той ссылке тоже js бандл. Посмотрите структуру объекта который передавался в примере:

{
            modulePath: 'app/components/userRating/',
            moduleFile: 'userRatingModule.js',
            moduleName: 'UserRatingModule',
            componentName: 'UserRating',
            roles: ['Viewer', 'Admin'],
            hideMenu: false,
            title: 'User Rating'
        },

Compiler - это не compiler ts -> js, а можно сказать аналог сервиса $compile из ng1, только для всего, а не только для DOM.

Как с помощью vanillaJs сделать подобное?

Нет.
Вы каждый раз перевешиваете обработчик - это очень плохо.
Я же вам предложил способ.
заводим глобальную переменную var currentLayer = null;
Вешаем на обработчики слоев функцию типа такой:

function onLayerClick() {
    currentLayer = vnu // ещё два для vne и pol;
}

На обработчики цвета вешаем такую:

function onColorClick() {
    clearLayers();
    if (currentLayer) {
        currentLayer.style.fill = "green"; // для других цветов тоже самое.
    }
}
function clearLayers() {
    vnu.style.fill = "none";
    vne.style.fill = "none";
    pol.style.fill = "none"
}

p.s. в том виде что я написал получится всё равно очень громоздко и некрасиво. Чтобы написать красиво надо научиться хотя бы писать функции, которые возвращают функцию, например для цветов можно сделать так:

function onColorClick(color) {
    return function() {
         if (currentLayer) {
            currentLayer.style.fill = color; 
         }
    }
}

И на каждый элемент вешать уже просто element.onclick = onColorClick("green" /* red, ... */ );
Другой вариант - использовать делегирование, тут это вполне уместно.
Почитайте побольше про события, что такое делегирование, как работать с циклами, это очень поможет.

Как сделать смягчение скролла в Mozilla Firefox?

Никита Полевой: https://jsfiddle.net/u7t64uL9/
Не на сам скролл конечно, а na wheel, скролл не канселится.

Как обрабатывать данные в случае, если может придти массив объектов или просто объект?

SvetlanaDubovik: незабудьте предусмотреть вариант когда к вам пришел пустой ответ (если это конечно не пустой массив).

Как обрабатывать данные в случае, если может придти массив объектов или просто объект?

SvetlanaDubovik: нет.
Вы вообще не пишите обработчик для одного объекта. Принудительно делаете из входных данных массив и работаете с ним. Если пришел один элемент - трансформируете его в массив из одного элемента.

Как скомпилировать директиву полученную из json?

Роман Ямчук: тогда $compile сервис.
Посмотрите раздел Example на этой странице https://docs.angularjs.org/api/ng/service/$compile. Там примерно то, что вам нужно.

Куда пойти учиться в it для "корочки"?

Никита: сначала должно появиться образование. А потом уже требования.

Как настроить 404 ошибку?

А люди за это ещё деньги платят. в 2017 году)))

Как заставить отрендереться компонент в Angular 2, если автоматически проверка не перерендеривается?

Это прикольно, но не лучше бы было если бы это было чем-то типа миксина для сервиса. Т.е. интерфейс iObservable(название плохое), который умеет грубо говоря setState(state) и onStateChange(cb)
Основной плюс я вижу в том, что не будет нужен "name".
p.s. почему вы шаблонные строки не используете? Намного же приятнее с ними