rc1 Router "Kein Anbieter für Router"

Dies ist eine Follow-up-Stelle für einen Fehler, kommt nach @Shuhei hat mir geholfen, das config.js Problem angular 2 rc router angular2-polyfills.js:349 Error rc1 Router "Kein Anbieter für Router"

aufgelöst Das ist mein app.component.ts

import { Component,provide }  from '@angular/core'; 
import { RouteConfig, ROUTER_DIRECTIVES,Router } from '@angular/router-deprecated'; 

import { HeroShellComponent } from '../apps/hero/hero-shell.component'; 
import {HomeComponent} from '../home/home.component'; 

import {Login} from '../login/auth.component'; 
import {Authentication} from '../login/auth.service'; 
import {isLoggedin} from '../login/auth.isLoggedin'; 

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

@RouteConfig([ 
    { 
     path: '/app/apps/hero/...', 
     name: 'Hero Sample', 
     component: HeroShellComponent, 
    }, 
    { path: '/app/apps/testapp1', name: 'Testapp1', component: HomeComponent }, 
    { path: '/', redirectTo: ['Login'] }, 
    { path: '/home', name: 'Home', component: HomeComponent }, 
    { path: '/login', name: 'Login', component: Login, useAsDefault: true }, 
]) 
export class AppComponent { 

    title = 'Apps'; 

    constructor(public _auth: Authentication, 
       public router: Router 
      ) {} 

    onLogout() { 

    this._auth.logout(); 
    this.router.navigate(['/Login']); 
    } 

}

Alle anderen Komponenten injiziert Router durch Konstruktor wie oben. Router ist sicherlich zur Verfügung gestellt.

path: '/app/apps/hero/...'

ist für den untergeordneten Router Redirect.

Der Fehler ich habe ist

browser_adapter.ts:78 EXCEPTION: Error: 
Uncaught (in promise): EXCEPTION: Error in :0:0 
ORIGINAL EXCEPTION: No provider for Router!. 

ORIGINAL STACKTRACE: Error: DI Exception 
at NoProviderError.BaseException [as constructor] (npmcdn.com/@angular/[email protected]/src/facade/…) 
at NoProviderError.AbstractProviderError [as constructor]

Wenn der gleiche Code in der Beta gearbeitet, was könnte es nicht in RC1 Router-veraltet arbeiten machen?

Update: index.html

<html> 
    <head> 
    <base href="/"> 

    <title>My Tests</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1">  
    <link rel="stylesheet" href="/app/public/css/styles.css"> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-sham.min.js"></script>   
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.25/system-polyfills.js"></script>  
    <script src="node_modules/systemjs/dist/system.src.js"></script> 
    <script src="node_modules/rxjs/bundles/Rx.js"></script> 

    <script src="https://code.angularjs.org/2.0.0-beta.17/angular2-polyfills.js"></script> 
    <script src="https://code.angularjs.org/tools/system.js"></script> 
    <script src="https://code.angularjs.org/tools/typescript.js"></script> 
    <script src="/app/systemjs.config.js"></script> 

    <script> 
     System.import('app/main').then(null, console.error.bind(console)); 
    </script> 
    </head> 
    <body> 
    <my-app>Loading...</my-app> 
    <script>document.write('<base href="' + document.location + '" />');</script> 
    </body> 
</html>

Quelle

2016-05-07 Shawn

Tritt der Fehler wirklich auf 'AppComponent' auftreten? Würde es Ihnen etwas ausmachen, ein MCV-Beispiel auf Plunker zu erstellen, damit Leute damit herumspielen können? http://stackoverflow.com/help/mcve –

Import ROUTER_DIRECTIVES, Router und Routen aus '@ Winkel/Router'
ersetzen @RouteConfig mit @Routes

Das half mir es zum Laufen zu bringen. https://angular.io/docs/ts/latest/guide/router-deprecated.html

Quelle

2016-05-08 18:57:22 JukkaL

Das hat funktioniert. Vielen Dank. – Shawn

funktioniert nicht, wenn Typescript verwendet – nadav

importieren Zeichenfolge sollte: import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} – bFunc

Sie müssen den Router zur Verfügung zu stellen, etwa wie folgt:

... 
import { RouteConfig, ROUTER_DIRECTIVES, Router, ROUTER_PROVIDERS } from '@angular/router-deprecated'; 

@Component({ 
    selector: 'my-app', 
    templateUrl: 'app/appshell/app.component.html', 
    styleUrls: ['app/appshell/app.component.css'], 
    directives: [ROUTER_DIRECTIVES], 
    providers: [ROUTER_PROVIDERS] 
}) 
...

Mehr darüber, wie Anbieter arbeitet hier: https://angular.io/docs/ts/latest/guide/hierarchical-dependency-injection.html

Quelle

2016-05-07 13:26:21 tibbus

danke für die Antwort. Ich habe Provider hinzugefügt: [ROUTER_PROVIDERS], aber ich habe immer noch denselben Fehler am selben Ort. Es explodiert vor dem Erreichen von auth.component.ts. – Shawn

Ich weiß nicht, es funktioniert gut für mich in RC.1, wahrscheinlich ist etwas in Ihrer App falsch. – tibbus

Funktioniert für mich, mit Typoskript. Danke – nadav

stellen Sie sicher, in Ihrem Index.html:

<script>document.write('<base href="' + document.location + '" />');</script>

Quelle

2016-05-07 15:39:04 e3d

Ich habe Ihre Codezeile zu index.html hinzugefügt, aber immer noch den gleichen Fehler. Weitere Gedanken sind willkommen. – Shawn

Sie sollten Sie auf diese Weise Code ändern, wenn Sie neue Router verwenden möchten:

import {Routes} from '@angular/router' 

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

@Routes([ 
    { 
     path: '/app/apps/hero/...', 
     component: HeroShellComponent, 
    }, 
    { path: '/app/apps/testapp1', component: HomeComponent }, 
    { path: '/', redirectTo: ['Login'] }, 
    { path: '/home', component: HomeComponent }, 
    { path: '/login', component: Login}, 
]) 
export class AppComponent {}

mehr doc hier Siehe https://angular.io/docs/ts/latest/guide/router.html

Quelle

2016-05-15 06:28:55 HUSTecho

Für Winkel Router 3.0.0-beta.1:

ich die ähnliche Fehler bekam Ich habe herausgefunden, dass WebStorm automatisch @angular/router-deprecated für mich importiert. Von der tutorial sollte es @angular/router sein.

app.component.ts:

import {ROUTER_DIRECTIVES} from "@angular/router";

Quelle

2016-08-06 19:03:05 ronald8192

rc1 Router "Kein Anbieter für Router"

Antwort

Verwandte Themen