Start a new Angular project

Before starting the development of a new Angular application it is important to take the time to ask the necessary technical questions in order to make the right fundamental decisions and therefore to be able to integrate, from the start of the new project, the right architectural foundations and configuration for your web project. You will find below the checklist of the different options possible when launching a new business project.

• Workspace: The first question to ask is which tool to use to generate the kernel of the application. In most cases it is recommended to use Angular CLI as configuration and updates will be almost automatic. However it is also possible to use Nx to create a monorepository of different Angular projects and libraries. There are also other less known alternatives like ngx-rocket, wizdm, jhipster…
• Angular config: Angular lets you configure the compilation rules precisely in order to secure your code against errors. New projects are created in strict mode by default (strictTemplates, strictInjectionParameters, strictInputAccessModifiers), if you are working on an older project we recommend that you look in detail at these rules in the official documentation: Angular compiler options.
• Typescript config: The strict flag of the TypeScript compiler, enabled by default in new Angular projects, activates all the strict type-checking rules such as noImplicitAny, noImplicitThis, alwaysStrict, strictBindCallApply, strictNullChecks, strictFunctionTypes, strictPropertyInitialization and useUnknownInCatchVariables. More details in the official documentation: TypeScript compiler options. In order to keep your codebase clean it is also recommended to enable noUnusedLocals and noUnusedParameters.
• Rules: Code formatting rules structure the visual aspect of your code, for example the number of characters per line, while code quality rules enforce the best coding practices. The recommended approach is to use Prettier for code formatting and to let ESLint with angular-eslint (installed with ng add angular-eslint) take care of code quality concerns. TSLint and Codelyzer are deprecated: if an existing project still uses them, migrate it to ESLint.
• Tooling: In a company, it is important to set up certain tools in order to industrialize the way you work and automate repetitive tasks as much as possible. This is why we recommend setting up a hook for each git commit (for instance with Husky and lint-staged), install a monitoring tool such as Sentry, an integration and continuous deployment system CI/CD and why not also Storybook in order to be able to share with your team your common components.
• UI css: During the initialization of the project you must also know what type of style language you want to use, indeed for a small project or a website it is still possible to use the native CSS language but for a large project it seems more suitable to use a preprocessor tool such as SASS or LESS. These two tools have quite similar functionalities, in short they allow to extend the functionalities of CSS (mixins, variables, nesting, inheritances, functions) however SASS is largely the most used tool today. Note that native CSS now supports variables and nesting, and that Tailwind CSS is a popular utility-first alternative supported by the Angular CLI.
• Util lib: There are hundreds of third-party libraries for the Angular ecosystem, there is no need to use all of them, however some are useful in any case, we recommend visiting our article on libraries in the resources section.
• UI lib: Regarding the user interface there is still a choice, the official Angular Material library and its Component Dev Kit (CDK) already provide a set of components and UI primitives. However there are a dozen other more complete UI libraries, we recommend browsing each of them on the libraries page from the resources section.
• Store lib: The management of the state of your application is also very important. For simple needs, Angular signals inside services are often enough, for larger applications it is possible to use an external library such as NgRx (Store or SignalStore) or NGXS. Note that Akita is no longer maintained.
• Translations lib: The internationalization of the application is also to be expected from the start of the project, at present there are three recognized solutions: the official @angular/localize package (with the ng extract-i18n command), Transloco or ngx-translate. We recommend Transloco for its easy-to-use advanced features, such as lazy loading of translations, while the official solution offers the best performance since translations are compiled at build time.
• Change detection: Historically change detection relied on the Zone.js library, which triggers a change detection after every asynchronous event. Zoneless change detection, stable since Angular 20.2 and the default for new projects since Angular 21, schedules it from signals, the async pipe and template events instead, which improves performance and makes debugging easier. Combine it with the OnPush strategy for the best results.
• Rendering: Decide early whether you need server-side rendering or prerendering with @angular/ssr, for instance for SEO or performance. It can be enabled when the project is created with ng new --ssr.
• Build and tests: New projects use the esbuild-based application builder with a Vite development server, and Vitest is the default unit test runner since Angular 21 (Karma is deprecated). For end-to-end tests we recommend Playwright or Cypress.
• Routing structure: All Angular projects use the routing mechanism associated with a primary outlet. However for some complex user interfaces comprising several distinct parts it can be useful to configure the routing to have secondary outlets.
• UI structure: In addition, depending on the complexity of the UI, it is possible to manage the display of the different blocks in several ways: simple components, embedded views, view teleportation (portals), @defer blocks...