Recently delving into Angular2, I diligently studied all the tutorials on the official website and eagerly started working on my project. However, I hit a roadblock almost immediately.
Here are the snippets of code:
app.ts:
import { Component } from '@angular/core';
import { bootstrap } from '@angular/platform-browser-dynamic';
import { ApiClient } from './services/api-client';
@Component({
selector: 'app',
template: 'Hello',
providers: [ApiClient]
})
export class AppComponent { constructor(private apiClient: ApiClient) { } }
bootstrap(AppComponent);
api-client.ts:
import { Injectable } from '@angular/core'
@Injectable()
export class ApiClient {
public login(username: string, password: string, rememberMe: boolean) : boolean {
if (username == 'testuser' && password == 'password')
return true;
else
return false;
}
}
However, this seemingly straightforward code snippet throws a perplexing exception: EXCEPTION: Error: Uncaught (in promise): TypeError: dep is null
If I remove constructor DI then the exception disappears.
I've been grappling with this issue for the past 4 hours, but to no avail. It's frustrating how the exception message provides no useful information.
Thank you in advance for any assistance.
UPDATE
Referring to the constructor DI, I encountered this:
constructor(private apiClient: ApiClient) { }
Update 2
After replacing Injectable() with Component({}), the code now functions flawlessly. What could this indicate? Could it be an issue with my local Angular2 setup or perhaps some configuration mishap?