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

Ad

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

Angular 2 typescript warning

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?

Ad

Answer

Ad

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).

Ad
source: stackoverflow.com
Ad