我是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中。模式来抑制此消息。
请帮助。
在你的components.module.ts中，你应该像这样导入IonicModule
这样的:
import {IonicModule} from '@ionic/angular';
然后像这样导入IonicModule:
imports: [
CommonModule,
IonicModule
],
所以你的components.module.ts会像这样:
import { CommonModule } from '@angular/common';
import {PostComponent} from './post/post.component'
import { IonicModule } from '@ionic/angular';
@NgModule({
declarations: [PostComponent],
imports: [
CommonModule,
IonicModule
],
exports: [PostComponent]
})
export class ComponentsModule { }```
检查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 v11，在尝试延迟加载组件(await import('./my-component.component'))时遇到了这个错误，即使导入和导出设置正确。
我最终发现解决方案是删除单独的专用模块的文件，并将模块内容移动到组件文件本身中。
rm -r my-component.module.ts
并在my-component中添加模块。Ts(同一文件)
@Component({
selector: 'app-my-component',
templateUrl: './my-component.page.html',
styleUrls: ['./my-component.page.scss'],
})
export class MyComponent {
}
@NgModule({
imports: [CommonModule],
declarations: [MyComponent],
})
export class MyComponentModule {}
我有一个类似的问题，但没有一个提到的解决方案工作。最后我意识到我有一个路由问题:
我想如果我在应用程序路由中指定我的组件。模块如下:
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)},
}
这是可行的，因为整个模块都导入到这里。
我意识到你在你的例子中没有使用路由，只是把这个发布给其他可能使用路由并在搜索解决方案时偶然发现这个问题的人，就像我一样。
