Angular - my initial setup

Starting a new Angular project is always an exciting moment. Whether building a simple dashboard or a large-scale enterprise application, Angular gives you a solid foundation to scale and organize your code. But before you dive into component logic and API integration, there are some essential first steps to set yourself up for success. In this article, I will cover how I am creating a new project and what additional steps I take.

Project creation

Angular CLI

The Angular CLI (Command Line Interface) is the official tool for creating and managing Angular projects. If you haven't already, install it globally via npm:

npm install -g @angular/cli

Once installed, verify it works:

ng version

Create a New Project

To generate a fresh, new project, run this command, assuming that my-awesome-app is the name of your app. Most of the time, I use the project's name as the first part of the app name and -app or -web app to indicate that it is a client part of my whole project. The -api suffix is used for the backend part, but let's run the command:

ng new my-awesome-app

Angular CLI will ask a few questions:

• Which stylesheet format would you like to use? (Choose between CSS, SCSS, Sass, etc.)

  Tip: other options than CSS are mostly related to the project where the UI is really customized

• Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)

  Tip: Say yes if you have some static, server-side generated views or SEO needs.

• Would you like to use the Server Routing and App Engine APIs (Developer Preview) for this server application?

  Tip: Only ask if the previous was "yes." Say yes if you also need the express server to serve Your app and deploy it as a regular NodeJs app. It could be helpful if You want to hide Your external api address.

CLI scaffolds the project with a recommended structure and installs all necessary dependencies.

Understand the Project Structure

Once the project is created, familiarize yourself with the key folders:

• src/app/ – your application code (components, services, etc.)
• angular.json – Angular CLI configuration
• package.json – dependencies and scripts

Understanding the structure early helps you stay organized as your app grows.

Run the Development Server

Spin up the development server:

cd my-angular-app
ng serve

Now go to http://localhost:4200 – you’ll see the Angular welcome screen.

Tip: You can add the -o parameter to the serve command so the CLI will also open the app in the browser for You.

---

Project configuration

Prettier

Prettier is a powerful tool for formatting code to make it clean and structured. It can be used with many coding languages, including JavaScript, TypeScript, and HTML. To add it to the project, first of all, we need to install the following:

npm install --save-dev --save-exact prettier

Then, we need to create a .prettierrc file, which is used to configure prettier. By adding it to the repository, we can easily achieve the same formatting as other developers on our project. Properties that I set in projects are:

• singleQuote - value: true, I prefer to have single quotes; for me, it is more readable
• bracketSameLine - value: true, To have > signs in the same line in the HTML,
• printWidth - value: 80, this property is used to define how many characters each line has; it is helpful to keep readability in pull requests, for example, in GitHub or BitBucket.
• trailingComma - value: all, it is especially valuable for reducing changed lines of code

To add it to Your ide, please visit instruction page.

NX

Nx is a powerful tool for working with mono-repositories. It also has rich support for the newest versions of Angular. One typical use case is to split an app into dedicated domains/libraries and give each a dedicated role in the whole project, such as a library for users, departments, or roles. Each of those roles can contain a dedicated type of sub-library. Recommended types (also according to docs) are:

• feat - the type used to keep components used for business logic, which can utilize API calls, compute data, etc.
• ui - type used for pure presentation components, like list rendering or form structure, they accept inputs and trigger data via outputs, without any of the providers,
• data-access - type used to define API calls or how the data is stored, primarily based on the services
• models - this type is not mentioned in the docs, but from my experience, having a dedicated place for types is nice.

NX can create new angular projects, and the existing ones can be converted.

NgRx

In the NX section, I mentioned a data-access library. This type of library can also contain a so-called store. The Store is used to keep a dedicated, respective piece of app data, such as a user list or document types. To work with the stores, we can use NgRx, which provides a set of dedicated tools for each store/state. The key part of this tool is based on the Redux pattern, so we have:

• store - to keep the data in the current state
• reducer - to take the current state of the data, change it, and put it in the store once again,
• actions - they can be called by a dispatch operation and trigger proper reducers with proper data,
• side-effect - whenever we want to use external data, like data from the HTTP call.

On the other hand, NgRx is not a must-have since we use just the typical service and keep the state there. You should consider NgRx if your app has some common data that is reused across the whole app and also to keep the data operations clean.

Tip: A nice browser plugin can be used to check how the state has changed over time.

Storybook

Storybook is a tool for providing a sandbox for components. It is an excellent tool because we can display each component separately and provide the required inputs and providers. This sandbox can also be shared with the design team or any other team member to discuss the components and play with them without working the whole app. Like its name, this tool is related to stories, and each story can define many pre-made variants that are easily switchable. Many cool plugins allow us to run UI tests or check accessibility.

Tip: Nx can configure Storybook for You out-of-the-box.

UI library

There are many great UI libraries, but based on my experience, I will focus only on two.

Angular Material

The Angular Material library is maintained by the Google team, so it covers the feeling and support of Angular's newest features well. This library follows an approach to design called material. The downside is the lack of different components, but on the other hand, we are also getting CDK, which helps us create our components with a drag-and-drop feature or using portals.

PrimeNg

I am heavily using PrimeNg at the moment because it covers most of my UI needs and has many components that are easy to set and style. The downside is that there is a wait time before the new version of Angular will be supported. Also, the templating mechanism is sometimes tricky to understand.

---

Final Thoughts

The beginning of any Angular project sets the tone for your development experience. Taking these initial steps—setting up the CLI, understanding the structure, and trying external libraries—which I mentioned in this article—is the groundwork for maintainable, scalable code.

Happy coding! 🚀