Getting the current URL gives the static injector error for Router

1
votes

I am building an Angular and Ionic application where I need the URL of my current page, the url that is showing in the address bar of the browser. To do so, I am using router.url, But I am getting an error:

Error: Uncaught (in promise): Error: StaticInjectorError[Router]:
StaticInjectorError[Router]: NullInjectorError: No provider for Router! Error: StaticInjectorError[Router]: StaticInjectorError[Router]: NullInjectorError: No provider for Router! at NullInjector.get (http://localhost:8100/build/vendor.js:1277:19) at resolveToken (http://localhost:8100/build/vendor.js:1565:24) at tryResolveToken (http://localhost:8100/build/vendor.js:1507:16) at StaticInjector.get (http://localhost:8100/build/vendor.js:1378:20) at resolveToken (http://localhost:8100/build/vendor.js:1565:24) at tryResolveToken (http://localhost:8100/build/vendor.js:1507:16) at StaticInjector.get (http://localhost:8100/build/vendor.js:1378:20) at resolveNgModuleDep (http://localhost:8100/build/vendor.js:10939:25) at NgModuleRef.get (http://localhost:8100/build/vendor.js:12160:16) at resolveDep (http://localhost:8100/build/vendor.js:12656:45) at c (http://localhost:8100/build/polyfills.js:3:19752) at Object.reject (http://localhost:8100/build/polyfills.js:3:19174) at NavControllerBase._fireError (http://localhost:8100/build/vendor.js:50002:16) at NavControllerBase._failed (http://localhost:8100/build/vendor.js:49995:14) at http://localhost:8100/build/vendor.js:50042:59 at t.invoke (http://localhost:8100/build/polyfills.js:3:14976) at Object.onInvoke (http://localhost:8100/build/vendor.js:4983:33) at t.invoke (http://localhost:8100/build/polyfills.js:3:14916) at r.run (http://localhost:8100/build/polyfills.js:3:10143) at http://localhost:8100/build/polyfills.js:3:20242

Component code is: 

import {Component, Pipe, PipeTransform} from '@angular/core';
import {IonicPage, NavController, NavParams, Platform, ViewController, ToastController} from 'ionic-angular';
import {ScreenOrientation} from '@ionic-native/screen-orientation';
import {DomSanitizer, SafeUrl, SafeResourceUrl} from "@angular/platform-browser";
import { ApiProvider } from './../../providers/api/api';
import { Router } from '@angular/router';

@IonicPage()
@Component({
    selector: 'page-play',

    templateUrl: 'play.html',
    providers: [ScreenOrientation]
})

export class PlayPage {

    constructor(platform: Platform,private router: Router, public navCtrl: NavController, public navParams: NavParams, public viewCtrl: ViewController, private screenOrientation: ScreenOrientation, public toastCtrl: ToastController, private sanitizer: DomSanitizer, public apiProvider: ApiProvider) {


this.location=this.router.url;
        console.log("LOCATION"+this.location);
    }
}

My module.ts is:

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule, Pipe } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { SuperTabsModule } from 'ionic2-super-tabs';
import { MyApp } from './app.component';
import { TabPage } from '../pages/tab/tab';
import {VgCoreModule} from 'videogular2/core';
import {VgControlsModule} from 'videogular2/controls';
import {VgOverlayPlayModule} from 'videogular2/overlay-play';
import {VgBufferingModule} from 'videogular2/buffering';
import { ApiProvider } from '../providers/api/api';
//import { Databaseservice } from '../providers/api/Databaseservice';
import {GetstartedPage} from '../pages/getstarted/getstarted'
import { HttpClientModule } from '@angular/common/http';
import {LoginPage} from '../pages/login/login';
import {LoginPageModule} from '../pages/login/login.module'
import {SongsPage} from '../pages/songs/songs'
import {SongsPageModule} from '../pages/songs/songs.module'
import {VideosPage} from '../pages/videos/videos'
import {VideosPageModule} from '../pages/videos/videos.module'
import {EmbedvideoPage} from '../pages/embedvideo/embedvideo'
import {EmbedvideoPageModule} from '../pages/embedvideo/embedvideo.module'
import {PlayPage} from '../pages/play/play'
import {PlayPageModule} from '../pages/play/play.module'
import {EventsPage} from '../pages/events/events'
import {EventsPageModule} from '../pages/events/events.module'
import {ProfilePage} from '../pages/profile/profile'
import {ProfilePageModule} from '../pages/profile/profile.module'
import {SettingsPage} from '../pages/settings/settings'
import {SettingsPageModule} from '../pages/settings/settings.module'
import {AudioplayertwoPage} from '../pages/audioplayertwo/audioplayertwo'
import {AudioplayertwoPageModule} from '../pages/audioplayertwo/audioplayertwo.module'
import {ViewAllPage} from '../pages/view-all/view-all'
import {ViewAllPageModule} from '../pages/view-all/view-all.module'


