Angular 2 - 没有路由器提供商

Question

我正在尝试将auth0与我的angular2应用程序集成,但我得到一个错误说:

    EXCEPTION: Error in ./AppComponent class AppComponent_Host - inline template:0:0BrowserDomAdapter.logError @ platform-browser.umd.js:937BrowserDomAdapter.logGroup @ platform-browser.umd.js:947ExceptionHandler.call @ core.umd.js:4389(anonymous function) @ core.umd.js:9890ZoneDelegate.invoke @ zone.js:332onInvoke @ core.umd.js:9245ZoneDelegate.invoke @ zone.js:331Zone.run @ zone.js:225(anonymous function) @ zone.js:591ZoneDelegate.invokeTask @ zone.js:365onInvokeTask @ core.umd.js:9236ZoneDelegate.invokeTask @ zone.js:364Zone.runTask @ zone.js:265drainMicroTaskQueue @ zone.js:497ZoneTask.invoke @ zone.js:437
    platform-browser.umd.js:937
    platform-browser.umd.js:937 Error: DI Exception
        at NoProviderError.BaseException [as constructor] (core.umd.js:4472)
        at NoProviderError.AbstractProviderError [as constructor] (core.umd.js:4602)
        at new NoProviderError (core.umd.js:4638)
        at ReflectiveInjector_._throwOrNull (core.umd.js:6532)
        at ReflectiveInjector_._getByKeyDefault (core.umd.js:6560)
        at ReflectiveInjector_._getByKey (core.umd.js:6523)
        at ReflectiveInjector_.get (core.umd.js:6332)
        at NgModuleInjector.get (core.umd.js:10386)
        at DebugAppView._View_AppComponent_Host0.createInternal (AppComponent.ngfactory.js:20)
        at DebugAppView.AppView.create (core.umd.js:12439)BrowserDomAdapter.logError @ platform-browser.umd.js:937ExceptionHandler.call @ core.umd.js:4402(anonymous function) @ core.umd.js:9890ZoneDelegate.invoke @ zone.js:332onInvoke @ core.umd.js:9245ZoneDelegate.invoke @ zone.js:331Zone.run @ zone.js:225(anonymous function) @ zone.js:591ZoneDelegate.invokeTask @ zone.js:365onInvokeTask @ core.umd.js:9236ZoneDelegate.invokeTask @ zone.js:364Zone.runTask @ zone.js:265drainMicroTaskQueue @ zone.js:497ZoneTask.invoke @ zone.js:437
    platform-browser.umd.js:937 ERROR CONTEXT:BrowserDomAdapter.logError @ platform-browser.umd.js:937ExceptionHandler.call @ core.umd.js:4405(anonymous function) @ core.umd.js:9890ZoneDelegate.invoke @ zone.js:332onInvoke @ core.umd.js:9245ZoneDelegate.invoke @ zone.js:331Zone.run @ zone.js:225(anonymous function) @ zone.js:591ZoneDelegate.invokeTask @ zone.js:365onInvokeTask @ core.umd.js:9236ZoneDelegate.invokeTask @ zone.js:364Zone.runTask @ zone.js:265drainMicroTaskQueue @ zone.js:497ZoneTask.invoke @ zone.js:437
    platform-browser.umd.js:937 DebugContext {_view: _View_AppComponent_Host0, _nodeIndex: 0, _tplRow: 0, _tplCol: 0}BrowserDomAdapter.logError @ platform-browser.umd.js:937ExceptionHandler.call @ core.umd.js:4406(anonymous function) @ core.umd.js:9890ZoneDelegate.invoke @ zone.js:332onInvoke @ core.umd.js:9245ZoneDelegate.invoke @ zone.js:331Zone.run @ zone.js:225(anonymous function) @ zone.js:591ZoneDelegate.invokeTask @ zone.js:365onInvokeTask @ core.umd.js:9236ZoneDelegate.invokeTask @ zone.js:364Zone.runTask @ zone.js:265drainMicroTaskQueue @ zone.js:497ZoneTask.invoke @ zone.js:437
