An Interest In:
Web News this Week
- March 20, 2024
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
- March 15, 2024
- March 14, 2024
Convert NgModule Angular app to Standalone Component
We are going to convert the fresh Angular app that is generated with Angular cli which is using NgModule
to Standalone Component.
The code available on my Github profile.
Convert AppComponent to Standalone Component
To have standalone component we just need to pass standalone
property to @Component()
directive as with true
value.
So the AppComponent will be looks like the following
import {Component} from '@angular/core';import {RouterModule} from '@angular/router';@Component({ selector: 'app-root', standalone: true, template: `<router-outlet></router-outlet>`, imports: [RouterModule],})export class AppComponent {}
Side note
As we are using `router-outlet` component to out put the routed views, we need to import `RouterModule`.Other dependencies should be imported too.
Remove AppModule
To be able to remove AppModule
we need to move root initializations to main.ts
.
To have cleaner way of managing routes, let's create separate file called routes.ts
that exports first layer of route configs.
And it should be something like this
import {Routes} from '@angular/router';const routes: Routes = [ {path: '', redirectTo: 'appointment', pathMatch: 'full'}, { path: 'appointment', loadComponent: () => import('./app/pages/appointment/appointment.page') .then(mod => mod.AppointmentPage) }];export default routes;
Side note
As you can see, here I've used loadComponent
instead of loadChildren
and, that's because the AppointmentPage
is standalone component.
Update main.ts
Earlier the main.ts
was responsible to bootstrap the AppModule
and that was it!
But now, that we have the standalone AppComponent, it should bootstrap the application and also initialize the root provider modules. For example when we are going to import the RouterModule
, we actually need to call forRoot
method with passing the route configs to it.
So, the final main.ts
would be something like this
import {enableProdMode, importProvidersFrom} from '@angular/core';import { environment } from './environments/environment';import {bootstrapApplication} from '@angular/platform-browser';import {AppComponent} from './app/app.component';import {RouterModule} from '@angular/router';import routes from './routes';if (environment.production) { enableProdMode();}bootstrapApplication(AppComponent, { providers: [ importProvidersFrom( RouterModule.forRoot(routes) ) ]}) .catch(err => console.error(err));
That's it! Now we have an Angular application which is base on Standalone Component.
Thank you for your time.
If you liked this post, I guess you would like my posts on Linkedin.
Original Link: https://dev.to/ussdlover/convert-angular-app-to-standalone-component-angular-app-53lc
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To