Adding Routing to Angular Project using Stackblitz

Question

I'm fairly new to Angular and just discovered Stackblitz. I'm trying to practice the concept of routing. Is there a way to get the terminal to show up in Stackblitz to add routing to a project? I know you can right click to add things like components, services, directives etc but is there something for routing or do you have to manually do it?

I tried looking this up but all the search results link to a stackblitz project.

you can add dependencies or change the package.json file, but by defect it's already add the `@angular/router` — Eliseo, Jul 18 '21 at 12:58

score 1 · Answer 1 · answered Jul 18 '21 at 13:00

There are different types of routing in Angular so to ask for a stackblitz without understanding exactly what you want to learn about is difficult.

The angular router itself is very powerful and allows one to pass data, use authentication guards - both written and prebuilt, and allows hash routing and on page fragment routing and if one knows a little bit about rxjs dynamic route building from a database as well it offers state and a ton of features that are in the router itself - it allows one to know when the instance of the route begins and ends - and it also allows us to get the route tree and parameters as well as pass data into the router directly.

The best place to read about it is on Angular.io https://angular.io/guide/routing-overview

As well there are some fantastic courses available to take like https://angular-university.io

Or a more generalist approach on https://fireship.io

and of course one can find free content about angular on coursera or edx.

H3AR7B3A7 · Answer 2 · 2021-07-23T19:01:04.093

You can't get a command line, but you can add packages using the input field on the bottom left side.

You could just create a project in a decent IDE of your choice and throw it in a stackblitz when you want to ask a question. To work on a project with other people you should use a repo like GitHub.

Here's a basic example of routing with and without a separate routing module.

In app.module.ts:

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Basic example of a app-routing.module.ts:

const routes: Routes = [
  // A simple route to a component
  // Be aware that the order is important in angular
  // The first route that fits the format will be used
  { path: 'login', component: LoginComponent },
]

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Or your app.module.ts without a seperate routing module:

const routes: Routes = [
  { path: 'login', component: LoginComponent }
]

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule
    RouterModule.forRoot(routes)
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Adding Routing to Angular Project using Stackblitz

2 Answers2