platform-browser.umd.js:937 EXCEPTION: Error: Uncaught (in promise): Error: Cannot find primary outlet to load 'HomeComponent'BrowserDomAdapter.logError @ platform-browser.umd.js:937BrowserDomAdapter.logGroup @ platform-browser.umd.js:947ExceptionHandler.call @ core.umd.js:4389next @ core.umd.js:9971schedulerFn @ core.umd.js:9168SafeSubscriber.__tryOrUnsub @ Subscriber.ts:240SafeSubscriber.next @ Subscriber.ts:192Subscriber._next @ Subscriber.ts:133Subscriber.next @ Subscriber.ts:93Subject._finalNext @ Subject.ts:154Subject._next @ Subject.ts:144Subject.next @ Subject.ts:90EventEmitter.emit @ core.umd.js:9156onError @ core.umd.js:9394onHandleError @ core.umd.js:9266ZoneDelegate.handleError @ zone.js:336Zone.runGuarded @ zone.js:242_loop_1 @ zone.js:508drainMicroTaskQueue @ zone.js:515ZoneTask.invoke @ zone.js:437
platform-browser.umd.js:937 STACKTRACE:BrowserDomAdapter.logError @ platform-browser.umd.js:937ExceptionHandler.call @ core.umd.js:4391next @ core.umd.js:9971schedulerFn @ core.umd.js:9168SafeSubscriber.__tryOrUnsub @ Subscriber.ts:240SafeSubscriber.next @ Subscriber.ts:192Subscriber._next @ Subscriber.ts:133Subscriber.next @ Subscriber.ts:93Subject._finalNext @ Subject.ts:154Subject._next @ Subject.ts:144Subject.next @ Subject.ts:90EventEmitter.emit @ core.umd.js:9156onError @ core.umd.js:9394onHandleError @ core.umd.js:9266ZoneDelegate.handleError @ zone.js:336Zone.runGuarded @ zone.js:242_loop_1 @ zone.js:508drainMicroTaskQueue @ zone.js:515ZoneTask.invoke @ zone.js:437
platform-browser.umd.js:937 Error: Uncaught (in promise): Error: Cannot find primary outlet to load 'HomeComponent'
    at resolvePromise (zone.js:558)
    at zone.js:535
    at ZoneDelegate.invoke (zone.js:332)
    at Object.onInvoke (core.umd.js:9245)
    at ZoneDelegate.invoke (zone.js:331)
    at Zone.run (zone.js:225)
    at zone.js:591
    at ZoneDelegate.invokeTask (zone.js:365)
    at Object.onInvokeTask (core.umd.js:9236)
    at ZoneDelegate.invokeTask (zone.js:364)BrowserDomAdapter.logError @ platform-browser.umd.js:937ExceptionHandler.call @ core.umd.js:4392next @ core.umd.js:9971schedulerFn @ core.umd.js:9168SafeSubscriber.__tryOrUnsub @ Subscriber.ts:240SafeSubscriber.next @ Subscriber.ts:192Subscriber._next @ Subscriber.ts:133Subscriber.next @ Subscriber.ts:93Subject._finalNext @ Subject.ts:154Subject._next @ Subject.ts:144Subject.next @ Subject.ts:90EventEmitter.emit @ core.umd.js:9156onError @ core.umd.js:9394onHandleError @ core.umd.js:9266ZoneDelegate.handleError @ zone.js:336Zone.runGuarded @ zone.js:242_loop_1 @ zone.js:508drainMicroTaskQueue @ zone.js:515ZoneTask.invoke @ zone.js:437
