Angular 2 bootstrap function gives error “Argument type AppComponent is not assignable to parameter type Type”

Question

Here is my first simple Hello World angular 2 app from Angular 2 quick start guide.

import {Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
@Component({
    selector: 'ng2-app',
    template: '<h1>My first Angular 2 App</h1>'
})
export class AppComponent { }


bootstrap(AppComponent);

The application runs fine when I run with npm start but my IntelliJ IDE is showing error in the line with bootstrap(AppComponent)

Argument type AppComponent is not assignable to parameter type Type

Looking at the bootstrap function declaration, AppComponent needs to extends Type.

export declare function bootstrap(appComponentType: Type, customProviders?: Array<any>): Promise<ComponentRef>;

My question is:

Is it expected for Angular components to extend Type?

Answer 1

Actually, AppComponent is expected to extend Type. So use the following:

// app.component.ts
import { Component, Type } from '@angular2/core';

@Component({
...
...
})
export class AppComponent extends Type {}

This will also follow the expected convention by ng2 for AppComponent (to be bootstrapped).

I am not sure why they didn't cover it in the ng2 tutorials, probably they might be targeting to simplify the initial learning, as it runs even without the extends part.

This works perfectly fine in WebStorm/IntelliJ.

Edit: Alternate solution is to update to Webstorm v2016.2 (which is stable at the time of this comment).

Answer 2

I stumbled on this in Intellij 2016.1.2, with the Angular quickstart demo. Setting the following options in IDE helped:

Answer 3

adding comment / annotation like shown below solves the problem

//noinspection TypeScriptValidateTypes
bootstrap(AppComponent);

Answer 4

The above answer did not work for me. I was able to fix it by doing what was recommended in the comments above.

bootstrap(<any>AppComponent);

I am using Intellij 14.1.5

Answer 5

IMO changing the code all over just so that WebStorm / IntelliJ will not complain is not a viable solution. Since I have a separate bundling / compiling process I instead disabled IntelliJ's ops on typescript: Settings->Languages->Typescript - uncheck the options there. If that is already the case for you than you can try checking the options, applying and then unchecking again.

You can see this is still a bit buggy. For example after I have done some class renaming using the IDE (SHIFT + F6) the errors returned. Repeating the above removed them again.

Using IntelliJ 15.0.2

Answer 6

Webstorm 2016.1.3 the solution above works for me

Settings -> Language & Frameworks -> TypeScript: Enable TypeScript, Use tsconfig.json

PS: This is the same solution as described before for previous Webstorm version (2016.1.3)

Answer 7

This error introducing due to TypeScript compiler is not enabled in your IDE. you need to enable TypeScript compiler.

Enable Typescript compiler in Webstorm:

go to Webstorm menu(upper left menu) => Preferences menu => Languages & Frameworks => click on TypeScript => Enable Typescript compiler(enable checkbox) => enable Use tsconfig.json option => click Ok button and you are done.

Answer 8

For the new angular2 router I had to do ..

bootstrap(AppComponent [
    <any>APP_ROUTER_PROVIDERS
    ]).catch((err:any) => console.error(err));

NOTE any is used on APP_ROUTER_PROVIDERS not AppComponent.

Answer 9

//noinspection TypeScriptValidateTypes Worked for me in WebStorm.

Also I've opened my project in IntelIJ instead and there was no error.