Creating an application in Angular 18

In this article we will look at creating a new Angular 18 application.

The Angular documentation advises installing ng globally:
angular.dev/tools/cli/setup-local#install-the-angular-cli

sudo npm install -g @angular/cli

After running the command:

ng new buy-and-fly

It is worth noting that there is no obvious need for this. You can use ng from the application itself, where you need to add yarn(npm) before launching.

To create a project, just npx is enough.

npx -p @angular/cli ng new buy-and-fly

Everything is the same without global CLI.

The following files were generated:

 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

For convenience, let's create a git flow:

git flow init

If you don't have the gitflow package, you can safely skip this step.
Let's create a new brunch:

git flow feature start config-workspace

Then delete package-lock.json:

rm package-lock.json

Since I prefer yarn, let's make the default yarn:

yarn set version stable

More information about yarn on the official website - yarnpkg.com
Since pnpm still causes problems, for simplicity we will use the standard nodeLinker:

yarn config set nodeLinker node-modules

Remove dependencies that were installed by npm:

rm -rf node_modules

In order not to bother choosing where to add new vendors, let's combine dependencies and devDependencies.

As a result, we get the following 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"
}

Exclude generated files in .gitignore from the repository:

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

Install dependencies:

yarn

Add changes to git:

git add .

Commit:

git commit -m “[workspace] Change package manager”

In the next article we will configure linters and IDEs.

Links

All sources are on github, in the repository - github.com/Fafnur/buy-and-fly

You can watch the demo here - buy-and-fly.fafn.ru/

My groups: telegram, medium, vk, x.com, linkedin, site

The above is the detailed content of Creating an application in Angular 18. For more information, please follow other related articles on the PHP Chinese website!