zone.js:484 Unhandled Promise rejection: Cannot find primary outlet to load 'HomeComponent' ; Zone: angular ; Task: Promise.then ; Value: Error: Cannot find primary outlet to load 'HomeComponent'(…) Error: Cannot find primary outlet to load 'HomeComponent'
    at getOutlet (http://localhost:3000/node_modules/@angular/router//bundles/router.umd.js:2228:23)
    at ActivateRoutes.activateRoutes (http://localhost:3000/node_modules/@angular/router//bundles/router.umd.js:2179:34)
    at eval (http://localhost:3000/node_modules/@angular/router//bundles/router.umd.js:2143:23)
    at Array.forEach (native)
    at ActivateRoutes.activateChildRoutes (http://localhost:3000/node_modules/@angular/router//bundles/router.umd.js:2142:33)
    at ActivateRoutes.activate (http://localhost:3000/node_modules/@angular/router//bundles/router.umd.js:2137:18)
    at eval (http://localhost:3000/node_modules/@angular/router//bundles/router.umd.js:1906:73)
    at SafeSubscriber.eval [as _next] (http://localhost:3000/node_modules/rxjs/Observable.js:89:25)
    at SafeSubscriber.__tryOrUnsub (http://localhost:3000/node_modules/rxjs/Subscriber.js:225:16)
    at SafeSubscriber.next (http://localhost:3000/node_modules/rxjs/Subscriber.js:174:22)consoleError @ zone.js:484_loop_1 @ zone.js:511drainMicroTaskQueue @ zone.js:515ZoneTask.invoke @ zone.js:437
zone.js:486 Error: Uncaught (in promise): Error: Cannot find primary outlet to load 'HomeComponent'(…)
    ERROR CONTEXT:
    [object Object] ; Zone: <root> ; Task: Promise.then ; Value: ViewWrappedException {_wrapperMessage: "Error in ./AppComponent class AppComponent_Host - inline template:0:0", _originalException: NoProviderError, _originalStack: "Error: DI Exception?    at NoProviderError.BaseExc…ules/@angular/core//bundles/core.umd.js:12439:25)", _context: DebugContext, _wrapperStack: "Error: Error in ./AppComponent class AppComponent_…dules/@angular/core//bundles/core.umd.js:9976:31)"} undefinedconsoleError @ zone.js:484_loop_1 @ zone.js:511drainMicroTaskQueue @ zone.js:515ZoneTask.invoke @ zone.js:437

这是我的app.cmponents.ts

import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
import { Auth }      from './auth.service/auth.service';


@Component({
  selector: 'my-app',
  templateUrl: 'app/app.component.html',
  providers: [ Auth ],
  directives: [ ROUTER_DIRECTIVES ],
  styleUrls:  ['app/app.component.css', 'fonts.css']
})
export class AppComponent {
    constructor(private auth: Auth) {}
 }

这是我的app.routes.ts文件,

import { provideRouter, RouterConfig } from '@angular/router';
import { HomeComponent }               from './home.component/home.component';
import { LoginComponent }              from './login.component/login.component';

export const routes: RouterConfig = [
  { path: '', component: HomeComponent },
  { path: 'login', component: LoginComponent },
  { path: '**', redirectTo: '' }
];

export const APP_ROUTER_PROVIDERS = [
  provideRouter(routes)
];

这是主要的.

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { bootstrap }                              from '@angular/platform-browser-dynamic';
import { disableDeprecatedForms, provideForms }   from '@angular/forms';
import { provide }                                from '@angular/core';
import { APP_ROUTER_PROVIDERS }                   from './app.routes';
import { AUTH_PROVIDERS }                         from 'angular2-jwt';
import { AppComponent }                           from './app.component';

import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

bootstrap(AppComponent, [
  APP_ROUTER_PROVIDERS,
  AUTH_PROVIDERS,
  disableDeprecatedForms(),
  provideForms()
]);

app.component.html,

<sign-up-interface> </sign-up-interface>
<main class="container">
    <router-outlet></router-outlet>
</main>

app.module.ts文件,

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { MdInputModule } from '@angular2-material/input';
import { AppComponent }  from './app.component';

import { WFInputDropdownComponent }  from './shared/input_dropdown/wf-input-dropdown.component';
import { SignUpBackgroundComponent }  from './shared/sign_up_background.component/sign_up_background.component';
import { FooterComponent }  from './shared/footer.component/footer.component';
import { WFButtonComponent }  from './shared/button/wf-button.component';
import { WFSignUpInterface }  from './sign-up/sign-up-interface/sign-up-interface.component';
import { WFContainerComponent }  from './shared/wf-container/wf-container.component';
import { RegistrationFormComponent }  from './sign-up/registration-form/registration-form.component';
import { WFInputComponent }  from './shared/input/wf-input.component';


import{WFRecoverPasswordComponent} from './sign_in/recover_password/recover-password.component';
import {WFCreateNewPasswordComponent} from './sign_in/create_new_password/wf-create-new-password.component';


@NgModule({
  imports: [
    BrowserModule,
    // Forms
    FormsModule, 
    // Material Design
    MdInputModule
  ],
  declarations: [ AppComponent,WFInputDropdownComponent,WFCreateNewPasswordComponent,WFRecoverPasswordComponent, SignUpBackgroundComponent ,WFSignUpInterface, WFButtonComponent,FooterComponent,WFInputComponent, WFContainerComponent,RegistrationFormComponent],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

我找不到代码级别的任何错误配置,错误是由main.ts和app.components.ts文件引起的.

任何帮助将非常感谢克服这个问题.