If you’ve begun to try out Angular 2, you might have encountered some pretty baffling errors. I know I sure did…
It always feels a bit frustrating to start fresh in a new library or language (or both, in this case) – all your previous experience goes out the window, and you’re back to making beginner mistakes and hitting confusing errors.
Here’s a list of some errors I ran into, my best guesses as to what caused them, and how I fixed them.
The relevance of these errors may (hopefully) decay over time – these ones were encountered in Angular 2 Beta 0 or a late Alpha version.
If you get an error in the console, scroll to the top! The later errors are not very helpful. Look at the first one.
Some of these can be really tricky to track down. As a general strategy, make small changes and test as you go. At least that way it’ll be easier to figure out which bit of code broke (like when the stack traces are not so helpful).
Styles don’t seem to cascade to subcomponents by default… (this can be controlled by the
encapsulationproperty of the
@Componentdecorator. See the docs for more info.)
Errors, Errors, Everywhere…
EXCEPTION: TypeError: allStyles.map is not a function
‘styles’ needs to be an array of strings, not a single string.
EXCEPTION: Component ‘Something’ cannot have both ‘styles’ and ‘@View’ set at the same time”
I provided a
@View decorator, and also put a ‘styles’ key in the
@Component – this doesn’t work.
Put ‘styles’ in the object passed to
From Igor: Put everything in
@Componentand don’t use
@View– it might be used in the future but it’s not needed right now.
EXCEPTION: Unexpected directive value ‘undefined’ on the View of component ‘AppComponent’
I defined a component as
class Something when it should’ve been
export class Something – forgot to export it from the file it was defined in. The
import didn’t fail, but the
directives: [Something] did…
From Igor: This is a problem with polyfilling ES Modules. Something outside of Angular, and in fact a well known issue with all ES module polyfills. Once we have a native implementation you will get an error, but in the meantime if you use the TypeScript compiler you’ll get a compile time error.
EXCEPTION: No provider for UserList! (UserCmp -> UserList)
I forgot to add UserList to the viewProviders array in the parent view. The fix was
EXCEPTION: Cannot resolve all parameters for UserList(?). Make sure they all have valid type or annotations.
I got this when I was trying to inject the
For WHY this happens, see Injecting services in services in Angular 2.
There are 2 different ways to fix this:
Way #1 (preferred): Put
@Injectable() above the class (don’t forget the parens!)
This is the way to go if you’re using TypeScript.
@Injectable() constructor(public http: Http)
Way #2: Put
@Inject(Http) before the param that should be injected with Http:
From Igor: If using TypeScript you should almost never use
@Injectableis less verbose and easier to understand.
@Injectshould primarily used by ES6 users that don’t use TypeScript.
// This doesn't work :( constructor(public http: Http) // This works :) constructor(@Inject(Http) public http: Http)
EXCEPTION: Error during instantiation of UsersCmp
TypeError: this.http.get(…).map is not a function
I thought TypeScript was supposed to save us from TypeErrors!
.map fixed the error… but it seems like it should work. I don’t know too much about this new Http service so, maybe the request failed?
Nope: You have to explicitly include the
map operator from RxJS. Awesome. Add this line to
app.ts (or whatever your main file is):
From Igor: This is an intentional trade off we made as a part of larger effort to curb the uncontrolled increase in payload size. The current behavior sucks. The right fix is to get the pipe operator through TC39 and have it implemented in TypeScript and Babel.
EXCEPTION: Cannot find a differ supporting object ‘[object Object]’ in [users in UsersCmp@2:14]
I’m pretty sure this means that a non-array was passed to
ngFor. Make sure the thing you pass is an array.
Compile error: “Type ‘Observable
' is not assignable to type 'any'."
Got this when I was trying to return
any – it’s not an array, so that doesn’t work. Changing to
any works better (or the actual type, for that matter).
and my personal favorite:
EXCEPTION: [object Object]
WTF? Caused by:
return this.http.get('/users/list') .map(res => res.json()) .subscribe(users => this.users = users); // this line. Why?
Without an error handler, a 404 response causes an exception.
Call subscribe this way instead:
.subscribe( res => res.text(), // success err => handleErr(err), // error () => console.log('done')); // done
Learning React can be a struggle -- so many libraries and tools!
My advice? Ignore all of them :)
For a step-by-step approach, read my book Pure React.