Angular 2 引导函数给出错误“参数类型 AppComponent 不可分配给参数类型类型”答案

【问题标题】：Angular 2 bootstrap function gives error "Argument type AppComponent is not assignable to parameter type Type"Angular 2 引导函数给出错误“参数类型 AppComponent 不可分配给参数类型类型”
【发布时间】：2016-03-25 19:44:33
【问题描述】：

这是我的第一个简单的Hello World angular 2 应用程序，来自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);

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

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

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

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

我的问题是：

Angular 组件是否可以扩展 Type？

【问题讨论】：

这是上周新更新的 IntelliJ 版本吗？我问是因为最新版本的 WebStorm 在语法高亮方面存在问题。
是的，IntelliJ 15.0.2
你不应该这样做，但现在要让它安静下来，你可以写bootstrap(<Type> AppComponent)。希望 JetBrains 尽快将其整合在一起。
我也在使用 15.0.2，并且在 bootstrap 内的组件引用以及指令内和 @RouteConfig 部分内的引用方面遇到了类似的问题。我在有问题的引用之前添加了<any>（例如bootstrap(<any>App) 和directives: [...COMMON_DIRECTIVES, <any>RouterOutlet] 和@RouteConfig([{ path: '/', component: <any>HomeComponent, as: 'Home'}])），这暂时使事情平静下来。
@AaronJessen 这解决了我的指令问题。这是 phpstorm/webstorm 的问题还是只是打字稿问题？

标签： javascript angular typescript intellij-idea

【解决方案1】：

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

【讨论】：

谢谢，为什么它会影响代码检查？不想被IDE连续编译代码
在我的 PhpStorm 上完美运行
对不起，这个答案不可靠。 Npm 正在监视 TypeScript 的更改并将 TS 编译为 JS。所以激活这个选项，TS 会被编译 2 次（从 IDE 和 npm）。
@Mick，您不会将此选项与tsc -w 命令一起使用。你会想要使用其中一个或另一个，而不是两者。
noice，工作就像一个魅力。我没有自动编译我的 TS，所以我没有意识到这是问题所在

【解决方案2】：

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

//noinspection TypeScriptValidateTypes
bootstrap(AppComponent);

【讨论】：

这到底是做什么的？
这是您问题的好答案link

【解决方案3】：

以上答案对我不起作用。我可以通过执行上述 cmets 中的建议来修复它。

bootstrap(<any>AppComponent);

我正在使用 Intellij 14.1.5

【讨论】：

【解决方案4】：

其实，AppComponent 应该会扩展 Type。所以使用以下内容：

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

@Component({
...
...
})
export class AppComponent extends Type {}

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

我不确定他们为什么没有在 ng2 教程中介绍它，可能他们的目标是简化初始学习，因为即使没有 extends 部分也可以运行。

这在 WebStorm/IntelliJ 中运行良好。

编辑：替代解决方案是更新到 Webstorm v2016.2（在发表此评论时它是稳定的）。

【讨论】：

对“AppComponent 有望扩展类型”的一些参考会很棒。 Official angular tutorial 没有提及。
这是不久前发布的。您的担忧仍然有效。请转到以下链接，我想粘贴一张图片，但我希望在评论 1 中这是不可能的。angular.io/docs/ts/latest/api/core/index/PlatformRef-class.html。转到 bootstrapModule 定义，第一个参数的类型是 Type，我现在可以看到它是通用的 2. 当您使用 npm 安装 ng-2 时，导航到 node_modules\@angular\core\src\application_ref.d.ts：第 122 行。存在类似的定义。我再次强调 angular-2 自从我们上次看到它以来已经发生了很大变化。一段时间后我的评论可能会过时。

【解决方案5】：

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

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

使用 IntelliJ 15.0.2

【讨论】：

请注意，如果您需要启用 typescript 编译器，我建议您在“使用输出路径”字段中设置特定路径。

【解决方案6】：

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

设置 -> 语言和框架 -> 打字稿：启用 TypeScript，使用 tsconfig.json

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

【讨论】：

这个答案与stackoverflow.com/a/37631635/1433665重复

【解决方案7】：

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

在 Webstorm 中启用 Typescript 编译器：

进入 Webstorm 菜单（左上菜单）=> 首选项菜单 => 语言和框架 => 点击 TypeScript => 启用 Typescript 编译器（启用复选框） => 启用使用 tsconfig.json 选项 => 单击确定按钮，您就完成了。

【讨论】：

【解决方案8】：

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

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

注意 any 用于 APP_ROUTER_PROVIDERS 而不是 AppComponent。

【讨论】：

【解决方案9】：

//noinspection TypeScriptValidateTypes 在 WebStorm 中为我工作。

另外，我在 IntelIJ 中打开了我的项目，没有错误。

【讨论】：