模板解析错误：'ion-col' 不是已知元素：答案

【问题标题】：Template parse errors: 'ion-col' is not a known element:模板解析错误：'ion-col' 不是已知元素：
【发布时间】：2020-04-14 10:00:38
【问题描述】：

我尝试构建 ionic 4 应用程序。但是，在尝试修复前一个错误后，新错误不断出现。在此错误之后我已经创建了一个自定义组件 (How to load other page inside of an ionic segment?) 然后我得到一个错误：addchilds Component is part of the declaration of 2 modules。我查找该错误并创建了 shared.module.ts 并将其导入 app.module.ts。但是我仍然得到错误，这次是

Uncaught Error: Template parse errors:
‘ion-col’ is not a known element:
1. If 'ion-col' is an Angular component, then verify that it is part of this module.
2. If 'ion-col' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
    <div>
        <ion-row no-padding>
          [ERROR ->]<ion-col size="6" offset="3">
            <img [src]="image" alt="this is the image"/>
          </io"): ng:///SharedModule/AddchildsComponent.html@3:10

不幸的是，这个错误也发生在 ion-row、ion-button、ion-input 上。这是最近的代码。

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { FormsModule } from '@angular/forms';
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 firebaseConfig from './firebase';
*/
import { ImagePicker } from '@ionic-native/image-picker/ngx';
import { WebView } from '@ionic-native/ionic-webview/ngx';

import { AngularFireModule } from '@angular/fire';
import { environment } from '../environments/environment';
import { AngularFirestoreModule, FirestoreSettingsToken } from '@angular/fire/firestore';

import { AngularFireAuthModule } from '@angular/fire/auth';
import { IonicSelectableModule } from 'ionic-selectable';
import { CommonModule } from '@angular/common';
import { SharedModule } from './shared/shared.module';


@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(), 
    AppRoutingModule,
    AngularFireModule.initializeApp(environment. firebase),
    AngularFirestoreModule,
    AngularFireAuthModule,
    IonicSelectableModule,
    FormsModule,
    CommonModule,
    SharedModule
  ],

  providers: [
    StatusBar,
    SplashScreen,
    ImagePicker,
    WebView,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    { provide: FirestoreSettingsToken, useValue: {} }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

app-routing.modules.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AddchildsComponent } from '../app/pages/addchilds/addchilds.component';

const routes: Routes = [
  { path: 'login', loadChildren: './login/login.module#LoginPageModule' },
  { path: 'register', loadChildren: './register/register.module#RegisterPageModule' },
  { path: '', redirectTo: 'register', pathMatch: 'full' },
  { path: '', loadChildren: './pages/tabs/tabs.module#TabsPageModule' },
  { path: 'childdetails/:id', loadChildren: './pages/childdetails/childdetails.module#ChilddetailsPageModule' },
  { path: 'adddetails/:id', component: AddchildsComponent },
  { path: 'services', loadChildren: './services/services.module#ServicesPageModule' },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes)
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

shared.module.ts

import { NgModule } from '@angular/core';

import { CommonModule } from '@angular/common';

import { AddchildsComponent } from '../pages/addchilds/addchilds.component';

@NgModule({

declarations: [ AddchildsComponent ],

imports: [ CommonModule ],

exports: [ AddchildsComponent ]

})

export class SharedModule { }

我真的不知道如何解决这个问题，有人可以帮我解决这个问题吗？如果您需要其他代码，请告诉我。

【问题讨论】：

标签： angular ionic-framework

【解决方案1】：

Ionic 4 现在使用 Web 组件，这意味着对于所有使用 ion-* 类似组件的组件，您需要在此类组件 module.ts 文件中显式导入 Ionic Module。请将以下导入添加到您的 addchils.module.ts 中：

import { IonicModule } from '@ionic/angular';

【讨论】：

你的意思是在 addchils.component.ts 中导入 Ionic Module 吗？
你需要将它添加到基本上加载你的组件的模块中。 Shared.module.ts?

【解决方案2】：

您必须将其添加到共享的模块中，而不是 addchils 为我工作

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { HeaderPage } from '../header/header.page';

@NgModule({
   declarations: [HeaderPage],
   exports: [HeaderPage],
   imports: [
   IonicModule,
   CommonModule
  ]
})
export class SharedModule { }

【讨论】：