无法使用打字稿向我的 Angular 2 应用程序添加新组件

Posted 2023-03-13

【中文标题】无法使用打字稿向我的 Angular 2 应用程序添加新组件

【英文标题】：Can't add a new component to my angular 2 app with typescript

【发布时间】：2017-01-23 21:01:40

【问题描述】：

我正在使用 Angular 2 CLI，并使用 ng generate component MyComponent 创建了组件“MyComponent”。据我所知，我必须将组件添加到 @Component 装饰器的指令键值对中，但是此时打字稿编译失败，说：

ERROR in [default] /Users/Philip/Desktop/Angular2/src/app/app.component.ts:8:2 
Argument of type ' selector: string; template: any; styles: any[]; directives: typeof MyComponentComponent[]; ' is not assignable to parameter of type 'Component'.
  Object literal may only specify known properties, and 'directives' does not exist in type 'Component'.

这是我的应用代码：

import  Component  from '@angular/core';
import  MyComponentComponent  from './my-component/my-component.component'

@Component(
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  directives: [MyComponentComponent],
)
export class AppComponent 
  title = 'app works!';

生成组件的代码我没有碰，只是以防万一：

import  Component, OnInit  from '@angular/core';

@Component(
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
)

export class MyComponentComponent implements OnInit 

  constructor() 

  

  ngOnInit() 
  

【问题讨论】：

你用的是哪个版本的angular2？

您使用的 CLI 版本是否与您正在使用的 Angular 版本相匹配？组件级别的directives 已被弃用，然后被删除（在 RC6、IIRC 中）。

我今天使用 npm 命令安装了这两个，如文档中所示。两者都应该是最新的，但我不知道它们是否匹配。

你用过angular-cli@webpack吗？

【参考方案1】：

Angular2 组件装饰器不再使用这些来嵌入其他组件。我们将需要使用一个名为 entryComponents 的新元数据。请看下面的例子...

@Component(
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  entryComponents:[VehicleListComponent]
)

vehicle-list-component 具有以下组件元数据..

@Component(
  selector: 'app-vehicle-list',
  templateUrl: './vehicle-list.component.html',
  styleUrls: ['./vehicle-list.component.css'],
  providers: [VehicleService]
)

【讨论】：

我刚刚用“entryComponents”替换了“directives”并让它工作。在这里阅读更多：angular.io/docs/ts/latest/api/core/index/…

这里有同样的问题，这个答案很有帮助。有人能解释一下为什么改名吗？

我还参考了@@NgModule 将组件放在声明键上并将其导入文件顶部（在我的情况下@@NgModule 在app.module.ts 上）。

【参考方案2】：

错误本身表示 指令不存在于 组件中，因为它已被弃用。试试下面显示的代码，

import  MyComponentComponent  from './my-component/my-component.component'
import CUSTOM_ELEMENTS_SCHEMA from '@angular/core';

@NgModule(
   ...
   ...
   declarations:[AppComponent,MyComponentComponent], //<---need to declare 
   schemas:     [CUSTOM_ELEMENTS_SCHEMA]             //<---added this line
)

并从 AppComponent 中删除 directives:[MyComponentComponent]。

【讨论】：

谢谢。我已经在我的 app.module.ts 中声明了这一点，如 CLI 自动显示在您的帖子中。打字稿可以编译，但不能在浏览器中运行。这是一个巨大的错误，我已将其更新为我的原始帖子。

那你有没有从@Component 中删除directives:[...] 部分？？？？只需将其删除。我希望它会开始工作......

我不确定，但我刚刚用模式更新了我的答案。现在检查它是否有效。

出了什么问题？

@amirhossein 你需要像import NgModule from '@angular/core';一样导入它

【参考方案3】：

如果您使用 Angular CLI，那么新组件将自动导入并添加到 app.module.ts 中 @ngmodule 的声明部分。我们不需要为此编写任何代码。

【参考方案4】：

运行 create component 命令后，无需对 ANGULAR 4 或更高版本执行任何操作。该错误很可能只是您没有使用新组件元数据文件中的正确选择器名称（例如 componentname.component.ts）。

【参考方案5】：

你有两个选择：

1：在Component内部使用entryComponents标签

2：使用自动导入它的Angular CLI，因此我们不需要显式地为其编写代码。