import {PricePage} from '../pages/price/price'
import {PricePageModule} from '../pages/price/price.module'
import { GetstartedPageModule } from '../pages/getstarted/getstarted.module';
import { IonicStorageModule } from '@ionic/storage';
import { AngularFireModule } from 'angularfire2';
import * as firebase from 'firebase';
import 'firebase/messaging'; // only import firebase messaging or as needed;
import { firebaseConfig } from '../environment';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { LocationStrategy, PathLocationStrategy } from '@angular/common';
import { RouterModule,Router } from '@angular/router';



firebase.initializeApp(firebaseConfig);
var database = firebase.database();
//.............
@NgModule({
    declarations: [
        MyApp,
        TabPage,
        // SingleMediaPlayer
    ],


    imports: [
        BrowserModule,
        IonicModule.forRoot(MyApp, {}, {
            links: [
                  { component: LoginPage, name: 'LoginPage', segment: 'login' },
                { component: SongsPage, name: 'SongsPage', segment: 'songs' },
                { component: VideosPage, name: 'VideosPage', segment: 'm/videos' },
                { component: EventsPage, name: 'EventsPage', segment: 'm/events' },
                { component: PlayPage, name: 'PlayPage', segment: 'm/watch/:name' },
                { component: EmbedvideoPage, name: 'EmbedvideoPage', segment: 'embed' },
                { component: ProfilePage, name: 'ProfilePage', segment: 'profile' },
                { component: SettingsPage, name: 'SettingsPage', segment: 'settings' },
                { component: PricePage, name: 'PricePage', segment: 'price' },
                { component: AudioplayertwoPage, name: 'AudioplayertwoPage', segment: 'Audioplayer' },
                { component: TabPage, name: 'TabPage', segment: 'tab' } ,
                 { component: ViewAllPage, name:'ViewAllPage',segment:'m/viewAll/:name'}
            ]
        }),
        SuperTabsModule.forRoot(),
        VgCoreModule,
        VgControlsModule, PlayPageModule, ProfilePageModule, SettingsPageModule, PricePageModule, AudioplayertwoPageModule,
        VgOverlayPlayModule, GetstartedPageModule, LoginPageModule, SongsPageModule, VideosPageModule, EventsPageModule, EmbedvideoPageModule,
        VgBufferingModule, VideosPageModule, HttpClientModule, ViewAllPageModule, AngularFireModule.initializeApp(firebaseConfig), IonicStorageModule.forRoot(), AngularFireDatabaseModule
    ],
    bootstrap: [IonicApp],
    entryComponents: [
        MyApp,
       VideosPage, GetstartedPage
    ],
    providers: [
        StatusBar,
        SplashScreen,
        { provide: ErrorHandler, useClass: IonicErrorHandler }, { provide: LocationStrategy, useClass: PathLocationStrategy }, ApiProvider
    ]
})
export class AppModule { }

I know something I have to add in my module.ts. But I am not figuring out it.

4
javascriptangularionic3
Possible duplicate of No provider for Router? – t3__rry

4 Answers

2
votes

You have to import RouterModule into your own module.

EDIT also put an access modifier in your first constructor parameter : 

constructor(public platform: Platform, ...)

Or put it last in your parameters.

0
votes

You have to do this in your module imports?

RouterModule.forRoot(
  [
    { path: "", component: PlayPage}
  ]
)
0
votes

https://angular.io/guide/router says:

A routed Angular application has one singleton instance of the Router service.

...

A router has no routes until you configure it. The following example creates four route definitions, configures the router via the RouterModule.forRoot method, and adds the result to the AppModule's imports array.

const appRoutes: Routes = [
  { path: 'crisis-center', component: CrisisListComponent },
  { path: 'hero/:id',      component: HeroDetailComponent },
  {
    path: 'heroes',
    component: HeroListComponent,
    data: { title: 'Heroes List' }
  },
  { path: '',
    redirectTo: '/heroes',
    pathMatch: 'full'
  },
  { path: '**', component: PageNotFoundComponent }
];

@NgModule({
  imports: [
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: true } // <-- debugging purposes only
    )
    // other imports here
  ],
  ...
})
export class AppModule { }

So in order to use Router instance, you need to create it first in your root module using RouterModule.forRoot method. You can follow the official guide - it's quite simple.

-1
votes

Add import { HttpModule } from '@angular/http'; in app.module.ts for Http

Or

Add import {HttpClientModule} from '@angular/common/http'; in app.module.ts for httpclient