提问人:Pablo N 提问时间:11/18/2023 更新时间:11/19/2023 访问量:31
Angular NG8001 错误。组件只在一个页面上工作,而不是在页面上工作
Angular NG8001 error. component just works on one page, not tohers
问:
昨天我完成了我的一个项目页面“home.component”的工作,今天当我想在其他页面上使用一些组件但它们不起作用时,唯一有效的是“home”和app.component.html。 其他错误:
ERROR
src/app/pages/sign-in/sign-in.component.html:2:1 - error NG8001: 'app-header' is not a known element:
1. If 'app-header' is an Angular component, then verify that it is part of this module.
2. If 'app-header' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
2 <app-header></app-header>
~~~~~~~~~~~~
src/app/pages/sign-in/sign-in.component.ts:5:16
5 templateUrl: './sign-in.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component SignInComponent.
我的文件夹遵循以下顺序:
-- /src
|-- /app
| | -- /core
| | | -- /components
| | | | -- /header
| | | | | -- /header.component.css
| | | | | -- /header.component.html
| | | | | -- /header.component.ts
| | | |
| | | | -- /slider
| | | | | -- /slider.component.css
| | | | | -- /slider.component.html
| | | | | -- /slider.component.ts
| | |
| | | -- /pages
| | | | -- /home
| | | | | -- /home.component.css
| | | | | -- /home.component.html
| | | | | -- /home.component.ts
| | | |
| | | | -- /sign-in
| | | | | -- /sign-in.component.css
| | | | | -- /sign-in.component.html
| | | | | -- /sign-in.component.ts
header.component.ts(组件.ts)
import { Component } from '@angular/core';
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.css']
})
export class HeaderComponent {
title = 'travel-blog';
}
首页.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent {
title = 'travel-blog';
}
home.component.html
<app-header></app-header>
/*a bunch of code about this site*/
<app-slider></app-slider>
<app-footer></app-footer>
sign-in.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-sign-in',
templateUrl: './sign-in.component.html',
styleUrls: ['./sign-in.component.css']
})
export class SignInComponent {
title = 'travel-blog';
}
app.module.ts(应用模块.ts)
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ContactFormComponent } from './core/components/contact-form/contact-form.component';
import { FooterComponent } from './core/components/footer/footer.component';
import { HeaderComponent } from './core/components/header/header.component';
import { SliderComponent } from './core/components/slider/slider.component';
import { AboutUsComponent } from './pages/about-us/about-us.component';
import { AsiaComponent } from './pages/asia/asia.component';
import { EuropeComponent } from './pages/europe/europe.component';
import { ItalyComponent } from './pages/europe/italy/italy.component';
import { SpainComponent } from './pages/europe/spain/spain.component';
import { HomeComponent } from './pages/home/home.component';
import { LastBlogsComponent } from './pages/last-blogs/last-blogs.component';
import { PatreonComponent } from './pages/patreon/patreon.component';
import { SignInComponent } from './pages/sign-in/sign-in.component';
import { SignUpComponent } from './pages/sign-up/sign-up.component';
const appRoutes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'sign-in', component: SignInComponent },
{ path: 'sign-up', component: SignUpComponent },
{ path: 'spain', component: SpainComponent },
{ path: 'italy', component: ItalyComponent },
{ path: 'europe', component: EuropeComponent },
{ path: 'asia', component: AsiaComponent },
{ path: 'last-blogs', component: LastBlogsComponent },
{ path: 'patreon', component: PatreonComponent },
{ path: 'about-us', component: AboutUsComponent },
]
@NgModule({
declarations: [
AppComponent,
HeaderComponent,
SliderComponent,
ContactFormComponent,
FooterComponent,
HomeComponent
],
imports: [
BrowserModule,
AppRoutingModule,
RouterModule.forRoot(appRoutes),
],
providers: [],
bootstrap: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }
app.component.html
<router-outlet></router-outlet>
我认为问题可能出在路由器插座上,因为在app.component.html中我可以使用这些组件。
感谢您的时间和帮助。
我尝试了以下方法:
- 重新启动服务器,关闭终端并使用新终端打开服务器
- 使用确切的路由手动导入组件,但 angular 没有“找到”它
答:
0赞
Tony Ngo
11/19/2023
#1
经验法则是,当您想要使用组件时,您需要在列表中定义组件declarations
由于您已经在路由中定义了 ,因此应该将其添加到代码中,如下所示SignInComponent
@NgModule({
declarations: [
AppComponent,
HeaderComponent,
SliderComponent,
ContactFormComponent,
FooterComponent,
HomeComponent,
SignInComponent // add here
],
imports: [
BrowserModule,
AppRoutingModule,
RouterModule.forRoot(appRoutes),
],
providers: [],
bootstrap: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }
评论
0赞
Pablo N
11/19/2023
谢谢,现在它工作了。我正在学习 angular,并认为不需要这些路由来放入声明。
评论