0

Code - https://github.com/suyashjawale/Angular16

I have generated my Angular 16 project using following command and selected routing to yes.

ng new myapp --standalone

And then I generated other components using

ng g c components/home

Since, i used --standalone the boilerplate files are different. (Eg. New file app.routes.ts)

enter image description here File Structure

Now I want to implement routing So I added the following code to app.routes.ts.

enter image description here app.routes.ts

enter image description here app.component.html

But the routing doesn't happen. Idk why?. I have restarted the app. still it doesn't work. So i implemeted loadComponent. But still it doesn't work. Code below.

enter image description here loadComponent way.

Am i doing anything wrong. It works with angular 15. But it has app.routing.module.ts. I have restarted the app but still it doesn't work.

FYI - component is standalone

enter image description here home.component.ts

Suyash Jawale
  • 190
  • 2
  • 13

1 Answers1

1

The interesting part is the main.ts. Here is a function called bootstrapApplication. This should look like this:

bootstrapApplication(AppComponent, {
  providers: [
    importProvidersFrom(HttpClientModule),
    provideRouter(APP_ROUTES),

    [...]
  ]
});

Important, too (for Standalone Components in your case): In your app.component.ts you need to import RouterLink, too. If you wanna use RouterLinkActive, too import it too:

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterLink, RouterLinkActive, RouterOutlet],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})

APP_ROUTES are your routes: Routes [ { path..... } ]

Flo
  • 2,232
  • 2
  • 11
  • 18
  • Yes, its there. https://github.com/suyashjawale/Angular16 – Suyash Jawale Jun 11 '23 at 15:09
  • It was a missing import. I have updated my answer. – Flo Jun 11 '23 at 15:21
  • I migrated my POC Project to Angular 16 successfully. The project is using RouterLink in many components. I had to implement it every component that requires routerLink. Is there any alternative to it? – Suyash Jawale Jun 12 '23 at 15:25
  • 1
    No. That is like standalone components work. In React, as example, you need to import all at the same way. – Flo Jun 12 '23 at 19:58