Angular 2 boot function gives error "AppComponent argument type not assigned 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 works fine when I start with npm start , but my IntelliJ IDE shows an error in the line with bootstrap(AppComponent)

The argument type of the AppComponent is not assigned to the parameter type. Type

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

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

My question is:

Are angular components expected to have a Type extension?

Answer 1

In fact, AppComponent is expected to extend the type . Therefore, use the following:

 // app.component.ts import { Component, Type } from '@angular2/core'; @Component({ ... ... }) export class AppComponent extends Type {} 

This will also follow the expected ng2 convention for the AppComponent (for download).

I'm not sure why they did not cover it in ng2 tutorials, maybe they can be aimed at simplifying the initial training, since it works even without the extends part.

This works great in WebStorm / IntelliJ.

Edit: An alternative solution is to upgrade to Webstorm v2016.2 (which is stable during this comment).

Answer 2

I came across this in Intellij 2016.1.2, with a demo of Angular quickstart. Setting the following options in the IDE helped:

Answer 3

Adding a comment / annotation as shown below solves the problem

 //noinspection TypeScriptValidateTypes bootstrap(AppComponent); 

Answer 4

This answer did not help me. I was able to fix this by doing what was recommended in the comments above.

 bootstrap(<any>AppComponent); 

I am using Intellij 14.1.5

Answer 5

IMO changes the code in everything, so WebStorm / IntelliJ will not complain, it is not a viable solution. Since I have a separate build / compile process, I instead disabled IntelliJ ops on typescript: Settings-> Languages ​​→ Typescript - uncheck the options. If this already applies to you, you can try checking the settings by applying, and then uncheck again.

You can see that this is still a bit wrong. For example, after I renamed classes using the IDE (SHIFT + F6), the returned errors. Repeating the above deletes them again.

Using IntelliJ 15.0.2

Answer 6

Webstorm 2016.1.3 the solution above works for me

Settings -> Language and Framework -> TypeScript: Enable TypeScript, Use tsconfig.json

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

Answer 7

This error due to the TypeScript compiler is not included in your IDE. you need to enable the TypeScript compiler.

Enable TypeScript Compiler in Webstorm:

go to the Webstorm menu (in the upper left menu) => Settings menu => Languages ​​and frames => click TypeScript => Enable TypeScript compiler (enable the checkbox) => enable Use the tsconfig.json parameter => click the “OK” button, and everything is ready.

Answer 8

For the new angular2 router I had to do.

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

NOTE. Anything is used for APP_ROUTER_PROVIDERS, not for AppComponent.

Answer 9

//noinspection TypeScriptValidateTypes Worked for me in WebStorm.

I also opened my project in IntelIJ instead, and there was no error.