Angular 13: Создаем приложение админки со страницей входа

Angular 13: Создаем приложение админки со страницей входа Angular

Всем привет, любители Angular. Совсем недавно записал туториал на ютуб про создание административной панели на ангуляре, но совсем забыл поделиться им здесь. Поэтому встраиваю видео сюда + парочка советов и команд, которые я использую в видео.

Чтобы упростить некоторые вещи, я вставлял уже готовую верстку (написал заранее) в проект (ее вы можете найти по ссылке в конце статьи), однако, весь функционал компонентов, модулей, гвардов я писал с нуля, чтобы было все наглядно и понятно!

Видео вышло практически на 1,5 часа. Представляете, сколько бы это заняло, если бы я не подготовил заранее верстку?

Angular 13: Создаем приложение админки со страницей входа

Разумеется, само видео:

Проблемы с которыми вы можете столкнуться

Visual Studio Code может некорректно читать пути для автоматического импорта, для этого в файл tsconfig вставьте следующий код (Об этом я говорю в видео и показываю):

"typeRoots": [
  "node_modules/@types",
  "node_modules/@angular",
  "node_modules/@angular/common",
  "node_modules/@angular/common/http",
]

Могут возникнуть проблемы и с установкой bootstrap, для этого сделайте вот что. Поочередно выполните следующие команды:

npm config set legacy-peer-deps true

Затем:

npm cache clean --force

И повторите установку снова:

ng add @ng-bootstrap/ng-bootstrap

Примечание для тех кто работает в ОС Windows. Если команды ng не работают у вас. Убедитесь, что консоль открыта с командой строкой (cmd), потому что иногда по умолчанию это PowerShell. (см. скрин ниже)

PowerShell и Command Prompt Visual Studio Code
PowerShell и Command Prompt Visual Studio Code

Ссылка на данный проект на GitHub (там же вы найдете и верстку, можете скопировать либо весь проект, либо верстку, смотрите сами): https://github.com/DeniDenx/angular-tutorial-for-youtube

Оцените статью

Добавить комментарий