Angular modules - Angular Tutorial

- [Instructor] Angular modules represent a collection of closely related files that work together. This might include things like components, services, or even pipes. They help Angular figure out how all the parts of your application work together. Starting in Angular version 14, you can use something called standalone components, which lets you use files in your project without assigning them to a module. We'll talk more about standalone components later in this course. As of this recording, standalone components are still new, and most existing projects will likely use modules to organize their code. This is why all Angular developers should know how to use modules. I opened our project here in a GitHub Codespace. I talk about why we use Codespaces earlier in this course, so for now, just think of them as an easy way to share and write code without installing anything on your local machine. Let's take a look at the app module file, which is the first module Angular loads at app launch. I'll go to the source folder, open up the app folder, and click on app.module.ts. Always use the module.ts ending when naming your module files. The Angular CLI tool does this for you when you generate new files using the command line tool. Angular modules are always TypeScript classes. We use the NGModule decorator, here on line nine, to declare a class as a module. I talked about decorators earlier in this course. For now, just think of them as metadata that tells Angular what your code should do and how to inject that code into the rest of the application. The NGModule decorator takes a configuration object as its only argument. The declaration's property is an array of all the components, directives, and pipes that belong to this module. In our case, we have only one file, the app component. You can declare as many items as you need here, but keep in mind that code belongs to only one module at a time. You'll get a compiler error if you try to assign code to more than one module. The imports property is an array of all the external modules we want to make available inside this module's template. Here, we import the AppRoutingModule, which gives us access to Angular's page navigation features. The BrowserModule, which is all the low-level infrastructure Angular needs in all projects. The common module, which has all of Angular's built-in pipes and directives, and the HTTP client module, which gives us access to the HTTP client service for making fetch requests. The next config option is called exports, and it's an array of all the code in this module we want to make available for use in other modules. This module doesn't export anything, which is why the value is an empty array. The provider's property is an array of all the code we want to make available in this module through Angular's dependency injection. This is different from importing a module for use in the template. As a general rule, you put modules in the imports array and things like services in the providers array. We'll talk more about services later in this course. Finally, here's a special property called bootstrap. This property tells Angular which components to load when you launch your application. In our case, we load only one component, the app component. When using a module architecture, you must have at least one module in your project. We call this module the root module, and this is the only place you should ever declare a bootstrap property. All properties in the module config are optional, which means you can leave properties with empty arrays, like this, or get rid of them, like this. Both styles are correct and you can use whichever style you like. I'll reset it to keep the empty arrays. We export the module class itself on line 23. Our module class is called AppModule, and it's an empty class. You could use this class to do work very early in the bootstrap process, but that's rare. I've never seen it. This class is usually empty because all it needs to do is tell Angular which components to load on app launch. To actually launch the application, we export the module class here and import it into the main.ts file here. We pass the AppModule into this bootstrapModule method on Line six. Bootstrap module does all the work of actually loading our code into memory and displaying components in the dom. The bootstrap module function can take a configuration object as an optional second argument. This is where you might set global settings like view encapsulation, or a missing translation strategy. Check out Angular's official documentation to find out more about all the things you can do with Angular modules and the bootstrap process. There are several modules in our example app here. I recommend you take some time and explore the code to see how all the modules interact with each other and with Angular.