Создаем моно репозиторий на основе angular/cli без Nx или Lerna

Published in

F.A.F.N.U.R

4 min readDec 24, 2019

Рассмотрим управление алиасами 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, где каждой библиотеке соответствует своя статья:

Дублировать код ещё раз не будем, просто посмотрите в репозитории.

Создание лейаута

В папке 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