自定义组件不是已知元素

时间:2018-10-06 21:54:11

标签: angular components ionic4

我在离子中有一个简单的组件,它只是一个测试,我用离子cli创建了该组件 这是我的app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, RouteReuseStrategy, Routes } from 
'@angular/router';
import { CommonModule } from '@angular/common';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import * as firebase from 'firebase/app';
import { ProfileService } from './services/user/profile.service';
import { AuthGuard } from '../app/services/user/authguard';
import { AuthService } from './services/user/auth.service';
import { ItemModule } from '../app/modules/item-module/item-module';
import { MyComponentComponent } from './my-component/my-component.component';
import { JustTestComponent } from './just-test/just-test.component';

@NgModule({
  declarations: [
    AppComponent,
    MyComponentComponent,
    JustTestComponent,
  ],
  exports: [],
  entryComponents: [],
  imports: [
    BrowserModule,
    CommonModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    ItemModule,
  ],
  providers: [
    StatusBar,
    SplashScreen,
    AuthService,
    AuthGuard,
    ProfileService,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

这是我的组件:

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

@Component({
  selector: 'app-just-test',
  templateUrl: './just-test.component.html',
  styleUrls: ['./just-test.component.scss']
})
export class JustTestComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

如果我放置标签 在html页面中出现此错误:

    ERROR Error: Uncaught (in promise): Error: Template parse errors:
'app-just-test' is not a known element:
1. If 'app-just-test' is an Angular component, then verify that it is part of this module.
2. If 'app-just-test' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas'

我知道这个问题已经问过很多次了,但是到目前为止我仍然看不出问题出在哪里,一切对我来说似乎都可以, 我的离子版本是4.1.2, 这是我的ng --version:

    Angular CLI: 6.1.5
Node: 10.0.0
OS: linux x64
Angular: 6.1.7
... common, compiler, compiler-cli, core, forms, http
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.7.5
@angular-devkit/build-angular     0.7.5
@angular-devkit/build-optimizer   0.7.5
@angular-devkit/build-webpack     0.7.5
@angular-devkit/core              0.7.5
@angular-devkit/schematics        0.7.5
@angular/cli                      6.1.5
@ngtools/webpack                  6.1.5
@schematics/angular               0.7.5
@schematics/update                0.7.5
rxjs                              6.2.2
typescript                        2.9.2
webpack                           4.9.2

预先感谢

3 个答案:

答案 0 :(得分:1)

你必须放  entryComponents: [JustTestComponent]以及声明中包含的内容

答案 1 :(得分:1)

这些是我收到此类错误时执行的步骤。

  1. 确认选择器名称正确。(检查组件中定义的选择器)
  2. 验证组件是否在模块中声明
  3. 如果在另一个模块中,请导入该模块(如果在另一个模块中,则必须先将组件导入到该模块中。)
  4. 重新启动cli

请记住您不能两次声明组件。

答案 2 :(得分:1)

您需要在尝试使用MyComponentComponent的模块中声明它。它可能在您的item.module或其他模块中。

注意:如果您的应用程序中有多个模块,则在AppModule中进行声明将无法解决问题。