Angular 4 Error: No provider for PageRoute

[kinggolf]

Upgraded my app to Angular 4 today and am receiving this error when tns run ios: No provider for PageRoute.

page.json dependencies:

  "dependencies": {
    "@angular/common": "4.0.1",
    "@angular/compiler": "4.0.1",
    "@angular/core": "4.0.1",
    "@angular/forms": "4.0.1",
    "@angular/http": "4.0.1",
    "@angular/platform-browser": "4.0.1",
    "@angular/platform-browser-dynamic": "4.0.1",
    "@angular/router": "4.0.1",
    "@ngrx/core": "1.2.0",
    "@ngrx/store": "2.2.1",
    "nativescript-advanced-webview": "1.1.3",
    "nativescript-angular": "1.5.1",
    "nativescript-camera": "0.0.8",
    "nativescript-google-analytics": "^0.3.5",
    "nativescript-imagepicker": "2.5.1",
    "nativescript-iqkeyboardmanager": "1.0.1",
    "nativescript-social-share": "1.3.2",
    "nativescript-telerik-ui": "1.6.2",
    "reflect-metadata": "~0.1.8",
    "rxjs": "5.3.0",
    "tns-core-modules": "2.5.2",
    "zone.js": "0.8.4"
  },
  "devDependencies": {
    "@angular/compiler-cli": "4.0.1",
    "@ngtools/webpack": "1.2.10",
    "babel-traverse": "6.23.1",
    "babel-types": "6.23.0",
    "babylon": "6.16.1",
    "copy-webpack-plugin": "~3.0.1",
    "extract-text-webpack-plugin": "~2.0.0-beta.4",
    "lazy": "1.0.11",
    "nativescript-css-loader": "~0.26.0",
    "nativescript-dev-android-snapshot": "0.0.8",
    "nativescript-dev-typescript": "0.4.2",
    "nativescript-dev-webpack": "^0.3.6",
    "raw-loader": "~0.5.1",
    "resolve-url-loader": "~1.6.0",
    "tns-platform-declarations": "2.5.2",
    "typescript": "2.1.5",
    "webpack": "2.2.0",
    "webpack-sources": "~0.1.3"
  },

tns doctor shows no issues.

Removed node_modules, platform, & hooks folders, npm cache clear, npm install, and re-ran, but still same error.

In my component:
import { PageRoute } from "nativescript-angular/router";
&

    constructor(... private pageRoute: PageRoute, ...) {
        ...
        // Using pageRoute.activatedRoute to trigger updating of multi-board view if a board cover was added to a new board
        this.pageRoute.activatedRoute
            .switchMap(activatedRoute => activatedRoute.params)
            .forEach((params) => {
                ...
                }
            });
    }

This worked Angular 2.4.8 & nativescript-angular 2.4.1.

[danielgek]

@kinggolf you can actually just use ActivatedRoute from @angular/router, like so:

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

constructor(private activatedRoute: ActivatedRoute) {}


ngOnInit() {
    this.activatedRoute.params
        .forEach((params) => { this.user = JSON.parse(params['user']); });
}

even using <page-router-outlet>

[kinggolf]

Thank you @danielgek, but unfortunately this will not work for me as I am using this when navigating back a page and as stated in NS documentation, I need to use pageRoute.

In fact, I am not passing any params back, I am just using pageRoute to trigger an action in the previous page, that otherwise is not triggered. But when upgrading to Angular 4, I am getting the error I reported.

Thanks again.

[aggiustino]

Same issue here. I was playing with NS v3 rc1 and it uses Angular 4. I get No provider for PageRoute..
ActivatedRoute is working fine, but isn't actually the best solution.

[psomby]

Same here. I would prefer PageRoute instead of ActivatedRoute as it is a bit of a cumbersome solution.

[tsonevn]

Hi @kinggolf @danielgek @aggiustino @intermadix,
Thank you for reporting this issue.
I was able to reproduce the issue on my side. We will research what is causing this behavior and will provide the needed fix. I am also attaching sample project, which could be used for debugging.

Archive.zip
For further info, you could keep track on the issue.
Also, bear in mind that NativeScirpt 3.0 is still under development and it is possible to face some issues while using @rc version.

[rhanb]

This issue also occured on NativeScript version 2.5.3 with Angular 4.0 !

[sis0k0]

Hey all,

We are working on the issue and will probably release a patch version with the fix in a few days. Thanks for reporting that!

[kinggolf]

@tsonevn @sis0k0 @vakrilov Dear NS team, thanks for great support. Will this be in NS 3.0.0 production release? Cheers.

[vchimev]

Hey @kinggolf,

We just published nativescript-angular@1.5.2 with the fix. Yes, it will be included in nativescript-angular@3.0.0 as well.

CC: @danielgek, @aggiustino, @intermadix

[MuhammadTahir92]

well i am using "nativescript-angular": "~5.1.0", but the issue remained the same

@vchimev

[vakrilov]

Hey @MuhammadTahir92 - There is no need to use PageRoute any more. You can stick to the original ActivatedRoute provided by angular.