не может получить ионный компонент, генерируемый CLI, для работы

63
3

В настоящее время я работаю с последней версией Ionic, и мне сложно работать, когда CLI создает компонент для работы.

Я начинаю с пустой proyect, а затем создаю новый компонент с:

ionic generate component my-component

Команда работает нормально и создает следующие файлы:

CREATE src/app/my-component/my-component.component.html (31 bytes)
CREATE src/app/my-component/my-component.component.spec.ts (664 bytes)
CREATE src/app/my-component/my-component.component.ts (293 bytes)
CREATE src/app/my-component/my-component.component.scss (0 bytes)

Затем я перехожу к использованию нового компонента на моей главной странице следующим образом:

<ion-content padding>
<my-component></my-component>
</ion-content>

Файл app.module.ts обновляется следующим образом:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, RouteReuseStrategy, Routes } from '@angular/router';

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 { MyComponentComponent } from './my-component/my-component.component';

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

При запуске приложения в ионной лаборатории я получаю следующую ошибку:

Ошибка ERROR: не показано (в обещании): ошибка: ошибки анализа шаблона: "my-component" не является известным элементом

Это моя системная информация:

ionic (Ionic CLI)             : 4.2.1 
Ionic Framework : @ionic/angular 4.0.0-beta.12
@angular-devkit/build-angular : 0.7.5
@angular-devkit/schematics : 0.7.5
@angular/cli : 6.1.5
@ionic/angular-toolkit : 1.0.0

Любые идеи, почему это происходит? Раньше я работал с Ionic 3 и никогда не получал эту проблему.

Обновить:

Это мой файл my-component.component.ts по умолчанию:

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

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

constructor() { }

ngOnInit() {
}

}

спросил(а) 2021-01-27T16:39:31+03:00 4 месяца, 3 недели назад
1
Решение
77

Чтобы использовать пользовательский компонент внутри другого компонента, вы должны включить его в массив exports.

@NgModule({
....
declarations: [AppComponent, MyComponentComponent],
entryComponents: [],
exports:[MyComponentComponent]
....
})
export class AppModule {}

Вы можете либо сделать это, либо вы можете сделать все свои пользовательские компоненты внутри другого customModule а затем импортировать этот модуль на странице app.component.ts.

Имя, которое вы ссылаетесь на компонент, неверно. Селектор для вашего класса MyComponentComponent - это app-my-component, поэтому вам нужно использовать <app-my-component></app-my-component> вместо <my-component></my-component>.

ответил(а) 2021-01-27T16:39:31+03:00 4 месяца, 3 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема