angular2 Cannot resolve all parameters for 'RequestOptions'(?)

Question

I tried to import the http provider into one of my own providers. But it throws me the error mentioned above.

First I just imported the Http into my ActionTracker-Service. But then I got the Error

Exception No Provider for AppComponent -> ActionTracker -> Http

So I also imported Http into my boot.ts.

index.html

<html>
  <head>
    <title>Angular 2 QuickStart</title>

    <!-- 1. Load libraries -->
    <script src="angular2/bundles/angular2-polyfills.js"></script>
    <script src="systemjs/dist/system.src.js"></script>

    <script src="rxjs/bundles/Rx.js"></script>
    <script src="angular2/bundles/angular2.dev.js"></script>
    <script src="angular2/bundles/http.dev.js"></script>
    <!-- 2. Configure SystemJS -->
    <script>
      System.config({
        packages: {
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
      System.import('app/boot')
            .then(null, console.error.bind(console));
    </script>

    <link href="bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="assets/styles/main.css" rel="stylesheet">
  </head>
  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

boot.ts

import {bootstrap}    from 'angular2/platform/browser'
import {AppComponent} from './app.component'
import {Http, ConnectionBackend, RequestOptions} from 'angular2/http'

bootstrap(AppComponent, [ConnectionBackend, RequestOptions, Http]);

action-tracker.service.ts

import {Injectable} from 'angular2/core';
import {Track} from './track'
import {Http} from 'angular2/http'

@Injectable()
export class ActionTracker {
  constructor(private _http:Http){}
}

The upcoming Error is:

Cannot resolve all parameters for 'RequestOptions'(?). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'RequestOptions' is decorated with Injectable.
Error: Cannot read property 'getOptional' of undefined(…)

When I passed 'Http' only within the boots.ts file, I got errors that ConnectionBackend and RequestOptions are missing. So I added both, but now I got stuck with the Error for RequestOptions.

Can Anybody tell, why this error appears? And why do I need to also pass my imported Providers into the bootstrap function as an Array?

Thanks! :)

You shouldn't include ConnectionBackend, RequestOptions, Http at bootstrap, use HTTP_PROVIDERS instead https://angular.io/docs/ts/latest/api/http/HTTP_PROVIDERS-let.html on the other hand you should add ActionTracker to bootstrap — kit, Jan 28 '16 at 08:07

score 5 · Answer 1 · edited May 23 '17 at 12:25

The constructor of the RequestOptions accepts a parameter of type RequestOptionsArgs.

To prevent from such problems, you should use the HTTP_PROVIDERS array in the bootstrap function:

import {bootstrap} from 'angular2/platform/browser';
import {HTTP_PROVIDERS} from 'angular2/http';

bootstrap(AppComponent, [
  HTTP_PROVIDERS
]);

Angular2 provides such arrays to simply configure all providers for a specific feature like HTTP, routing, ...

I guess that you specify the ActionTracker in the providers property of your component. This can be fine except if you want to share the service instance for all elements of your Angular2 application. In this case, you need to specify it within the bootstrap function as well.

If you want to know more about dependency injection in Angular2, this answer could give some hints:

What's the best way to inject one service into another in angular 2 (Beta)?

Hope it helps you, Thierry

angular2 Cannot resolve all parameters for 'RequestOptions'(?)

1 Answers1