我是Angular2的新手。我试图创建一个组件,但显示一个错误。

这是app.component.ts文件。

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

@Component({
  selector: 'my-app',
  template: `
    <h1>Hello {{name}}</h1>
    <h4>Something</h4>
    <my-component></my-component>
  `,
  directives: [MyComponentComponent]
})
export class AppComponent { name = 'Sam' }

这是我要创建的组件。

import { Component } from '@angular/core';

@Component({
selector: 'my-component',
template: `
    <p>This is my article</p>
`
})

export class MyComponentComponent {

}

显示两个错误:

如果my-component是一个Angular组件,那么验证它是否是这个模块的一部分。 如果my-component是Web组件,那么将CUSTOM_ELEMENTS_SCHEMA添加到@NgModule中。模式来抑制此消息。

请帮助。


当前回答

我有不同的模块除了app.module,例如主页。模块

我忘了把Home-page.component添加到Home-page。模块

其他回答

你必须在你的AppComponent的同一个模块中声明你的MyComponentComponent。

import { AppComponent } from '...';
import { MyComponentComponent } from '...';

@NgModule({
   declarations: [ AppComponent, MyComponentComponent ],
   bootstrap: [ AppComponent ]
})
export class AppModule {}

转到tsconfig。json文件。把这段代码写在angularCompilerOption下:

 "angularCompilerOptions": {
     "fullTemplateTypeCheck": true,
     "strictInjectionParameters": true,
     **"enableIvy": false**
 }

检查filename. ponent.ts中的选择器

在各种html文件中使用标签

<my-first-component></my-first-component>

应该是

<app-my-first-component></app-my-first-component>

例子

@Component({
  selector: 'app-my-first-component',
  templateUrl: './my-first-component.component.html',
  styleUrls: ['./my-first-component.component.scss']
})

上述错误从Angular 9开始也会产生。 这本书提供了一个解决方案。

该警告建议使用CUSTOM_ELEMENTS_SCHEMA,但所讨论的元素不是Web组件。我们希望Angular直接忽略这些元素。因此,我们使用NO_ERRORS_SCHEMA,“允许任何元素上的任何属性的模式”。 向各自的.spec文件添加模式:[NO_ERRORS_SCHEMA]可以消除错误。

await TestBed.configureTestingModule({
  declarations: [MyComponent],
  schemas: [NO_ERRORS_SCHEMA],
}).compileComponents();

在我的例子中,我正在为一个使用子组件的组件编写单元测试,并且我正在编写测试以确保这些子组件在模板中:

it('should include the interview selection subview', () => {
    expect(fixture.debugElement.query(By.css('app-interview')))
    .toBeTruthy()  
  }); 

我没有得到一个错误,但一个警告:

警告:“应用面试”不是一个已知的元素: 如果'app-interview'是一个Angular组件,那么验证它是这个模块的一部分。警告:“应用面试”不是一个已知的元素: 如果'app-interview'是一个Angular组件,那么验证它是这个模块的一部分。 如果'app-interview'是一个Web组件,那么将'CUSTOM_ELEMENTS_SCHEMA'添加到'@NgModule '中。这个组件的模式 为了压制这条信息。”

此外,在测试期间,子组件没有在浏览器中显示。

我使用ng g c newcomponent来生成所有的组件,所以它们已经在appmodule中声明了,而不是我正在指定的组件的测试模块。

beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ EditorComponent,
        InterviewComponent]
    })
    .compileComponents();
  }));