Question

我在我的应用程序中使用visual studio 2017模板。视觉工作室2017项目意味着角度提供客户端应用程序，而asp.net核心mvc提供返回服务。我试图创建一个http拦截器，但是在加载模块时遇到了TypeScript的问题。请参阅以下代码：

import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
//  HttpEvent,
  HttpInterceptor
} from '@angular/common/http';

import { Observable } from 'rxjs/Observable';
import { AuthService } from './auth.service';

@Injectable()
export class TokenInterceptor implements HttpInterceptor {
  constructor(public auth: AuthService) { }
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    request = request.clone({
      setHeaders: {
        Authorization: `Bearer ${this.auth.getToken()}`
      }
    });
    return next.handle(request);
  }
}

我已经通过npm导入了所需的模块。我的package.json发布在下面：

    {
      "name": "MYAPP",
     "private": true,
  "version": "0.0.0",
  "scripts": {
    "test": "karma start ClientApp/test/karma.conf.js"
  },
  "dependencies": {
    "@angular/animations":"^4.4.4",
    "@angular/common": "^4.4.4",
    "@angular/compiler": "^4.4.4",
    "@angular/compiler-cli": "^4.4.4",
    "@angular/core": "^4.4.4",
    "@angular/forms": "^4.4.4",
    "@angular/http": "^4.4.4",
    "@angular/platform-browser": "^4.4.4",
    "@angular/platform-browser-dynamic": "^4.4.4",
    "@angular/platform-server": "^4.4.4",
    "@angular/router": "^4.4.4",
    "angular2-jwt": "^0.2.1",
    "@ngtools/webpack": "^1.5.0",
    "@types/webpack-env": "^1.13.0",
    "angular2-template-loader": "0.6.2",
    "aspnet-prerendering": "^3.0.1",
    "aspnet-webpack": "^2.0.1",
    "awesome-typescript-loader": "3.2.1",
    "bootstrap": "3.3.7",
    "css": "2.2.1",
    "css-loader": "0.28.4",
    "es6-shim": "0.35.3",
    "event-source-polyfill": "0.0.9",
    "expose-loader": "0.7.3",
    "extract-text-webpack-plugin": "2.1.2",
    "file-loader": "0.11.2",
    "html-loader": "0.4.5",
    "isomorphic-fetch": "2.2.1",
    "jquery": "3.2.1",
    "json-loader": "0.5.4",
    "preboot": "4.5.2",
    "raw-loader": "0.5.1",
    "reflect-metadata": "0.1.10",
    "rxjs": "5.4.2",
    "style-loader": "0.18.2",
    "to-string-loader": "1.1.5",
    "typescript": "2.4.1",
    "url-loader": "0.5.9",
    "webpack": "2.5.1",
    "webpack-hot-middleware": "2.18.2",
    "webpack-merge": "4.1.0",
    "zone.js": "0.8.12",
    "jwt-decode": "2.2.0" 
  },
  "devDependencies": {
    "@types/chai": "4.0.1",
    "@types/jasmine": "2.5.53",
    "chai": "4.0.2",
    "jasmine-core": "2.6.4",
    "karma": "1.7.0",
    "karma-chai": "0.1.0",
    "karma-chrome-launcher": "2.2.0",
    "karma-cli": "1.0.1",
    "karma-jasmine": "1.1.0",
    "karma-webpack": "2.0.3"
  }
}

有人知道为什么打字稿找不到所需的模块吗？

由于乙

Answer 1

我注意到你在angular@4.2.x上你需要升级Angular因为@ angular / common / http是在angular 4.3.x中引入的

更新后（npm update），请确保您已导入HttpClientModule：

<强> app.module.ts

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports:      [ BrowserModule, HttpClientModule ],
  declarations: [ AppComponent ],
  providers: [],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

[编辑]

您应该使用@angular/common/http，因为它是http的最新演变。话虽如此，如果您正在关注使用较旧的http模块的Angular2教程。

使用旧模块：

npm install @angular/http

然后导入模块：

import { HttpModule } from '@angular/common/http';

@NgModule({
  imports:      [ BrowserModule, HttpModule ],
  declarations: [ AppComponent ],
  providers: [],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

有两种不同的实现拦截器的方法 - 使用@ angular / http的旧方法和使用@ angular / common / http的新方法。您不能按照@ angular2教程在@ angular4

中实现拦截器

无法找到mudule @ angular / common / http（不使用SystemJs）

1 个答案: