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 Workspace to create a monorepository of different Angular projects and libraries. There are also other less known alternatives like ngx-rocket, wizdm, jhipster…
- Angular config: Since the last versions of Angular it is possible to configure more precisely the compilation rules in order to secure your code against errors. If you are starting a new project we recommend that you look in detail at these following rules in the official documentation: Angular compiler options:
strictTemplates, fullTemplateTypeCheck, strictInjectionParameters...
- Typescript config: Since Typescript version 2 it is also possible to increase the rigor of the Typescript compiler by adding the strict flag. This will activate all strict typing verification rules. Indeed activate
noImplicitAny, noImplicitThis, alwaysStrict, strictBindCallApply, strictNullChecks, strictFunctionTypes and strictPropertyInitialization. More detail in the official documentation: Typescript compiler options. In order to keep your codebase clean it is also recommended to enable
noUnusedLocals and noUnusedParameters.
- Rules When you generate a new Angular project with
Angular CLIthen automatically two tools are installed by default to ensure the quality of the code:
TSLint. The rules are the default. We recommend adding a third tool called
Prettierand then configuring the code formatting rules that will allow you to structure the visual of your code, for example the number of characters per line. Second, code quality rules dictate the use of best coding practices. The recommended approach is to use
Prettierfor code formatting, and let
TSLinttake care of code quality concerns. Warning
TSLintis now deprecated but still widely used in Angular, consequently we still recommend it however in the future
ESLinttypescript support will be more sustainable.
- 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
git commit, install a monitoring tool such as
Sentry, an integration and continuous deployment system
CI/CDand why not also
Storybookin 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
CSSlanguage but for a large project it seems more suitable to use a preprocessor tool such as
LESS. These two tools have quite similar functionalities, in short they allow to extend the functionalities of CSS (mixins, variables, nesting, inheritances, functions) however
SASSis largely the most used tool today.
- 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 anycase, we recommend visiting our article on libraries in the resources section...
- UI lib: Regarding the user interface there is still a choice, at least the official Google components module for Angular called
Materialalready allows to have 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, it is possible to use an external library such as
Akitaor an alternative and light solution such as
- Translations lib: The internationalization of the application is also to be expected from the start of the project, at present there are four recognized solutions: the official tool
locl. We recommend
translocofor its easy-to-use advanced features, such as lazy loading of translations.
- Change detection: Regarding the change detection mechanism there is the choice between two options: by default then the detection of changes will be supported by the library included in Angular called
Zone.js. Otherwise it is possible to use
Zone.jsentirely, which will improve the performance of the application but will complicate development especially for inexperienced developers....
- Structure of the rooting: 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 used to configure the routing to have a
- Structure of the ui: In addition, depending on the complexity of the UI, it is possible to manage the display of the different blocks in several ways: simple, embedded views, view teleportation...