TheKojuEffect TheKojuEffect - 1 year ago 272
AngularJS Question

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

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';
selector: 'ng2-app',
template: '<h1>My first Angular 2 App</h1>'
export class AppComponent { }


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

Argument type AppComponent is not assignable to parameter type Type

Angular 2 typescript warning

Looking at the
function declaration,
needs to extends

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

My question is:

Is it expected for Angular components to extend

Answer Source

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

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

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