DEV Community

Cover image for Angular standalone router providers: an update
Ayyash
Ayyash

Posted on • Originally published at garage.sekrab.com

Angular standalone router providers: an update

Since standalone is still in preview, the documentation gives you no hints. You have to excavate to find some. On medium, Andrew Scott blogged about advancements made by Angular team on the router, when in standalone.

Alternative to importProvidersFrom

In our previous attempt to tear down the AppModule, the main.ts was rewritten

// main.ts bootstrap passing all providers from an existing NgModule
// using importProvidersFrom
bootstrapApplication(AppComponent, {
  providers: [
    importProvidersFrom(RouterModule.forRoot(AppRoutes)),
  ],
});
Enter fullscreen mode Exit fullscreen mode

The new proposed way is to use RouterModule

// new way with providerRouter in main.ts
bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(appRoutes),
  ]
});
Enter fullscreen mode Exit fullscreen mode

Rewriting our App Routes with options

Let's revisit our app.route in StackBlitz project and rewrite it.

// app.route rewriting the router providers using provideRouter
export const AppRouteProviders = [
  provideRouter(AppRoutes,
    // this is in place of scrollPositionRestoration: 'disabled',
    withInMemoryScrolling({
      scrollPositionRestoration: 'disabled',
    }),
    // in place of initialNavigation: 'enabledBlocking'
    withEnabledBlockingInitialNavigation(),
    // same configuration
    withRouterConfig({
      paramsInheritanceStrategy: 'always',
      onSameUrlNavigation: 'reload'
    }),
    // in place of  preloadingStrategy: PreloadService,
    withPreloading(PreloadService),
  ),
  // ...
];
Enter fullscreen mode Exit fullscreen mode

Bundle sizes

The article claims that when not using the sub features of the router, treeshaking should result in reduction in bundle size. I could not reproduce that. As a matter of fact, the provideRouter almost always generated a slightly larger main bundle. The lazy loaded and common bundles were not affected.

Donno. You be the judge.

RESOURCES

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (0)

The Most Contextual AI Development Assistant

Pieces.app image

Our centralized storage agent works on-device, unifying various developer tools to proactively capture and enrich useful materials, streamline collaboration, and solve complex problems through a contextual understanding of your unique workflow.

👥 Ideal for solo developers, teams, and cross-company projects

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay