Blog coding and discussion of coding about JavaScript, PHP, CGI, general web building etc.

Thursday, July 28, 2016

Angular 2 bootstrap function gives error

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';  @Component({      selector: 'ng2-app',      template: '

My first Angular 2 App

' }) 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): Promise;  

My question is:

Is it expected for Angular components to extend Type?

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


adding comment / annotation like shown below solves the problem

//noinspection TypeScriptValidateTypes  bootstrap(AppComponent);  

Answer by Kris Hollenbeck for Angular 2 bootstrap function gives error "Argument type AppComponent is not assignable to parameter type Type"


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

bootstrap(AppComponent);  

I am using Intellij 14.1.5

Answer by Erez Cohen for Angular 2 bootstrap function gives error "Argument type AppComponent is not assignable to parameter type Type"


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 by Wojciechu for Angular 2 bootstrap function gives error "Argument type AppComponent is not assignable to parameter type Type"


//noinspection TypeScriptValidateTypes Worked for me in WebStorm.

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

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


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

enter image description here

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


For the new angular2 router I had to do ..

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

NOTE any is used on APP_ROUTER_PROVIDERS not AppComponent.

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


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 by jsNovice for Angular 2 bootstrap function gives error "Argument type AppComponent is not assignable to parameter type Type"


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


Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72

0 comments:

Post a Comment

Popular Posts

Powered by Blogger.