Angular Dart提供商

Question

I want to make GET by web app on angular dart, but I have error in console when I try to open page with app:

Uncaught Error: Invalid argument(s): No provider found for Client0.

And this entrypoint

void main() {
  bootstrap(AppComponent, [BrowserClient]);
}

And I have only one component from and one default component, because I use AngularDart Web App - a web app with material design component template from Web Storm:

@Component(
  selector: 'watch-counter',
  styleUrls: const [
    'package:angular_components/app_layout/layout.scss.css',
    'watch_counter_component.css'],
  templateUrl: 'watch_counter_component.html',
  directives: const [
    CORE_DIRECTIVES,
    materialDirectives,
  ],
  providers: const [UserService]
)
class WatchCounterComponent implements OnInit {

  final UserService userService;

  WatchCounterComponent(this.userService);

  int tabIndex = 0;

  void onTabChange(TabChangeEvent event) {
    tabIndex = event.newIndex;
  }

  final loginModalTabs = const<String>[
    'Login',
    'Registration'
  ];

  @override
  Future<Null> ngOnInit() async {
  }
}

And with this service

@Injectable()
class UserService {

  final Client http;
  UserService(this.http);

  dynamic extractData(Response resp) => JSON.decode(resp.body)['data'];

  Future login(String login, String password) async {
    print("login");
  }

  void register() {
    print("register");
  }

}

All failings when I add http Client into service.

Answer 1

You are providing BrowserClient but injecting a Client .

Change your bootstrap to:

bootstrap(AppComponent, [
  provide(Client, useClass: BrowserClient),
]);

I don't believe BrowserClient is marked with @Injectable() , so you might need:

bootstrap(AppComponent, [
  provide(Client, useFactory: () => new BrowserClient()),
]);

Answer 2

Or add in the bootstrap (or the Componente providers list):

const clientProvider = [
  ClassProvider(Client, useClass: BrowserClient),
];