升级到 Angular 5 NullInjectorError：没有提供程序

Question

我尝试升级到 Angular 4，但运行代码时出现错误：

ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[AuthenticatedGuard -> AuthService]: StaticInjectorError(Platform: core)[AuthenticatedGuard -> AuthService]: NullInjectorError: No provider for AuthService!

该错误显示“没有 AuthService 的提供程序”，但在我从中导航的组件中，我注入并成功使用了我的 AuthService。以下是相关源文件：

应用程序模块.ts

import { AuthService } from '../../services/auth.service';
import { AuthenticatedGuard } from '../../utility/authenticated.gaurd'
@NgModule({
    imports:[ ... ],
    declarations: [ ... ], 
    providers: [ AuthService, AuthenticatedGuard ]})
export class AppModule { }

验证.gaurd.ts

import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { AuthService } from '../services/auth.service.js';

@Injectable()
export class AuthenticatedGuard implements CanActivate {

    constructor(private authService: AuthService, private router: Router) { }

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {

        return true;
    }
}

应用程序路由.module.ts

import { AdminComponent }       from '../../components/admin/admin.component';
import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: 'admin',  component: DashboardComponent, canActivate: [AuthenticatedGuard]},
];

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})

export class AppRoutingModule {}

有什么想法这个错误可能神秘地来自哪里吗？我假设角度 4 - 5 发生了变化，但我不确定是什么？

Answer 1

第一步：

import { AuthService } from '../services/auth.service';

第二步：

providers: [
    AuthService
],

Answer 2

改变这个：

import { AuthService } from '../services/auth.service.js';

对此：

import { AuthService } from '../services/auth.service';

从authentiated.gaurd.ts中的导入末尾删除.js。导入不需要文件扩展名。