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 strict active 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 CLI then automatically two tools are installed by default to ensure the quality of the code: Codelyser and TSLint. The rules are the default. We recommend adding a third tool called Prettier and 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 Prettier for code formatting, and let TSLint take care of code quality concerns. Warning TSLint is now deprecated but still widely used in Angular, consequently we still recommend it however in the future ESLint typescript 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 hook for each git commit, 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.
• 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 Material already 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 NGRX, NGXS, Akita or an alternative and light solution such as observable-store.
• 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 xi18n, transloco, ngx-translate or locl. We recommend transloco for 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 OnPush and deactivate Zone.js entirely, 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 secondary outlet.
• 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...