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)

app.modules.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 {
}

app.components.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

HttpModules不应该在providers数组中，appRoutingProviders也不应该在那里

providers: [appRoutingProviders, HttpModule]

providers: []

Answer 2

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

我需要删除整个＆＃34; node_modules＆＃34;文件夹并使用以下方法重新安装：

npm install

现在每件事都有效。

使用angular2，typescript和restangular2，没有提供http错误

2 个答案: