Angular2 RC6：'<component> is not a known element'

14 回答

• 1

  具有相同错误消息的另一个可能原因是标记名称和选择器名称不匹配 . 对于这种情况：

  <header-area></header-area> 标记名称必须与组件声明中的 'header-area' 完全匹配：

  @Component({
    selector: 'header-area',
  

  回复于 2024-05-03T16:52:04+08:00
• 23

  我将模块A导入模块B时遇到此错误，然后尝试使用模块B中模块A的组件 .

  这是在我的 exports 数组中声明该组件的问题 .

  @NgModule({
    declarations: [
      MyComponent
    ],
    exports: [
      MyComponent
    ]
  })
  export class ModuleA {}
  

  @NgModule({
    imports: [
      ModuleA
    ]
  })
  export class ModuleB {}
  

  回复于 2024-05-03T16:52:04+08:00
• 179

  我在Sanket's answer和评论的帮助下修复了它 .

  您在错误消息中无法知道并且不明显的是：我在我的App Module（= RootModule）中将PlannerComponent导入为@ NgModule.declaration .

  通过将PlannerModule导入为@NgModule.imports来修复错误 .

  之前：

  @NgModule({
    declarations: [
      AppComponent,
      PlannerComponent,
      ProfilAreaComponent,
      HeaderAreaComponent,
      NavbarAreaComponent,
      GraphAreaComponent,
      EreignisbarAreaComponent
    ],
    imports: [
      BrowserModule,
      RouterModule.forRoot(routeConfig),
      PlannerModule
    ],
    bootstrap: [AppComponent]
  })
  export class AppModule {
  

  后：

  @NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
      BrowserModule,
      RouterModule.forRoot(routeConfig),
      PlannerModule
    ],
    bootstrap: [AppComponent]
  })
  export class AppModule {
  }
  

  谢谢你的帮助 ：）

  回复于 2024-05-03T16:52:04+08:00
• 0

  如果您已经使用了Webclipse自动生成的组件定义，您可能会发现选择器名称前面有“app-” . 显然，这是一个新的约定，用于声明主应用程序组件的子组件 . 如果您使用'new' - 'component'在Angular IDE中创建选择器，请检查您的选择器在组件中的定义方式 . 所以不要放

  <header-area></header-area>
  

  你可能需要

  <app-header-area></app-header-area>
  

  回复于 2024-05-03T16:52:04+08:00
• 1

  在 planner 组件中，您必须缺少import HeaderAreaComponent ，如下所示 -

  import { HeaderAreaComponent } from '../header-area.component'; 
  //change path according your project
  

  另外，请确保 - All the components and pipes must be declared via an NgModule .

  看看这是否有帮助 .

  回复于 2024-05-03T16:52:04+08:00
• 1

  我有角度RC.6的相同问题由于某种原因，它不允许使用指令作为组件装饰器将组件传递给其他组件到父组件

  但是如果你通过app模块导入子组件并将其添加到声明数组中，那么错误就会消失 . 没有太多解释为什么这是角度rc.6的问题

  回复于 2024-05-03T16:52:04+08:00
• 0

  当我遇到这个问题时，那是因为我在装饰器中使用了'templateUrl'而不是'template'，因为我使用webpack并且需要在其中使用require . 请小心装饰器名称，在我的情况下，我使用片段生成样板代码，装饰器创建为：

  @Component({
    selector: '',
    templateUrl: 'PATH_TO_TEMPLATE'
  })
  

  但对于webpack，装饰器应该只是'模板' NOT 'templateUrl'，如下所示：

  @Component({
    selector: '',
    template: require('PATH_TO_TEMPLATE')
  })
  

  改变这一点为我解决了问题 .

  想更多地了解这两种方法吗？阅读this medium post about template vs templateUrl

  回复于 2024-05-03T16:52:04+08:00
