我是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中。模式来抑制此消息。

请帮助。


当前回答

这可能是晚了,但我得到了同样的问题,但我重建(ng serve)项目和错误已经消失了

其他回答

我有一个类似的问题,但没有一个提到的解决方案工作。最后我意识到我有一个路由问题:

我想如果我在应用程序路由中指定我的组件。模块如下:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MainComponent } from './pages/main/main.component';

const routes: Routes = [
  {
    path: '', 
    component: MainComponent
  },
]

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

我将不必在我的AppModule中导入MainModule,这是错误的,因为这里只有组件被导入。MainModule中声明的任何其他组件将不可见,这将导致您所描述的错误消息。

解决方案1: 导入声明模块 解决方案2: 惰性加载组件,如下所示:

const routes: Routes = [
{
    path: '', loadChildren: () => import('path_to_your_declaringModule').then(m => m.declaringModule)},
}

这是可行的,因为整个模块都导入到这里。

我意识到你在你的例子中没有使用路由,只是把这个发布给其他可能使用路由并在搜索解决方案时偶然发现这个问题的人,就像我一样。

不要导出默认的MyComponentComponent类!

与标题相关的问题,如果不是具体的问题:

我不小心做了一个…

export default class MyComponentComponent {

... 这也把事情搞砸了。

为什么?当我把它放入声明时,VS Code添加了导入到我的模块,但不是…

import { MyComponentComponent } from '...';

它有

import MyComponentComponent from '...';

这并没有向上映射到下游,假设因为它没有在默认导入的任何地方“真正”命名。

export class MyComponentComponent {

没有违约。利润。

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

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

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

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

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

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

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