模板解析错误:' ion-col'不是已知的元素: [英] Template parse errors: 'ion-col' is not a known element:
问题描述
我尝试构建ionic 4应用程序.但是,在尝试修复前一个错误之后,新错误仍然出现.在发生此错误后,我已经创建了一个自定义组件(如何载入离子段内的其他页面?)然后我得到一个错误:addchilds组件是2个模块的声明的一部分.我查找该错误,并创建了shared.module.ts并将其导入app.module.ts中.但是我仍然遇到错误,这次是
I try to build ionic 4 apps. However, the new error keeps coming after trying to fix the previous one. I already created a custom component after this error (How to load other page inside of an ionic segment?) and then I got an error : addchilds Component is part of the declaration of 2 modules. I look up for that error and I created shared.module.ts and import it in app.module.ts. However I still get errors, and this time is
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
不幸的是,该错误也发生在离子行,离子按钮,离子输入上.这是最近的代码.
unfortunately, this error also happens to ion-row, ion-button, ion-input. Here is the recent code.
app.module.ts
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
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
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 { }
我真的不知道该怎么解决,有人可以帮我吗?让我知道您是否需要其他代码.
I really don’t know how to solve this, can anyone help me with this? Let me know if you need another code.
推荐答案
Ionic 4现在正在使用Web组件,这意味着对于所有使用ion- *的组件(例如需要在这些组件module.ts中显式导入Ionic Module的组件)文件.请将下面的导入添加到您的addchils.module.ts中:
Ionic 4 is now using web components, that means for all your components using ion-* like components you need to explicitly import Ionic Module in such components module.ts files. Please add the import below into your addchils.module.ts:
import { IonicModule } from '@ionic/angular';
这篇关于模板解析错误:&#39; ion-col&#39;不是已知的元素:的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!