typescript Angular 2 bootstrap 函数给出错误“参数类型 AppComponent 不可分配给参数类型类型”

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/34366797/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 03:10:09  来源:igfitidea点击:

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

javascriptangulartypescriptintellij-idea

提问by TheKojuEffect

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

这是我Hello World来自Angular 2 快速入门指南的第一个简单的angular 2 应用程序。

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 startbut my IntelliJ IDE is showing error in the line with bootstrap(AppComponent)

当我运行时,应用程序运行良好,npm start但我的 IntelliJ IDE 在行中显示错误bootstrap(AppComponent)

Argument type AppComponentis not assignable to parameter type Type

参数类型AppComponent不可分配给参数类型Type

Angular 2 typescript warning

Angular 2 打字稿警告

Looking at the bootstrapfunction declaration, AppComponentneeds to extends Type.

查看bootstrap函数声明,AppComponent需要扩展Type

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

My question is:

我的问题是:

Is it expected for Angular components to extend Type?

Angular 组件是否可以扩展Type

采纳答案by jsNovice

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

实际上,AppComponent 有望扩展 Type。因此,请使用以下内容:

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

这也将遵循 ng2 对 AppComponent(将被引导)的预期约定。

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

我不知道为什么他们没有在 ng2 教程中介绍它,可能他们的目标是简化初始学习,因为它甚至在没有扩展部分的情况下也能运行。

This works perfectly fine in WebStorm/IntelliJ.

这在 WebStorm/IntelliJ 中非常有效。

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

编辑:替代解决方案是更新到 Webstorm v2016.2(在此评论时稳定)。

回答by JockX

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

我在 Intellij 2016.1.2 的 Angular 快速入门演示中偶然发现了这一点。在 IDE 中设置以下选项有帮助:

enter image description here

在此处输入图片说明

回答by Otari

adding comment / annotation like shown below solves the problem

添加如下所示的注释/注释可以解决问题

//noinspection TypeScriptValidateTypes
bootstrap(AppComponent);

回答by Kris Hollenbeck

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

我正在使用 Intellij 14.1.5

回答by Mukund Kumar

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

您的 IDE 中未启用由于 TypeScript 编译器而引入的此错误。您需要启用 TypeScript 编译器。

Enable Typescript compiler in Webstorm:

在 Webstorm 中启用 Typescript 编译器:

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.

转到 Webstorm 菜单(左上角菜单)=> 首选项菜单 => 语言和框架 => 单击 TypeScript => 启用 Typescript 编译器(启用复选框) => 启用使用 tsconfig.json 选项 => 单击确定按钮,你就完成了。

enter image description here

在此处输入图片说明

回答by Erez Cohen

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.

IMO 完全改变代码以使 WebStorm / IntelliJ 不会抱怨不是一个可行的解决方案。由于我有一个单独的捆绑/编译过程,我改为禁用 IntelliJ 在打字稿上的操作:设置->语言->打字稿-取消选中那里的选项。如果您已经是这种情况,那么您可以尝试检查选项,应用然后再次取消选中。

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.

你可以看到这仍然有点问题。例如,在我使用 IDE (SHIFT + F6) 完成一些类重命名后,返回的错误。重复上述操作再次删除它们。

Using IntelliJ 15.0.2

使用 IntelliJ 15.0.2

回答by Pumych

Webstorm 2016.1.3 the solution above works for me

Webstorm 2016.1.3 上面的解决方案对我有用

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

设置 -> 语言和框架 -> TypeScript:启用 TypeScript,使用 tsconfig.json

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

PS:这与之前的Webstorm版本(2016.1.3)描述的解决方案相同

回答by danday74

For the new angular2 router I had to do ..

对于新的 angular2 路由器,我必须做..

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

NOTE any is used on APP_ROUTER_PROVIDERS not AppComponent.

注意 any 用于 APP_ROUTER_PROVIDERS 而不是 AppComponent。

回答by Wojciechu

//noinspection TypeScriptValidateTypesWorked for me in WebStorm.

//noinspection TypeScriptValidateTypes在 WebStorm 对我来说有效。

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

此外,我已经在 IntelIJ 中打开了我的项目,并且没有错误。