errors in AppComponent

Question

Ive started working with Typescript recently and experiencing lots of errors. I can't really find what Ive changed to get errors, but my project was working before. Console shows me:

Project successfully built Successfully deployed on device with identifier '97BCBE2D-2771-44B1-A589-6BAAB994CE37'.

But then it shows so many lines of errors and exceptions:

...

CONSOLE LOG file:///app/tns_modules/@angular/core/src/facade/lang.js:345:16: EXCEPTION: Error in ./AppComponent class AppComponent - inline template:0:0

CONSOLE LOG file:///app/tns_modules/@angular/core/src/facade/lang.js:345:16: ORIGINAL EXCEPTION: No provider for RouterOutletMap!

....

CONSOLE ERROR file:///app/tns_modules/trace/trace.js:160:30: ns-renderer: ERROR BOOTSTRAPPING ANGULAR

CONSOLE ERROR file:///app/tns_modules/trace/trace.js:160:30: ns-renderer: EXCEPTION: Error in ./AppComponent class AppComponent - inline template:0:0

...

EXCEPTION: Error: Uncaught (in promise): EXCEPTION: Error in ./AppComponent class AppComponent - inline template:0:0

...

Unhandled Promise rejection: EXCEPTION: Error in ./AppComponent class AppComponent - inline template:0:0

Can you explain to me what these errors mean and how to fix it?

my app.component.ts file:

import {Component} from "@angular/core";
import {RouteConfig} from "@angular/router-deprecated";
import {NS_ROUTER_DIRECTIVES, NS_ROUTER_PROVIDERS} from "nativescript-angular/router";

import {ListComponent} from "./components/list/list.component";
import {CreateComponent} from "./components/create/create.component";

@Component({
   selector: "my-app",
   directives: [NS_ROUTER_DIRECTIVES],
   providers: [NS_ROUTER_PROVIDERS],
   template: "<page-router-outlet></page-router-outlet>",
})

@RouteConfig([
   { path: "/list", component: ListComponent, name: "List", useAsDefault: true },
   { path: "/create", component: CreateComponent, name: "Create" },
])

export class AppComponent {}

And my main.ts looks like this:

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

nativeScriptBootstrap(AppComponent, null, { startPageActionBarHidden: false });

Angular-2 are releasing a RC almost every week and the latest version f NativeScript is now using the new ng Router. So if you have updated your NativeScript it is possible that you will have to use @angular/router instead of @angular/router-deprecated docs.nativescript.org/angular/core-concepts/… — Nick Iliev

Alexander Vakrilov Alexander Vakrilov · Accepted Answer · 2016-07-05T10:47:38

The error you are getting is probably because you are using the new nativescript router integration (nativescript-angular/router) with the old angular router(@angular/router-deprecated). You can fix that by changing your import to nativescript-angular/router-deprecated.

Alternatively you can start the new angular router(@angular/router). Here is a freshly update docs article on how to configure and use it with NativeScript.

errors in AppComponent

1 Answers