Angular 5多步骤表单报错：'app-ques-navbar'不是已知元素

嘿，这个问题我之前开发Angular项目时也踩过坑！本质就是Angular的编译器找不到你的app-ques-navbar组件定义，下面是你可以逐一排查的关键点，按顺序来基本就能搞定：

1. 确认子组件是否在对应模块中声明 #

找到ques-navbar组件对应的QuesNavbarComponent类，看看它属于哪个模块（比如和主组件同属AdminModule，或是在单独的共享模块里）：

• 如果和主组件在同一个模块，一定要把QuesNavbarComponent加到模块的declarations数组里；要是这个组件需要被其他模块的组件调用，还得同时加到exports数组中：

@NgModule({
  declarations: [
    AdminRegQuesComponent,
    QuesNavbarComponent // 必须在这里声明，Angular才能识别它
  ],
  exports: [
    QuesNavbarComponent // 其他模块要用到该组件时，必须导出它
  ]
})
export class AdminModule { }

2. 检查组件选择器的拼写 #

打开ques-navbar.component.ts文件，确认@Component装饰器里的selector属性确实是app-ques-navbar——别小看拼写细节，大小写、连字符错一个都不行：

@Component({
  selector: 'app-ques-navbar', // 这里要和模板中使用的标签完全一致
  templateUrl: './ques-navbar.component.html',
  styleUrls: ['./ques-navbar.component.css']
})
export class QuesNavbarComponent { }

3. 主组件所在模块需导入子组件的模块 #

如果QuesNavbarComponent是放在单独的共享模块（比如SharedModule）里，那你得在主组件所在的AdminModule中导入这个共享模块，否则Angular还是找不到子组件：

@NgModule({
  imports: [
    CommonModule,
    SharedModule // 导入包含子组件的模块
  ],
  declarations: [AdminRegQuesComponent]
})
export class AdminModule { }

4. 核对模板中的组件标签拼写 #

再去主组件的admin-reg-ques.component.html里检查一遍，你写的是不是<app-ques-navbar>，有没有把ques写成quest、漏了连字符这类低级错误？Angular对组件标签的匹配是严格的，差一点都不行。

5. 重启Angular开发服务器 #

有时候修改模块配置后，Angular的热重载可能没及时生效，你可以先停掉ng serve，再重新启动服务器，确保所有模块变更都被正确加载。

内容的提问来源于stack exchange，提问作者Casey Harrils