打字稿错误 TS2305：模块 auth.service 没有导出的成员 'AuthService'

Question

• 在处理https://angular.io/docs/ts/latest/guide/router.html 提供的路由和导航代码时。
• 使用 --node v6.9.4 和 npm v4.1.1，VSCode 1.8.1 IDE，Ubuntu 16.04
• 出现以下错误：

app/auth-guard.service.ts(9,10)： 错误 TS2305： 模块 '"/var/www/html/quickstart/app/auth.service"' 没有导出 成员“AuthService”。

app/auth.service.ts(7,10)：错误 TS2305：模块 '"/var/www/html/quickstart/app/auth.service"' 没有导出成员 'AuthService'。

• 在堆栈上搜索了类似的错误解决方案，但没有得到它 解决。
• 请帮助解决这些错误。特此粘贴文件供参考

package.json

{
      "name": "angular-quickstart",
      "version": "1.0.0",
      "description": "QuickStart package.json from the documentation, supplemented with testing support",
      "scripts": {
        "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
        "e2e": "tsc && concurrently \"http-server -s\" \"protractor protractor.config.js\" --kill-others --success first",
        "lint": "tslint ./app/**/*.ts -t verbose",
        "lite": "lite-server",
        "pree2e": "webdriver-manager update",
        "test": "tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"",
        "test-once": "tsc && karma start karma.conf.js --single-run",
        "tsc": "tsc",
        "tsc:w": "tsc -w"
      },
      "keywords": [],
      "author": "",
      "license": "MIT",
      "dependencies": {
        "@angular/common": "~2.4.0",
        "@angular/compiler": "~2.4.0",
        "@angular/core": "~2.4.0",
        "@angular/forms": "~2.4.0",
        "@angular/http": "~2.4.0",
        "@angular/platform-browser": "~2.4.0",
        "@angular/platform-browser-dynamic": "~2.4.0",
        "@angular/router": "~3.4.0",    
        "@ngrx/core": "^1.2.0",
        "@ngrx/effects": "^2.0.0",
        "@ngrx/store": "^2.2.1",
        "angular-in-memory-web-api": "~0.2.4",
        "core-js": "^2.4.1",
        "rxjs": "5.0.1",
        "systemjs": "0.19.40",
        "zone.js": "^0.7.4"
      },
      "devDependencies": {
        "concurrently": "^3.1.0",
        "lite-server": "^2.2.2",
        "typescript": "~2.0.10",
        "canonical-path": "0.0.2",
        "http-server": "^0.9.0",
        "tslint": "^3.15.1",
        "lodash": "^4.16.4",
        "jasmine-core": "~2.4.1",
        "karma": "^1.3.0",
        "karma-chrome-launcher": "^2.0.0",
        "karma-cli": "^1.0.1",
        "karma-jasmine": "^1.0.2",
        "karma-jasmine-html-reporter": "^0.2.2",
        "protractor": "~4.0.14",
        "rimraf": "^2.5.4",
        "@types/node": "^6.0.46",
        "@types/jasmine": "^2.5.36"
      },
      "repository": {}
}

app.module.ts

import { NgModule }       from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
import { FormsModule }    from '@angular/forms';
import { Router } from '@angular/router';
import { AppComponent }            from './app.component';
import { AppRoutingModule }        from './app-routing.module';
import { HeroesModule }            from './heroes/heroes.module';
import { ComposeMessageComponent } from './compose-message.component';

import { LoginComponent }          from './login.component';
import { NotFoundComponent }   from './not-found.component';
import { DialogService }           from './dialog.service';

@NgModule({
   imports: [
    BrowserModule,
    FormsModule,
    HeroesModule,
    AppRoutingModule
 ],
 declarations: [
     AppComponent,
     ComposeMessageComponent,
     LoginComponent,
     NotFoundComponent
],
 providers: [
    DialogService
 ],
 bootstrap: [ AppComponent ]
})

export class AppModule {
  // Diagnostic only: inspect router configuration
  constructor(router: Router) {
    console.log('Routes: ', JSON.stringify(router.config, undefined,     2));
  }
}

app.component.ts

import { Component } from '@angular/core';

@Component({
      selector: 'my-app',

      template: `
        <h1 class="title">Angular Router</h1>
        <nav>
          <a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>

          <a routerLink="/heroes" routerLinkActive="active">Heroes</a>
          <a routerLink="/admin" routerLinkActive="active">Admin</a>
          <a routerLink="/login" routerLinkActive="active">Login</a>
          <a [routerLink]="[{ outlets: { popup: ['compose'] } }]">Contact</a>
        </nav>
        <router-outlet></router-outlet>
        <router-outlet name="popup"></router-outlet>
      `
})

export class AppComponent {
}

auth.service.ts

import { Injectable } from '@angular/core';  
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/delay';

@Injectable()
  export class AuthService {
  isLoggedIn: boolean = false;

  // store the URL so we can redirect after logging in
  redirectUrl: string;

  login(): Observable<boolean> {
    return Observable.of(true).delay(1000).do(val => this.isLoggedIn =   true);
  }

  logout(): void {
    this.isLoggedIn = false;
  }
}

auth-guards.service.ts

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

@Injectable()
export class AuthGuard implements CanActivate, CanActivateChild {
      constructor(private authService: AuthService, private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot, state:  RouterStateSnapshot): boolean {
    let url: string = state.url;

    return this.checkLogin(url);
  }

  canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    return this.canActivate(route, state);
  }

  checkLogin(url: string): boolean {
    if (this.authService.isLoggedIn) { return true; }

    // Store the attempted URL for redirecting
    this.authService.redirectUrl = url;

    // Create a dummy session id
    let sessionId = 123456789;

    // Set our navigation extras object
    // that contains our global query params and fragment
     let navigationExtras: NavigationExtras = {
      queryParams: { 'session_id': sessionId },
      fragment: 'anchor'
    };

    // Navigate to the login page with extras
    this.router.navigate(['/login'], navigationExtras);
    return false;
  }
}

Answer 1

它在 Providers 中的缺失 app.module.ts

providers: [AuthService]