DEV Community

Cover image for Создание приложения на Angular 18
Aleksandr Serenko
Aleksandr Serenko

Posted on

Создание приложения на Angular 18

#angular #javascript #webdev #tutorial

В данной статье рассмотрим создание нового приложения Angular 18.

В документации Angular советуют установить ng глобально:
angular.dev/tools/cli/setup-local#install-the-angular-cli

sudo npm install -g @angular/cli
Enter fullscreen mode Exit fullscreen mode

После запустить команду:

ng new buy-and-fly
Enter fullscreen mode Exit fullscreen mode

Стоит отметить, что явной потребности в этом нет. Можно использовать ng из самого приложения, где перед запуском нужно добавлять yarn(npm).

Для создания проекта достаточно просто npx.

npx -p @angular/cli ng new buy-and-fly
Enter fullscreen mode Exit fullscreen mode

generation app

Все тоже самое и без глобальных CLI.

Были сгенерированы следующие файлы:

 buy-and-fly
├── angular.json
├── package.json
├── package-lock.json
├── public
│   └── favicon.ico
├── README.md
├── server.ts
├── src
│   ├── app
│   │   ├── app.component.html
│   │   ├── app.component.scss
│   │   ├── app.component.spec.ts
│   │   ├── app.component.ts
│   │   ├── app.config.server.ts
│   │   ├── app.config.ts
│   │   └── app.routes.ts
│   ├── index.html
│   ├── main.server.ts
│   ├── main.ts
│   └── styles.scss
├── tsconfig.app.json
├── tsconfig.json
└── tsconfig.spec.json
Enter fullscreen mode Exit fullscreen mode

Для удобства заведем git flow:

git flow init
Enter fullscreen mode Exit fullscreen mode

Gitflow

Если у вас нету пакета gitflow, то можете смело пропустить этот шаг.
Создадим новую бранчу:

git flow feature start config-workspace
Enter fullscreen mode Exit fullscreen mode

Затем удалим package-lock.json:

rm package-lock.json
Enter fullscreen mode Exit fullscreen mode

Так как я предпочитаю yarn, сделаем yarn по умолчанию:

yarn set version stable
Enter fullscreen mode Exit fullscreen mode

Подробнее о yarn на официальном сайте - yarnpkg.com
Так как pnpm все еще вызывает проблемы, для простоты будем использовать стандартный nodeLinker:

yarn config set nodeLinker node-modules
Enter fullscreen mode Exit fullscreen mode

Удалим зависимости, которые были установлены npm:

rm -rf node_modules
Enter fullscreen mode Exit fullscreen mode

Чтобы не утруждать себя выбором, куда добавлять новые вендоры, объединим dependencies и devDependencies.

В итоге получим следующий package.json:

{
  "name": "buy-and-fly",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "serve:ssr:buy-and-fly": "node dist/buy-and-fly/server/server.mjs"
  },
  "private": true,
  "devDependencies": {
    "@angular-devkit/build-angular": "^18.0.5",
    "@angular/animations": "^18.0.4",
    "@angular/cli": "^18.0.5",
    "@angular/common": "^18.0.4",
    "@angular/compiler": "^18.0.4",
    "@angular/compiler-cli": "^18.0.4",
    "@angular/core": "^18.0.4",
    "@angular/forms": "^18.0.4",
    "@angular/platform-browser": "^18.0.4",
    "@angular/platform-browser-dynamic": "^18.0.4",
    "@angular/platform-server": "^18.0.4",
    "@angular/router": "^18.0.4",
    "@angular/ssr": "^18.0.5",
    "@types/express": "^4.17.21",
    "@types/jasmine": "~5.1.4",
    "@types/node": "^20.14.8",
    "express": "^4.19.2",
    "jasmine-core": "~5.1.2",
    "karma": "~6.4.3",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.1",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "rxjs": "~7.8.1",
    "tslib": "^2.6.3",
    "typescript": "~5.4.5",
    "zone.js": "~0.14.7"
  },
  "packageManager": "yarn@4.3.1"
}
Enter fullscreen mode Exit fullscreen mode

Исключим из репозитория генерируемые файлы в .gitignore:

# Custom
.yarn
.angular
*.patch
.husky/*
junit.xml
/junit
.env
package-lock.json
yarn.lock
.nx
src/i18n/source.xlf
Enter fullscreen mode Exit fullscreen mode

Установим зависимости:

yarn
Enter fullscreen mode Exit fullscreen mode

Добавим изменения в git:

git add .
Enter fullscreen mode Exit fullscreen mode

Закоммитим:

git commit -m “[workspace] Change package manager”
Enter fullscreen mode Exit fullscreen mode

В следующей статье настроим линтеры и IDE.

Ссылки

Все исходники находятся на github, в репозитории - github.com/Fafnur/buy-and-fly

Демо можно посмотреть здесь - buy-and-fly.fafn.ru/

Мои группы: telegram, medium, vk, x.com, linkedin, site

Top comments (0)

Read next

godswill_thompson_7a6b0e profile image

Understanding ETL pipeline

God'swill Thompson -

singhpritpal04 profile image

Routing in React with React Router Dom

Pritpal Singh -

vyan profile image

👨‍💻 Understanding and Using the `.env` File in React

Vishal Yadav -

sincereclarke profile image

Day 1 [Job Search + Learning Python in back-end development]

remyclarke -