Создаем моно репозиторий на основе angular/cli без Nx или Lerna
Рассмотрим управление алиасами Typescript’а на базе стандартных инструментов angular’а, без использования сторонних решений таких как Nx или Lerna.
Конечно, это вряд ли можно назвать полноценным моно репозиторием, но основная функциональность с разделением кода и тестированием работает будет.
Создание нового приложения
Создадим новое приложение с помощью angular/cli. Для того, чтобы cli работало глобально, необходимо установить его глобально, в yarn:
yarn global add @angular/cli
или в npm:
npm install -g @angular/cli
Запустим команду создания нового приложения:
ng new big-trip
Мы создали big-trip приложение (название такое, так как мы иногда даём подобного рода тестовое задание, и всегда ждёшь от кандидата вау-вау, а получаешь — всплывшее из под снего RNB.
Настройка Jest
Так как karma это прошлый век, то установим Jest как основное ядро для тестирования. Отметим, что nx предоставляет уже настроенный jest.
Удалим karma.config.js, а также удалим все требуемые зависимости для karma.
Установим зависимости для jest:
yarn add -D ts-jest jest jest-preset-angular @types/jest @angular-builders/jest
Изменим tsconfig.spec.json:
Добавим конфиг для jest:
// jest.config.js
const { pathsToModuleNameMapper } = require('ts-jest/utils');
const { compilerOptions } = require('./tsconfig');
// It's dirty hack. Need to fix it.
const customModulePaths = pathsToModuleNameMapper(compilerOptions.paths);
for (const key of Object.keys(customModulePaths)) {
customModulePaths[key] = `<rootDir>/${customModulePaths[key]}`;
}
module.exports = {
globals: {
'ts-jest': {
tsConfig: '<rootDir>/tsconfig.spec.json',
stringifyContentPathRegex: '\\.html$',
astTransformers: [require.resolve('jest-preset-angular/InlineHtmlStripStylesTransformer')],
diagnostics: false
}
},
testMatch: ['**/+(*.)+(spec|test).+(ts|js)?(x)'],
transform: {
'^.+\\.(ts|js|html)$': 'ts-jest'
},
moduleFileExtensions: ['ts', 'js', 'html'],
testEnvironment: 'jest-environment-jsdom-thirteen',
preset: 'ts-jest',
moduleNameMapper: {
'^src/(.*)$': '<rootDir>/src/$1',
'^app/(.*)$': '<rootDir>/src/app/$1',
'^assets/(.*)$': '<rootDir>/src/assets/$1',
'^environments/(.*)$': '<rootDir>/src/environments/$1',
...customModulePaths
},
transformIgnorePatterns: ['node_modules/(?!@ngrx)'],
snapshotSerializers: ['jest-preset-angular/AngularSnapshotSerializer.js', 'jest-preset-angular/HTMLCommentSerializer.js'],
coverageReporters: ['html'],
setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts']
};
Запустим тесты:
ng test
Настройка линтеров
Все аналогично статье — Приводим Angular код в прорядок с помощью Prettier, tslint и eslint.
yarn add -D tslint-config-prettier tslint-plugin-prettier
yarn add -D eslint eslint-plugin-angular eslint-config-prettier eslint-plugin-prettier
Настройка angular/cli
Добавим ChangeDetection onPush по умолчанию в angular.json:
"schematics": {
"@schematics/angular:component": {
"style": "scss",
"changeDetection": "OnPush"
}
}
...
Так же намного поправим стартовый скрипт:
Настройка общих стилей
Аналогично статье — Настройка CSS предпроцессора в Angular с Nx, добавим общие стили в проект.
Установим сразу несколько библиотек:
yarn add @angular/cdk @angular/material bootstrap hammerjs
Создадим папку styles внутри папки src:
В angular.json добавим includePaths в architect.build.options:
...
"stylePreprocessorOptions": {
"includePaths": ["src/styles"]
},
...
Настройка Redux
Настроим redux аналогично статье — Redux в Angular с помощью Ngrx. Создание Store в Angular.
Добавим зависимости:
yarn add @ngrx/store @ngrx/router-store @ngrx/effects
yarn add -D @ngrx/schematics @ngrx/store-devtools
Украдём реализацию из medium-stories для root storage, адаптировав его, под наш репозиторий.
В папке src/libs создадим папку store, со следующим содержимым:
Подключим библиотеку в tsconfig:
..."paths": {
"@big-trip/store": ["src/libs/store/src/index.ts"],
"@big-trip/store/testing": ["src/libs/store/src/testing/index.ts"]
},
...
Подключим в core.module:
Конечно, есть одна вещь, без которой мы не можем обойтись — DataPersistence Nx.
Поэтому добавим только DataPersistence в проект:
yarn add @nrwl/angular
Портирование библиотек из Nx в Big-trip
Перенесём ранее разработанные библиотеки для Nx в данный репозиторий.
Это storage, responsive, translation, где каждой библиотеке соответствует своя статья:
- LocalStorage, SessionStorage для Angular Universal
- Internationalization в Angular с помощью ngx-translate
- Динамическое управление адаптивностью с помощью Angular и Redux
Дублировать код ещё раз не будем, просто посмотрите в репозитории.
Создание лейаута
В папке src/libs создадим папку layouts, внутри которой добавим еще 2 папки: components и containers.
Сгенерируем компоненты:
ng g component footer --skip-import
ng g component header --skip-import
ng g component base-layout --skip-import
Перенесём компоненты в созданные ранее папки.
Создадим файл layputs.common.ts:
И добавим импорты в layouts.module.ts:
Экспортируем данные из layouts lib в файле index.ts:
export * from './lib/containers/base-layout/base-layout.component';
export * from './lib/layout.common';
export * from './lib/layout.module';
Подключение и использование локальных библиотек
Обновим app.module и используем лейаут в app.component:
Сгенерируем модуль home и добавим в него следующее содержимое:
Теперь все это можно запустить и проверить работоспособность.
Запуск и тестирование
Запустим локальный сервер:
ng serve
Откроем страницу:
http://localhost:4200/
Как видно, лейаут отработал, а также Redux показал запущенные action’ы.
Теперь проверим тестирование с помощью jest, запустив команду:
ng test
Все тесты запускаются. Все отлично работает :)
Заключение
В итоге проделанной работы, было сделано:
- Сгенерировано приложение с помощью стандартных cli angular’а
- Была произведена замена karma на jest
- Были добавлены линтеры в приложение
- Были добавлены общие стили
- Был интегрирован Redux
- Был показан пример портирования Nx библиотек в разрабатываемый репозиторий
- Было показано как использовать репозиторий для создания собственных библиотек и их использование.
В следующей статье рассмотрим создание микро приложения с ипользованием данного подхода.
Спасибо за внимание!
Исходники
Все исходники находятся на github, в репозитории — https://github.com/Fafnur/big-trip.
Для того, чтобы увидеть проект на момент написания статьи, нужно выбрать tag — base-config.
git checkout base-config