Fatal编程技术网
  • javascript/
  • Javascript 错误：未捕获（承诺中）：错误：模板解析错误：'；应用程序导航栏'；不是已知元素：

Javascript 错误：未捕获（承诺中）：错误：模板解析错误：'；应用程序导航栏'；不是已知元素：

javascript html angular

Javascript 错误：未捕获（承诺中）：错误：模板解析错误：'；应用程序导航栏'；不是已知元素：,javascript,html,angular,Javascript,Html,Angular,我正在制作一个多步骤表单。我使用此处的说明作为说明指南： 我和Angular 5一起工作 到目前为止，我正在做一个测试，其中主HTML组件admin reg ques调用一个子坐标HTML组件ques navbar 键入时：http://localhost:4200/admin/admin-注册问题 我得到以下错误： VM6056 core.js:1624 ERROR Error: Uncaught (in promise): Error: Template parse errors: 'ap

我正在制作一个多步骤表单。我使用此处的说明作为说明指南：

我和Angular 5一起工作

到目前为止，我正在做一个测试，其中主HTML组件
admin reg ques
调用一个子坐标HTML组件
ques navbar

键入时：
http://localhost:4200/admin/admin-注册问题

我得到以下错误：

VM6056 core.js:1624 ERROR Error: Uncaught (in promise): Error: Template parse errors:
'app-ques-navbar' is not a known element:
1. If 'app-ques-navbar' is an Angular component, then verify that it is part of this module.
2. If 'app-ques-navbar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
  <div style="background:white">
      <h1>stuff is in here</h1>
      [ERROR ->]<app-ques-navbar></app-ques-navbar>
  </div>
</body>"): ng:///AuthAdminModule/AdminRegQuesComponent.html@3:6
Error: Template parse errors:
'app-ques-navbar' is not a known element:
1. If 'app-ques-navbar' is an Angular component, then verify that it is part of this module.
2. If 'app-ques-navbar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
  <div style="background:white">
      <h1>stuff is in here</h1>
      [ERROR ->]<app-ques-navbar></app-ques-navbar>
  </div>
</body>"): ng:///AuthAdminModule/AdminRegQuesComponent.html@3:6
管理注册问题组件.ts

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


@Component({
  selector: 'app-ques-navbar',
  templateUrl: './ques-navbar.component.html',
  styleUrls: ['./ques-navbar.component.css']
})
export class QuesNavbarComponent implements OnInit {

  // need for work with the Template = do not erase!
  ngAfterViewInit() { document.getElementById('preloader').classList.add('hide'); }

  constructor() { }

  ngOnInit() {
  }    
}

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

@Component({
  selector: 'app-admin-reg-ques',
  templateUrl: './admin-reg-ques.component.html',
  styleUrls: ['./admin-reg-ques.component.css']
})
export class AdminRegQuesComponent implements OnInit {

  // need for work with the Template = do not erase!
  ngAfterViewInit() { document.getElementById('preloader').classList.add('hide'); }


  constructor() { }

  ngOnInit() {
  }
}

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { QuesMainComponent } from './ques-main/ques-main.component';
import { QuesDoneComponent } from './ques-done/ques-done.component';
import { QuesAddressComponent } from './ques-address/ques-address.component';
import { QuesNavbarComponent } from './ques-navbar/ques-navbar.component';
import { QuesWorkflowComponent } from './ques-workflow/ques-workflow.component';
import { AdminRegQuesComponent } from './admin-reg-ques.component';

export const routes = [
  { path:'', redirectTo:'admin-reg-ques', pathMatch:'full' },
  { path: 'admin-reg-ques', component: AdminRegQuesComponent, pathMatch: 'full' },
 ];

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [QuesMainComponent, QuesDoneComponent, QuesAddressComponent, QuesNavbarComponent, QuesWorkflowComponent]
})
export class AdminRegQuesModule { }
admin reg ques.component.html

<h1>navigation bar goes here </h1>

<body style="background-color: white">
  <div style="background:white">
      <h1>item is in here</h1>
      <app-ques-navbar></app-ques-navbar>
  </div>
</body>
如果模块
AdminReqQuesModule
正由另一个模块导入，而该模块需要呈现
QuesNavbarComponent
，则需要将其导出到
AdminReqQuesModule
中

@NgModule({
   imports: [
       CommonModule
   ],
   declarations: [QuesMainComponent, QuesDoneComponent, QuesAddressComponent, QuesNavbarComponent, QuesWorkflowComponent],
   exports: [QuesMainComponent, QuesDoneComponent, QuesAddressComponent, QuesNavbarComponent, QuesWorkflowComponent]
})
export class AdminRegQuesModule { }
这将使您的组件在其他模块中可见

从错误中可以看到，有一个对
AuthAdminModule
的引用。您是否正在尝试将组件注入此模块？

可能无法在模块的声明数组中添加QuesNavbarComponent？@Gilsdav-感谢您的回复。我已经在上面的消息中添加了admin-reg-ques.module.ts。你能记下我在哪里换钱吗？这看起来像是在其他模块中使用AdminRegQuesComponent，因为此处未使用“routes”，并且此处未声明AdminRegQuesComponent。请将具有相同功能的所有内容放在同一个模块中。技术上正确，但不遵守“功能模块”准则。@Gilsdav我不确定我是否理解您的意思。@HuseinRecevic文件夹结构明确表示QuesNavbarComponent将仅用于AdminRegQuesModule（尤其是AdminRegQuesComponent）。问题在于模块的错误使用。您是说他的
AdminReqQuesModule
不应该导出所有功能，而应该导出一个内部承载所有其他组件的主要组件吗？你说得对，但从技术上讲，这更像是一个解决问题的答案。是的，导出一个主要组件或不导出任何内容，因为此模块有路由，所以它可以完全独立。但可以肯定的是，你的快速解决方案会奏效。 
@NgModule({
   imports: [
       CommonModule
   ],
   declarations: [QuesMainComponent, QuesDoneComponent, QuesAddressComponent, QuesNavbarComponent, QuesWorkflowComponent],
   exports: [QuesMainComponent, QuesDoneComponent, QuesAddressComponent, QuesNavbarComponent, QuesWorkflowComponent]
})
export class AdminRegQuesModule { }