Introduction

I’ve been getting up and running with Angular 2 recently and on the whole I’m liking what I see. Much, much better than Angular 1 I must say!

As with any new framework there’s that period where you keep making the same error, do some research, fix it, do the same thing again 2 hours later … rinse and repeat.

So to help you do reader (and frankly, me) I’ve been jotting down some common errors I keep seeing and document the fixes.

I’ll expand as I see more. Found some too? Add in the comments and I’ll update the post.

Can’t bind to ‘ngForIn’ since it isn’t a known native property in X

Problem

You have something like this:

<ul>
	<li *ngFor="var i in _items">
		<li></li>
		<li></li>
	</li>
</ul>

Fix

You’re a C# developer aren’t you?
Simply change “in” to “of” and you’re sorted .

<ul>
	<li *ngFor="var i of _items">
		<li></li>
		<li></li>
	</li>
</ul>

“No provider for ConnectionBackend”

Love this one!

Problem

When injecting Http as a dependency (or at least via TypeScript you may use something like this:

@Injectable()
export class ToDoService {
	_http: Http = null;
	
	constructor(http: Http) {
		this._http = http;		
	}
	// some more stuff ...
}

Fix

Like you would with pretty much any other dependency. As you’ve found (hey, you’re reading this article!) it doesn’t work. Try this instead:

@Injectable()
export class ToDoService {
	public _http: Http = null;
	
	constructor() {
		let injector = Injector.resolveAndCreate([
			HTTP_PROVIDERS
		]);
		this._http = injector.get(Http);
	}
	// some more stuff ...
}
	

Component doesn’t appear … but no errors

The number of times this one has hit me!

Problem

• Child component doesn’t render
• No errors in the developer console
• What gives?

Fix

Most likely you’ve neglected to add the child component references to the directives declaration.

“Component X has no route config”

Problem

This ocurred when I was traversing from one component (TodoList) to another (TodoEdit). Here’s the code from TodoList I’m travelling from.

	openEdit(todo: ToDo) {
		this._router.navigate([
			"ToDoEdit", {id: todo.id}
		]);
	}	 

But the error was Component ListPage has no route config - ListPage being the component I’m travelling from.

Fix

The error was indeed to do with my @RouteConfig but had nothing to do with ListPage. It was the component being travelled to which was the problem, ToDoEdit.

Instead of ToDoEdit, I had TodoEdit defined in my @RouteConfig:

@RouteConfig([
	{ path: "/", name: "Root", redirectTo: ["List"] },
	{ path: "/list", name: "List", component: ListPage},
	{ path: "/edit/:id", name: "TodoEdit", component: ToDoEdit }
])

Lesson here is, check the case of your route configuration

Epilogue

Granted there aren’t many here. I fully intend to screw up even more than usual and add further findings .

Posted in : code, angular2