Angular 4.3 - 在服务崩溃的构造函数中启动路由器答案

【问题标题】：Angular 4.3 - Initiating Router in constructor of service crashesAngular 4.3 - 在服务崩溃的构造函数中启动路由器
【发布时间】：2017-08-17 14:48:46
【问题描述】：

这个问题让我大吃一惊。我确定我遗漏了一些非常简单的东西。

这是我的 home.component.ts

import { Component, OnInit } from '@angular/core';
import { AuthService } from './../../services/auth/auth.service'
import { TestAuthService } from './../../services/auth/testauth.service'

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
  providers: [AuthService, TestAuthService]
})
export class HomeComponent implements OnInit {

  constructor(public authService: TestAuthService) 
  { 
    //  authService.login();
  }

  ngOnInit() {
  }

  loginClick() {
    this.authService.login();
  }

}

在我将 TestAuthService 添加到我的组件之前，一切都完美显示。现在主要的 AuthService 没有被使用。是否删除导入不会做任何事情。

这里是 testauth.service.ts

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import 'rxjs/add/operator/filter';
import * as auth0 from 'auth0-js';

@Injectable()
export class TestAuthService {
    auth0 = new auth0.WebAuth({
        clientID: 'clientIdKeyString',
        domain: 'legitemail.auth0.com',
        responseType: 'token id_token',
        audience: 'https://legitemail.auth0.com/userinfo',
        redirectUri: 'http://localhost:4200/callback',      
        scope: 'openid'
      });

      constructor(**private router: Router**) {}

      public login(): void {
        this.auth0.authorize();
      }

}

这是使用我通过 npm 安装的 auth0 使用

npm install --save auth0-js

它在我的 .angular-cli.json 文件中被引用。我知道当构造函数为空时这段代码肯定有效，因为我有一个登录按钮，可以正确地将我重定向到 auth0 的身份验证页面并重定向回我的回调 url。但是，当我在构造函数中包含路由器时，我的整个屏幕都会崩溃（我将不工作的部分加粗）。

我不确定将路由器添加到构造函数如何调用整个页面加载失败。同样，我唯一改变它以使其工作的是在我的构造函数中删除粗体参数路由器。

错误是：

ng:///AppModule/AppComponent.ngfactory.js:7 ERROR Error: No provider for Router!

【问题讨论】：

发布敏感信息（例如您的 Auth0 客户端 ID）是一个非常糟糕的主意。我已经编辑了您的帖子，但需要批准。如果您更早看到此内容，请将其删除。
而错误是...
@AndreiMatracaru 我已经编辑了它。忘记了，抱歉。
@JBNizet 我已包含错误消息。一开始忘记了，我很抱歉。
好的。现在阅读它。您正在尝试使用路由器服务。但是没有这样的服务。直到您将 RouterModule（提供此服务）添加到 NgModule 的导入中。 angular.io/guide/router

标签： angular typescript angular2-routing

【解决方案1】：

解决方案：

正如 JB Nizet 的 cmets 所说，RouterModule 必须包含在主 NgModule 中

app.module.ts

我加了

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

然后在我的导入中

imports: [
  BrowserModule,
  BrowserAnimationsModule,
  AppMaterialModule,
  RouterModule.forRoot([])
],

【讨论】：