Route Config & Links

Preview — 3 of 10 questions

How do you define application routes in an Angular standalone application?

javascript

// app.routes.ts
import { Routes } from '@angular/router';

export const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'users/:id', component: UserDetailComponent },
  { path: '**', component: NotFoundComponent },  // wildcard
];

// main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter } from '@angular/router';

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes),
  ],
});

AUse provideRouter(routes) in bootstrapApplication providers and define a Routes array

BExport routes from AppModule.declarations

CAdd routes to the @Component decorator's routes property

DImport RouterModule.forRoot(routes) in the root standalone component's imports

What is the purpose of <router-outlet> in a template?

javascript

@Component({
  selector: 'app-root',
  template: `
    <nav>
      <a routerLink="/">Home</a>
      <a routerLink="/about">About</a>
    </nav>

    <!-- Router renders matched component here -->
    <router-outlet />
  `,
  standalone: true,
  imports: [RouterOutlet, RouterLink],
})
export class AppComponent {}

AIt defines a navigation menu

BIt marks the location where the router renders the matched component

CIt creates a link to another route

DIt guards access to a protected area of the template

What is the difference between <a href="/about"> and <a routerLink="/about">?

javascript

@Component({
  template: `
    <!-- ❌ Full page reload — loses all Angular state -->
    <a href="/dashboard">Dashboard</a>

    <!-- ✅ Client-side navigation — no reload -->
    <a routerLink="/dashboard">Dashboard</a>
    <a [routerLink]="['/users', userId]">User {{ userId }}</a>
    <a [routerLink]="['/products']" [queryParams]="{ page: 2 }">Next page</a>
  `,
  standalone: true,
  imports: [RouterLink],
})
export class NavComponent {
  userId = '42';
}

AThere is no difference — both navigate to the same URL

BrouterLink only works for relative paths; href works for absolute paths

Chref triggers a full page reload; routerLink navigates using Angular's client-side router without a page reload

DrouterLink requires authentication; href does not

Answer all 10 questions (7 more), see explanations for every answer, and track your score.