SKBLAB Angular defaults

Установка

Подключение пакета

Заменить в packages.json все стандартные пакеты на "@skblab/angular-defaults": "^9.0.0", удалить node_modules и package-lock.json, запустить npm install.

ВАЖНО Yarn не тестируется, не поддерживается, и скорее всего работает не правильно.

{
    "dependencies": {
        "@skblab/angular-defaults": "^12.0.0"
    },
    "devDependencies": {
    }
}

Подключение полифиллов

Заменить стандартную часть файла polyfills.ts на импорт @skblab/angular-defaults/polyfills.

import '@skblab/angular-defaults/polyfills';

Состав полифиллов описан ниже.

Подключение линтера tslint

Добавить в секцию extends файла tslint.json импорт из @skblab/angular-defaults/tslint.json.

{
    "extends": [
        "@skblab/angular-defaults/tslint.json"
    ]
}

Подключение линтера eslint

Добавить в секцию extends файла tslint.json импорт из @skblab/angular-defaults/.eslintrc.json.

{
    "extends": [
        "./node_modules/@skblab/angular-defaults/.eslintrc.json"
    ]
}

Настройка IDE

Для включения поддержки Angular в WebStorm добавить в раздел devDependencies пакет "@angular/core": "*".

{
    "dependencies": {
        "@skblab/angular-defaults": "^12.0.0"
    },
    "devDependencies": {
        "@angular/core": "*"
    }
}

Для включения подсказок для Angular и RxJS в WebStorm добавить пути к node_modules/@angular и node_modules/rxjs в раздел Languages & Frameworks > JavaScript > Libraries настроек.

Обновление

ВАЖНО Нельзя просто так обновить версию пакета, может произойти что угодно.

Для обновления нужно вернуть обратно все стандартные пакеты, прогнать инструкцию из https://update.angular.io/, и заменить стандартные пакеты на очередную версию @skblab/angular-defaults.

Angular Elements

Для включения полифилла добавить в файл polyfills.ts импорт document-register-element после импорта @skblab/angular-defaults/polyfills.

import '@skblab/angular-defaults/polyfills';

import 'document-register-element';

normalize.css

{
  "projects": {
    "project-name": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "node_modules/normalize.css/normalize.css"
            ]
          }
        }
      }
    }  
  }
}

ES5 Polyfills

Default Angular Polyfills

github:angular/angular-cli

// ES2015 symbol capabilities
import 'core-js/es/symbol';

// ES2015 function capabilities
import 'core-js/modules/es.function.bind';
import 'core-js/modules/es.function.name';
import 'core-js/modules/es.function.has-instance';

// ES2015 object capabilities
import 'core-js/modules/es.object.create';
import 'core-js/modules/es.object.define-property';
import 'core-js/modules/es.object.define-properties';
import 'core-js/modules/es.object.get-own-property-descriptor';
import 'core-js/modules/es.object.get-prototype-of';
import 'core-js/modules/es.object.keys';
import 'core-js/modules/es.object.get-own-property-names';
import 'core-js/modules/es.object.freeze';
import 'core-js/modules/es.object.seal';
import 'core-js/modules/es.object.prevent-extensions';
import 'core-js/modules/es.object.is-frozen';
import 'core-js/modules/es.object.is-sealed';
import 'core-js/modules/es.object.is-extensible';
import 'core-js/modules/es.object.assign';
import 'core-js/modules/es.object.is';
import 'core-js/modules/es.object.set-prototype-of';
import 'core-js/modules/es.object.to-string';

// ES2015 array capabilities
import 'core-js/modules/es.array.concat';
import 'core-js/modules/es.array.is-array';
import 'core-js/modules/es.array.from';
import 'core-js/modules/es.array.of';
import 'core-js/modules/es.array.join';
import 'core-js/modules/es.array.slice';
import 'core-js/modules/es.array.splice';
import 'core-js/modules/es.array.sort';
import 'core-js/modules/es.array.for-each';
import 'core-js/modules/es.array.map';
import 'core-js/modules/es.array.filter';
import 'core-js/modules/es.array.some';
import 'core-js/modules/es.array.every';
import 'core-js/modules/es.array.reduce';
import 'core-js/modules/es.array.reduce-right';
import 'core-js/modules/es.array.index-of';
import 'core-js/modules/es.array.last-index-of';
import 'core-js/modules/es.array.copy-within';
import 'core-js/modules/es.array.fill';
import 'core-js/modules/es.array.find';
import 'core-js/modules/es.array.find-index';
import 'core-js/modules/es.array.iterator';

// ES2015 string capabilities
import 'core-js/modules/es.string.from-code-point';
import 'core-js/modules/es.string.raw';
import 'core-js/modules/es.string.trim';
import 'core-js/modules/es.string.iterator';
import 'core-js/modules/es.string.code-point-at';
import 'core-js/modules/es.string.ends-with';
import 'core-js/modules/es.string.includes';
import 'core-js/modules/es.string.repeat';
import 'core-js/modules/es.string.starts-with';
import 'core-js/modules/es.string.anchor';
import 'core-js/modules/es.string.big';
import 'core-js/modules/es.string.blink';
import 'core-js/modules/es.string.bold';
import 'core-js/modules/es.string.fixed';
import 'core-js/modules/es.string.fontcolor';
import 'core-js/modules/es.string.fontsize';
import 'core-js/modules/es.string.italics';
import 'core-js/modules/es.string.link';
import 'core-js/modules/es.string.small';
import 'core-js/modules/es.string.strike';
import 'core-js/modules/es.string.sub';
import 'core-js/modules/es.string.sup';
import 'core-js/modules/es.string.match';
import 'core-js/modules/es.string.replace';
import 'core-js/modules/es.string.search';
import 'core-js/modules/es.string.split';

import 'core-js/modules/es.parse-int';
import 'core-js/modules/es.parse-float';

import 'core-js/es/number';
import 'core-js/es/math';
import 'core-js/es/date';

import 'core-js/modules/es.regexp.constructor';
import 'core-js/modules/es.regexp.to-string';
import 'core-js/modules/es.regexp.flags';

import 'core-js/modules/es.map';
import 'core-js/modules/es.weak-map';
import 'core-js/modules/es.set';
import 'core-js/modules/web.dom-collections.for-each';
import 'core-js/modules/web.dom-collections.iterator';
import 'core-js/modules/es.promise';
import 'core-js/modules/es.json.to-string-tag';

import 'regenerator-runtime/runtime';

Добавлено

import 'core-js/modules/es.array.includes';
import 'core-js/modules/es.array.reverse';
import 'core-js/modules/es.object.values';
import 'core-js/modules/es.object.entries';
import 'core-js/modules/es.string.pad-start';
import 'core-js/modules/es.string.pad-end';

Известные проблемы установки

Обновление tslint, возможно придётся деградировать его до 5.x

npm WARN [email protected] requires a peer of tslint@^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of tslint@^5.11.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of tslint@^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @fimbul/[email protected] requires a peer of tslint@^5.0.0 but none is installed. You must install peer dependencies yourself.

Стандартные ошибки v9

npm WARN [email protected] requires a peer of node-sass@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of fibers@>= 3.1.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of html-webpack-plugin@^2.21.0 || ~3 || >=4.0.0-alpha.2 <5 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of bufferutil@^4.0.1 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of utf-8-validate@^5.0.2 but none is installed. You must install peer dependencies yourself.