CODEWITHSUNDEEP
typescriptangularnativescript
yeulucay
yeulucay

Reputation: 444

Nativescript Angular2 Route Provider

I am trying to follow the quick start demo of nativescript with angular2. When I come to routers, it started to fail. Error message: No provider for RouterOutletMap! Here is my code,

main.ts
#############
    import {nativeScriptBootstrap} from "nativescript-angular/application";
    import {ROUTER_DIRECTIVES,ROUTER_PROVIDERS} from '@angular/router-deprecated';
    import {NS_ROUTER_DIRECTIVES, NS_ROUTER_PROVIDERS} from "nativescript-angular/router";
    import {AppComponent} from "./app.component";

    nativeScriptBootstrap(AppComponent, [ROUTER_PROVIDERS]);

and 

app.component.ts
    ############


     import {Component} from "@angular/core";
import {nativeScriptBootstrap} from "nativescript-angular/application";
import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from '@angular/router-deprecated';
import {NS_ROUTER_DIRECTIVES, NS_ROUTER_PROVIDERS} from "nativescript-angular/router";
import {FirstComponent} from "./first.component";
import {SecondComponent} from "./second.component";


@Component({
    selector: 'navigation-test',
    providers: [NS_ROUTER_PROVIDERS],
    directives: [NS_ROUTER_DIRECTIVES],
    template: `<page-router-outlet></page-router-outlet>`
})
@RouteConfig([
    { path: '/first', component: FirstComponent, name: 'First', useAsDefault: true },
    { path: '/second', component: SecondComponent, name: 'Second' },
])
export class AppComponent { }

Upvotes: 0

Views: 793

Answers (1)

Habib Kazemi
Habib Kazemi

Reputation: 2190

as a solution in nativescript github issues here you should import NS_ROUTER_DIRECTIVES, NS_ROUTER_PROVIDERS from "nativescript-angular/router-deprecated/ns-router-deprecated"

like this:

import {NS_ROUTER_DIRECTIVES, NS_ROUTER_PROVIDERS} from "nativescript-angular/router-deprecated/ns-router-deprecated";

and below I removed unnecessary imports and providers and ...

main.ts

import {nativeScriptBootstrap} from "nativescript-angular/application";
import {AppComponent} from "./app.component";

nativeScriptBootstrap(AppComponent);

app.component.ts 

import {Component} from "@angular/core";
import {RouteConfig} from '@angular/router-deprecated';
import {NS_ROUTER_DIRECTIVES, NS_ROUTER_PROVIDERS} from "nativescript-angular/router-deprecated/ns-router-deprecated";
import {FirstComponent} from "./first.component";
import {SecondComponent} from "./second.component";

@Component({
   selector: 'navigation-test',
   directives: [NS_ROUTER_DIRECTIVES],
   providers: [NS_ROUTER_PROVIDERS],
   template: `<page-router-outlet></page-router-outlet>`
})
@RouteConfig([
   { path: '/first', component: FirstComponent, name: 'First',      useAsDefault: true },
   { path: '/second', component: SecondComponent, name: 'Second' },
  ])
 export class AppComponent { }

Upvotes: 1

Related Questions