Route Config & Links — Series 3

Preview — 3 of 10 questions

What's the practical difference between these two route entries?

javascript

export const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'settings', loadComponent: () => import('./settings.component').then(m => m.SettingsComponent) },
];

AHomeComponent is imported and bundled up front, available as soon as the app loads — visiting /home doesn't trigger any extra network request. SettingsComponent is split into its own separate chunk, only downloaded the first time someone actually navigates to /settings — smaller initial bundle, at the cost of a brief extra load the first time that route is visited

Bcomponent is deprecated syntax; every route should use loadComponent instead

CloadComponent only works for components that have no @Input()s

DBoth behave identically; loadComponent is purely a naming convention with no bundling effect

What would go wrong if { path: '**', component: NotFoundComponent } were moved to be the first entry in this array instead?

javascript

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

ANothing — route order has no effect on matching

BThe app would fail to compile, since ** must always be declared last by a build-time check

C** matches any URL, and Angular's router tries routes in the array's order, using the first one that matches. Placed first, it would match every single navigation — /, /about, anything — before the router ever got a chance to try the more specific routes below it, so HomeComponent and AboutComponent would never render at all

DPlacing ** first would make it only match URLs with no path segments at all

Where does each link actually navigate to?

javascript

<!-- currently on /products/42 -->
<a routerLink="reviews">Reviews</a>
<a routerLink="/reviews">All Reviews</a>

AThe first (routerLink="reviews", no leading slash) is resolved relative to the current route — landing on /products/42/reviews. The second (routerLink="/reviews", leading slash) is an absolute path from the application root, landing on /reviews regardless of the current URL

BBoth navigate to the exact same place, /reviews

CThe first is absolute and the second is relative — leading slash makes a path relative in Angular's router

DA leading slash is purely cosmetic in routerLink and has no effect on the resulting URL

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