How I’ve Shifted My Angular App to a Standalone Components Approach
Here’s how you can avoid using ngModules in Angular.
The standalone components concept was introduced with Angular v14 as an experimental feature, which was announced as optional, easily coexisting with the traditional ngModule-based approach.
Standalone components can be considered game changers in Angular-based applications, due to massive simplification and reducing bundle size by removing unnecessary imports.
Also, here are a few Angular dev tools you could try in 2023:
Now you don’t have to declare components in any module, as long as a standalone flag is being applied. Refer to the code example below:
You’ve probably already noticed a couple of things that look different, compared to the component declaration in the ngModule-based approach. The imports array is available for standalone components.
Now, you’re able to import other standalone components and modules if you need them. But, the biggest advantage is that you do not have to import the entire CommonModule, which will allow you to use all the Angular functionalities (directives, pipes, etc.).
You can import only those required in your component. It’s a huge achievement! Just imagine how this will impact your bundle size and entire ecosystem!
You’re able to generate the standalone component using Angular CLI like below:
ng g c test --standaloneThis is how your automatically generated component class would look like:
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
@Component({
selector: 'app-test',
standalone: true,
imports: [CommonModule],
templateUrl: './test.component.html',
styleUrls: ['./test.component.scss'],
})
export class TestComponent {}It already contains CommonModule imported, you can leave it as is or remove it and import directives, and pipes when you need them!
With the Angular v15 release, the standalone components feature became stable and more and more projects started to migrate gradually into the standalone direction.
When we create a new project, it’s pretty straightforward to start with a new approach, but when your application is being developed for a while you would need to do slightly more if you want to resign from using app.module.ts in your application.
💡 Tip: Once you’ve created your standalone Angular components, you can use an open-source toolchain such as Bit to “harvest” them from your codebase and share them on bit.dev. This would let you reuse these components across all multiple projects. Bit also comes with a component development environment for Angular that provides proper tools, configurations and runtime environment for your components, providing versioning, testing, and dependency management features to simplify the process.
Learn more here:
Build and share independent Angular components — Get Started
Crate Angular components with Bit
bit.dev
Let us have a look at the main.ts file which holds the bootstrapping information:
Application is using bootstrapModule approach where AppModule declared in app.module.ts file is being passed as an argument. In other words, your application is being bootstrapped with your AppModule.
We need to change that into:
Now, your application will be bootstrapped with the bootstrapApplication function from the @angular/platform-browser package. Looks like a great start right?
Now you need to move all the providers from app.module.ts and the routing definition. In my case routing was abstracted out to the separate app-routing.module.ts file and now I am able to remove AppRoutingModule as well. All I need is the routes definition from there. This is how AppRoutingModule looked like before this activity:
transformed into root-routes.ts file with exported rootRoutes definition:
Just so you know:
import path to lazy standalone component loading contains index in my case, as I am using barrel exports approach, which simplifies the import management, but this is a separate topic covered within my other article: https://medium.com/bitsrc/how-ive-cleaned-up-my-application-with-barrel-exports-and-path-aliases-in-angular-16-27a216f46e29.
My containers were already migrated into the standalone approach, so I could remove the module entirely and add export to the routes const and rename it to avoid confusion moving forward.
After these changes, I was able to update my main.ts file to include root routing:
Looks nice and tidy, right? No need to use ngModules again! Thank you, Angular Team!
Read more of my articles here!:
Build Angular Apps with reusable components, just like Lego
Bit’s open-source tool help 250,000+ devs to build apps with components.
Turn any UI, feature, or page into a reusable component — and share it across your applications. It’s easier to collaborate and build faster.
Split apps into components to make app development easier, and enjoy the best experience for the workflows you want:
