I've been scratching my head over this problem. It seems like I'm overlooking something simple.
Let me show you what's inside my home.component.ts file:
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();
}
}
Things were working perfectly until I introduced TestAuthService to my component. Now, the main AuthService is no longer in use. Even removing or keeping the import doesn't change anything.
Next, let's take a look at 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();
}
}
This uses auth0 which was installed via npm using:
npm install --save auth0-js
The reference is included in my .angular-cli.json file. When the constructor is left empty, everything works fine. But when I include the router in the constructor (the part I bolded), the entire screen crashes.
I can't figure out why adding the router to the constructor causes the page to fail loading completely. Simply removing the bolded "Router" parameter makes it work again.
The error message reads:
ng:///AppModule/AppComponent.ngfactory.js:7 ERROR Error: No provider for Router!