📷 by Annie Spratt
├── ComponentA
├── ComponentB
├── WebComponents
├── ElementA
│ └── SettingsHome
│ └── SettingsProfile
└── ElementB
└── ElementBComponent
<app-root modules-to-load="element-a, element-b"></app-root><element-a></element-a>

Can’t i just use RouterModule.forRoot()?

What aboutRouterModule.forChild()?

Can I even use the Angular Router in my Web Components?

const routes = [
{ path: '', component: SettingsHomeComponent, outlet: 'elementA' },
{ path: 'profile', component: SettingsProfileComponent, outlet: 'elementA' },
{ path: '**', redirectTo: '', pathMatch: 'full'}
<router-outlet name="elementA"></router-outlet>
Add RouterTestingModule inside element-a-routing.module.ts
Import ElementARoutingModule inside element-a.module.ts
Trigger initial navigation inside element-a.component.ts
this.router.navigate([{outlets: {elementA: 'YOUR_ROUTE'}}]);
<button [routerLink]="[{outlets: {elementA: 'YOUR_ROUTE'}}]"> Go to Settings</button>

But what if I want to see the the route changes in the Browser URL?

The outlet is appended to the path.
Angular can’t find the outlet route.
constructor(..., private hostLocation: HostLocationService) { }ngOnInit() {

Are there any other options?





Love podcasts or audiobooks? Learn on the go with our new app.


How to Build an Image Watermarking Tool with HTML Canvas


Custom Partials with Lerna and conventional-changelog

How To Build Your First Serverless API with AWS Lambda and API Gateway

Three takeaways from React Amsterdam 2017

npm ENOMEM erorr on Raspberry Pi

How To Secure Your NGINX Server (2022)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Timon Grassl

Timon Grassl


More from Medium

Top 9 Most Popular Angular JS Frameworks For The Year 2022!

Swagger UI + Angular & ReactJS + Customization

React vs. Angular: Which JS Framework Should You Choose?

Framework wars: React vs Angular