rest - 使用 angular2、typescript 和 restangular2，没有 provider for http 错误

Question

我将其用于休息请求(或尝试):https://github.com/2muchcoffeecom/ng2-restangular/

我正在使用这个 yeoman 生成器:

https://www.npmjs.com/package/generator-angular2-typescript

开箱即用的生成项目看起来不错，

然后我按照 ng2-resangular 中的说明进行操作，但是在运行它时出现以下错误:

core.umd.js?e2a5:2840 Error: No provider for Http!
    at NoProviderError.Error (native)
    at NoProviderError.BaseError [as constructor] (eval at <anonymous> (http://localhost:3000/vendor.js:100:2), <anonymous>:1104:38)
    at NoProviderError.AbstractProviderError [as constructor] (eval at <anonymous> (http://localhost:3000/vendor.js:100:2), <anonymous>:1235:20)
    at new NoProviderError (eval at <anonymous> (http://localhost:3000/vendor.js:100:2), <anonymous>:1266:20)
    at ReflectiveInjector_._throwOrNull (eval at <anonymous> (http://localhost:3000/vendor.js:100:2), <anonymous>:2736:23)
    at ReflectiveInjector_._getByKeyDefault (eval at <anonymous> (http://localhost:3000/vendor.js:100:2), <anonymous>:2764:29)
    at ReflectiveInjector_._getByKey (eval at <anonymous> (http://localhost:3000/vendor.js:100:2), <anonymous>:2727:29)
    at ReflectiveInjector_.get (eval at <anonymous> (http://localhost:3000/vendor.js:100:2), <anonymous>:2536:25)
    at NgModuleInjector.get (/AppModule/module.ngfactory.js:160:113)
    at NgModuleInjector.get (/AppModule/module.ngfactory.js:165:135)
    at NgModuleInjector.AppModuleInjector.getInternal (/AppModule/module.ngfactory.js:306:51)
    at NgModuleInjector.get (eval at <anonymous> (http://localhost:3000/vendor.js:100:2), <anonymous>:6717:31)
    at DebugAppView.AppView.injectorGet (eval at <anonymous> (http://localhost:3000/vendor.js:100:2), <anonymous>:9150:49)
    at DebugAppView.injectorGet (eval at <anonymous> (http://localhost:3000/vendor.js:100:2), <anonymous>:9389:53)
    at DebugAppView.View_AppComponent_Host0.createInternal (/AppModule/AppComponent/host.ngfactory.js:15:63)
    at DebugAppView.AppView.createHostView (eval at <anonymous> (http://localhost:3000/vendor.js:100:2), <anonymous>:9122:25)
    at DebugAppView.createHostView (eval at <anonymous> (http://localhost:3000/vendor.js:100:2), <anonymous>:9379:56)
    at ComponentFactory.create (eval at <anonymous> (http://localhost:3000/vendor.js:100:2), <anonymous>:5478:29)
    at ApplicationRef_.bootstrap (eval at <anonymous> (http://localhost:3000/vendor.js:100:2), <anonymous>:6547:44)
    at eval (eval at <anonymous> (http://localhost:3000/vendor.js:100:2), <anonymous>:6456:93)
    at Array.forEach (native)
    at PlatformRef_._moduleDoBootstrap (eval at <anonymous> (http://localhost:3000/vendor.js:100:2), <anonymous>:6456:46)
    at eval (eval at <anonymous> (http://localhost:3000/vendor.js:100:2), <anonymous>:6424:31)
    at ZoneDelegate.invoke (eval at <anonymous> (http://localhost:3000/polyfills.js:2178:2), <anonymous>:232:26)
    at Object.onInvoke (eval at <anonymous> (http://localhost:3000/vendor.js:100:2), <anonymous>:5972:41)
    at ZoneDelegate.invoke (eval at <anonymous> (http://localhost:3000/polyfills.js:2178:2), <anonymous>:231:32)
    at Zone.run (eval at <anonymous> (http://localhost:3000/polyfills.js:2178:2), <anonymous>:114:43)
    at eval (eval at <anonymous> (http://localhost:3000/polyfills.js:2178:2), <anonymous>:502:57)
    at ZoneDelegate.invokeTask (eval at <anonymous> (http://localhost:3000/polyfills.js:2178:2), <anonymous>:265:35)
    at Object.onInvokeTask (eval at <anonymous> (http://localhost:3000/vendor.js:100:2), <anonymous>:5963:41)
    at ZoneDelegate.invokeTask (eval at <anonymous> (http://localhost:3000/polyfills.js:2178:2), <anonymous>:264:40)
    at Zone.runTask (eval at <anonymous> (http://localhost:3000/polyfills.js:2178:2), <anonymous>:154:47)
    at drainMicroTaskQueue (eval at <anonymous> (http://localhost:3000/polyfills.js:2178:2), <anonymous>:401:35)

应用程序模块.ts

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {FormsModule} from '@angular/forms';
import {AppComponent} from './app.component';
import {HttpModule, Headers, Response, ResponseOptions} from "@angular/http";
import { RestangularModule } from 'ng2-restangular';
import {routing, appRoutingProviders} from './app.routing';
import {HomeComponent} from './home/home.component';
import {AboutComponent} from './about/about.component';


@NgModule({
    declarations: [
        AppComponent,
        HomeComponent,
        AboutComponent
    ],
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        routing,
        // Importing RestangularModule and making default configs for restanglar
        RestangularModule.forRoot((RestangularProvider: any) => {
                RestangularProvider.setBaseUrl('http://api.test.local/v1');
                RestangularProvider.setDefaultHeaders({'Authorization': 'Bearer UDXPx-Xko0w4BRKajozCVy20X11MRZs1'});
            }
        ),
    ],
    providers: [appRoutingProviders, HttpModule],
    bootstrap: [AppComponent]
})

export class AppModule {
}

应用程序组件.js

mport {Component, OnInit} from '@angular/core';

import 'bootstrap/dist/css/bootstrap.css';
import '../css/main.css';
import {Restangular} from "ng2-restangular";

@Component({
    selector: 'my-app',
    template: require('./app.component.html')
})

export class AppComponent implements OnInit {
    constructor(private restangular: Restangular) {
    }

    ngOnInit() {
        // GET http://api.test.local/v1/users/2/accounts
        this.restangular.one('users', 2).all("accounts").getList();
    }
}

我必须承认我对这个错误有点不知所措，所以我尝试在 app.modules 中添加以下内容:

import {HttpModule, Headers, Response, ResponseOptions} from "@angular/http";

但是那似乎并没有做任何事情

最后我将它添加到 vendor.ts 中

import '@angular/platform-browser';
import '@angular/platform-browser-dynamic';
import '@angular/core';
import '@angular/common';
import '@angular/forms';
import '@angular/http';
import '@angular/router';

import 'rxjs';

import 'bootstrap/dist/js/bootstrap';
import 'ng2-restangular/dist/umd/ng2-restangular'

最后一行不是通过阅读 ng2-restangular git repo 添加的要求，但看起来我需要添加，但不确定这是否正确。

如有任何帮助，我们将不胜感激。

编辑:

好的，所以在 app.components.js 中，有问题的代码是构造函数，如果我从 app.component 中删除代码，它工作正常，让我相信 RestAngular 库已加载到我的应用程序中，但出于某种原因试图使用它会导致显示的错误。

Answer 1

这是 ng2-restangular 的一个错误!它已更新到 0.1.9 版，现在应该可以使用了。有关 repository 的更多信息.

我需要删除整个“node_modules”文件夹并重新安装:

npm install

现在一切正常。