Angular getting URL paramters doesn't work as it should

Question

I need to retrieve URL queries as in www.website.com?a:b. For this I followed this official angular tutorial, leading me to this simple code inside my component:

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  this.route.queryParams.subscribe(params => {
    console.log(params)
  })
}

This triggers the following error in the console:

ERROR NullInjectorError: R3InjectorError(AppModule)[ActivatedRoute -> ActivatedRoute -> ActivatedRoute]: NullInjectorError: No provider for ActivatedRoute!

Event though it is not mentioned in the tutorial, I add ActivatedRoute to my app.module.ts. This generates a different error:

Error: NG0204: Can't resolve all parameters for ActivatedRoute: (?, ?, ?, ?, ?, ?, ?, ?).

I cannot tell why noone else has had this issue, does anyone know what the problem might be? Thanks.

?a:b isn't a query parameter. But also note ActivatedRoute is already provided (along with all of its dependencies) by the RouterModule, which you should have set up as shown in angular.io/guide/router#defining-a-basic-route. — jonrsharpe
– jonrsharpe, Commented Oct 17, 2022 at 23:46

Wesley Trantham · Accepted Answer · 2022-10-17 23:57:48Z

1

Most likely in your app.module or main.module file you need to add an import. If you look at this link, which is at the bottom of the page you have linked, you will see

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    // This is what provides the ActivatedRoute service
    // You likely don't need useHash: true, so you can leave it out
    RouterModule.forRoot(routes, { useHash: true })  // .../#/crisis-center/
  ],
  declarations: [
    AppComponent,
    PageNotFoundComponent
  ],
  providers: [

  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

answered Oct 17, 2022 at 23:57

Wesley Trantham

1,2749 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

xinthose · Accepted Answer · 2024-10-02 13:10:13Z

1

That is why I prefer to use parameters directly in the route.

app-routing.modules.ts

{ path: 'bible/:bookId/:chapterId/:verseIdStart/:verseIdEnd', component: BibleComponent },

bible.component.ts

  constructor(
    private route: ActivatedRoute,
  ) {
    const bookId: number = Number(this.route.snapshot.params.bookId) || 0;
    const chapterId: number = Number(this.route.snapshot.params.chapterId) || 0;
    const verseIdStart: number = Number(this.route.snapshot.params.verseIdStart) || 0;
    const verseIdEnd: number = Number(this.route.snapshot.params.verseIdEnd) || 0;
  }

edited Oct 2, 2024 at 13:10

answered Oct 18, 2022 at 3:34

xinthose

3,9273 gold badges51 silver badges71 bronze badges

Comments

user5100770 · Accepted Answer · 2022-10-17 23:51:39Z

0

I think what you are trying to achieve could look like the following:

this.sub = this.activatedRoute.params.subscribe((params : Params) => {
    // You now have all params in a single variable 'params'
});

answered Oct 17, 2022 at 23:51

user5100770

Collectives™ on Stack Overflow

Angular getting URL paramters doesn't work as it should

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related