• -1

  我使用角度5为 <flash-messages></flash-messages> 获取相同的问题 .

  您只需要在 app.module.ts 文件中添加以下行

  import { ---, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
  import { FlashMessageModule } from "angular-flash-message";
  
  
  @NgModule({
    ---------------
    imports: [
      FlashMessageModule,
      ------------------         
    ], 
    -----------------
    schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
    ------------
  })
  

  NB: 我正在使用这个消息flash-messages

  回复于 2024-05-03T16:52:04+08:00
• 0

  当我有一个文件名和类导出不匹配时，我收到此错误：

  filename：list.component.ts

  class exported：ListStudentsComponent

  从ListStudentsComponent更改为 ListComponent 修复了我的问题 .

  回复于 2024-05-03T16:52:04+08:00
• 0

  一个新手错误在我的情况下生成相同的错误消息 .

  index.html中没有 app-root 标记

  回复于 2024-05-03T16:52:04+08:00
• 1

  OnInit 在我的类上自动实现，同时在角度CLI上使用 ng new ... 关键短语生成新组件 . 因此，在删除实现并删除生成的空方法后，问题得以解决 .

  回复于 2024-05-03T16:52:04+08:00
• 5

  对我来说 templateUrl 的路径不正确

  我在用

  shopping-list-edit.component.html

  它应该是

  ./shopping-list-edit.component.html

  愚蠢的错误，但在开始时发生 . 希望能帮助陷入困境的人 .

  回复于 2024-05-03T16:52:04+08:00
• 12

  线程的后期答案，但我更多的人可以使用这个信息在另一个角度解释 .

  在Ionic中，自定义角度组件在名为 ComponentsModule 的单独模块下组织 . 当使用 ionic generate component 生成第一个组件时，离子与组件一起生成 ComponentsModule . 任何后续组件都会添加到同一模块中，这是正确的 .

  这是一个样本 ComponentsModule

  import { NgModule } from '@angular/core';
  import { CustomAngularComponent } from './custom/custom-angular-component';
  import { IonicModule } from 'ionic-angular';
  @NgModule({
      declarations: [CustomAngularComponent],
      imports: [IonicModule],
      exports: [CustomAngularComponent],
      entryComponents:[
  
        ]
  })
  export class ComponentsModule {}
  

  要在应用中使用 ComponentsModule ，与任何其他角度模块一样， ComponentsModules 需要导入到 AppModule . 离子生成组件（v 4.12）不添加此步骤，因此必须手动添加 .

  AppModule的摘录：

  @NgModule({
    declarations: [
      //declaration
    ],
    imports: [
      //other modules 
      ComponentsModule,
    ],
    bootstrap: [IonicApp],
    entryComponents: [
      //ionic pages
    ],
    providers: [
      StatusBar,
      SplashScreen,
      {provide: ErrorHandler, useClass: IonicErrorHandler},
      //other providers
    ]
  })
  export class AppModule {}
  

  回复于 2024-05-03T16:52:04+08:00
• 1

  好的，让我详细介绍代码，如何使用其他模块的组件 .

  例如，我有M2模块，M2模块有comp23组件和comp2组件，现在我想在app.module中使用comp23和comp2，这里是如何：

  这是app.module.ts，请参阅我的评论，

  // import this module's ALL component, but not other module's component, only this module
    import { AppComponent } from './app.component';
    import { Comp1Component } from './comp1/comp1.component';
  
    // import all other module,
   import { SwModule } from './sw/sw.module';
   import { Sw1Module } from './sw1/sw1.module';
   import { M2Module } from './m2/m2.module';
  
     import { CustomerDashboardModule } from './customer-dashboard/customer-dashboard.module';
  
  
   @NgModule({
  
      // declare only this module's all component, not other module component.  
  
  declarations: [
  AppComponent,
  Comp1Component,
  
  
   ],
  
   // imports all other module only.
  imports: [
  BrowserModule,
  SwModule,
  Sw1Module,
  M2Module,
  CustomerDashboardModule // add the feature module here
  ],
   providers: [],
   bootstrap: [AppComponent]
  })
  export class AppModule { }
  

  这是m2模块：

  import { NgModule } from '@angular/core';
     import { CommonModule } from '@angular/common';
  
     // must import this module's all component file
     import { Comp2Component } from './comp2/comp2.component';
     import { Comp23Component } from './comp23/comp23.component';
  
     @NgModule({
  
     // import all other module here.
       imports: [
         CommonModule
       ],
  
      // declare only this module's child component. 
       declarations: [Comp2Component, Comp23Component],
  
     // for other module to use these component, must exports
       exports: [Comp2Component, Comp23Component]
     })
     export class M2Module { }
  

  我在代码中的推荐说明了你需要做什么 .

  现在在app.component.html中，您可以使用

  <app-comp23></app-comp23>
  

  按照角度doc sample import modul

  回复于 2024-05-03T16:52:04+08:00