Angular architecture. Update!
The code for this article is now available at GitHub. You can view the project here The structure is slightly different from the one discussed in this article, but builds on the same concepts and ideas. Finding a suitable folder structure for my Angular applications is something I’ve struggled with for a long time. This became a real issue in my first ever real-world Angular project — especially when the application grew in size. I ended up continuously adding new features with no real structure in place. The goal of this article is to help other developers in a similar situation. I want to underline that the practices used in this article is very applicable for my single use-case, and should by no means be strictly followed. Note! Angular Docs. Harounchebbi/angular-folder-structure: The project is based on best practices from the community, other github Angular projects and developer experience from production Angular projects.
Angular 6 Basics 19 - Creating and using multiple modules. Modular design and Lazy loading in Angular. Comprendre les modules Angular (NgModule) Nous avons traduit pour vous l’article Medium de notre formateur contributeur : comprendre les modules Angular.
La première structure de base que vous croiserez dans Angular, ce sont les NgModules. Mais c’est aussi la plus subtile et la plus complexe, à cause de différences de portée. La documentation officielle a mis à disposition toute une foire aux questions à propos des NgModules, et malgré tout cela reste compliqué à enseigner lors des formations que j’anime, cela perturbe les débutants, alors j’ai décidé de tout résumer dans cet article.
Pourquoi des NgModules ? Angular CLI le fait automatiquement, mais la première chose qu’il faut faire dans Angular est de charger le NgModule racine : Un NgModule sert à enregistrer tout ce que vous créez dans Angular, et les grouper ensemble (un peu comme un package Java ou un namespace en PHP / C#). Comment architecturer un projet Angular ? Nous avons traduit pour vous l’article Medium de notre formateur contributeur : comment architecturer un projet Angular ?
Il y a un an, je publiais Comprendre les modules Angular (NgModule). Cet article se focalisait sur un point technique : la portée, pour comprendre quand importer un NgModule. Vous devriez le lire d’abord, mais il n’expliquait pas comment organiser ses propres modules. Jusqu’à maintenant, pour architecturer un projet Angular, je suivais principalement ce qui était suggéré dans la doc d’Angular. Mais face à de gros projets, plusieurs problèmes sont apparus, et quelque chose n’allait pas. J’ai donc replongé dans la documentation d’Angular : il y a maintenant 12 longues pages pour expliquer comment fonctionnent les NgModule, dont une FAQ. J’ai donc pris le temps de repenser l’ensemble du sujet, pour implémenter une bonne architecture dans les applications Angular, avec ces objectifs :
Angular 6 Best Practices [5] - Using Angular Modules. Stop Using Shared Material Module - Angular inDepth. In this blog post, I will talk about a mistake I have made and have seen many developers doing it as well, which is a shared Material Module.
I am sure if you used Angular Material, you still have a SharedMaterial Module in your project, time to remove it. What is my Motivation# I am working on a new project which has many modules, and it has more than 20k Lines of Code, and I was working on making some modules as Lazy Loaded modules. I realized we are using the SharedMaterial module in all modules. First, I thought its ok, but I tried to do an experiment which proved its a bad idea. Time To Prove Ourselves Wrong# In my last project where we had our custom components like Grid, Tables, Forms and I did ended up using a big Shared Material Module, as all the components were written on top of Angular Material Component. Let’s create a new App, and we will cover what’s wrong with this approach and how it increases the bundle size.
Ng new demoapp now add the given script in package.json. How to Properly Structure Angular Code. Angular Folder Structure For Large Scale Enterprise Application. Avoiding common confusions with modules in Angular - Angular inDepth. Angular modules is a pretty complex topic.
Angular team has done a great job putting up a quite lengthy documentation page on NgModule that can be found here. It provides clear explanation to most of the topics but some areas are still lacking and thus often misunderstood by developers. I’ve seen people often misinterpret the explanation and use the recommendations incorrectly because they don’t understand how modules work on the lower level.
This article provides such in-depth explanation and clears up common misunderstanding I see every day on stackoverflow. Module encapsulation# Angular introduces the concept of module encapsulation in a way similar to ES modules. You’ll get an error: Template parse errors: ‘a-comp’ is not a known element This is because there’s no a-comp declared in the App module. And here is where encapsulation comes into play. And the same goes for other declarable types — directives and pipes: Modules hierarchy# platformBrowserDynamic().bootstrapModule(AppModule);