Angular2: Accessing query parameters from URL giving error

Question

Am trying to extract query parameters from the url

https://localhost:8080/myapp/shared?id1=2&id2=4

I need to use id1 and id2 values in my app.component.ts. Am trying to use Router, ActivatedRoute, Params from '@angular/router' but when I run the application, the main page is not loaded and I see the following error in browser console:

Error: StaticInjectorError[t]: 
 StaticInjectorError[t]: 
   NullInjectorError: No provider for t!
Stack trace:


LMZF/</yi</t.prototype.get@http://localhost:8081/myapp/main.a7059837ce4dd4ad4d9f.bundle.js:1:293926
y/<@http://localhost:8081/myapp/main.a7059837ce4dd4ad4d9f.bundle.js:1:237630
y@http://localhost:8081/myapp/main.a7059837ce4dd4ad4d9f.bundle.js:1:237237

And here is what my app.component.ts looks like:

import { Component, Input, OnInit } from '@angular/core';
import { HeaderComponent } from './header/header.component';
import {Router, ActivatedRoute, Params} from '@angular/router'; //added this import statement

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
  })

export class AppComponent implements OnInit {

constructor(private activatedRoute: ActivatedRoute) {}
// added following code for query params
ngOnInit() {
  // subscribe to router event
 this.activatedRoute.params.subscribe((params: Params) => {
     let userId = params['id1'];
     console.log("parameter is: "+ userId);
    });
}


   title = 'My First Angular App';
}

The thing is, i have added Router code which is causing the error without even loading the above url. As I try to run the application without the query param code, it runs fine.

Have tried this solution from this answer. Have also looked into another similar question but it didn't help.

Can someone explains why is that happening?

UPDATE

Have added following import statement in app.module.ts:

imports: [
BrowserModule,
HttpModule,
RouterModule.forRoot([{
            path: '',
            component: AppComponent
        },
])

Now, this makes application load but still the parameters are not extracted. It is giving following error on browser console:

Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'shared'

UPDATE 2

Adding route path for respective url solves the console error problem but still my parameter is undefined.

RouterModule.forRoot([{
        path: '',
        component: AppComponent
    },
    {
        path: 'shared',
        component: AppComponent
    },

])

First, you should create a router module and define your routing config there. So, in App module, you just have to declare your router module. Concerning the error, it is telling you that you are trying to access to an url that don't have a component to handle it. You can try this : `[{ path: '', component: AppComponent },{ path: 'shared', component: AppComponent }, ]` — mickdev, May 05 '18 at 11:43
@mickdev: that solved the problem of console error but parameters are still undefined. — roger_that, May 05 '18 at 12:13

Diego · Accepted Answer · 2018-05-05T12:54:28.623

0

You are accessing the route parameters specified in the routing module, for example /user/:uid. For the query params:

export class AppComponent implements OnInit {

constructor(private activatedRoute: ActivatedRoute) {}
// added following code for query params
ngOnInit() {
  // subscribe to router event
 this.activatedRoute.queryParams.subscribe((params: Params) => {
     let userId = params['id1'];
     console.log("parameter is: "+ userId);
    });
}

You could also use the ActivatedRouteSnapshot:

import { ActivatedRouteSnapshot } from '@angular/router';

export class AppComponent implements OnInit {

constructor(private route: ActivatedRouteSnapshot) {}
// added following code for query params
ngOnInit() {
     console.log("all parameters: ", this.route.queryParamMap.getAll);
}

edited May 05 '18 at 12:54

answered May 05 '18 at 12:27

Diego

709
7
18

Do i need to add any imports in `app.module.ts`? It is giving the same error where the page is not loading. – roger_that May 05 '18 at 13:42
Importing the RouterModule should be enough. It does not get params with activatedRoute.queryparams? – Diego May 05 '18 at 14:05

Angular2: Accessing query parameters from URL giving error

1 Answers1