Issue encountered while creating production build using Ionic

I've encountered a perplexing error that has me stumped.

The error reared its head while attempting to build with --prod. Despite my efforts to fix it by updating dependencies, when I run 

ionic cordova build android --prod --verbose
, the following error message pops up:

typescript error 'ion-icon' is not a known element: 1. If 'ion-icon' is an Angular component, then verify that it is part of this module. ("> [ERROR ->]")

'ion-buttons' is not a known element: 1. If 'ion-buttons' is an Angular component, then verify that it is part of this module. (" [ERROR ->]")

'ion-col' is not a known element: 1. If 'ion-col' is an Angular component, then verify that it is part of this module. (" [ERROR ->]")

Error: The Angular AoT build failed. See the issues above Error: The Angular AoT build failed. See the issues above at C:\Users\ceman\Desktop\idem-app-updated-master\node_modules\@ionic\app-scripts\dist\aot\aot-compiler.js:237:55 at step (C:\Users\ceman\Desktop\idem-app-updated-master\node_modules\@ionic\app-scripts\dist\aot\aot-compiler.js:32:23) at Object.next (C:\Users\ceman\Desktop\idem-app-updated-master\node_modules\@ionic\app-scripts\dist\aot\aot-compiler.js:13:53) at fulfilled (C:\Users\ceman\Desktop\idem-app-updated-master\node_modules\@ionic\app-scripts\dist\aot\aot-compiler.js:4:58) [ERROR] Command not found: ionic-app-scripts ionic:cli-framework:utils:process onBeforeExit handler: process.exit received +0ms ionic:cli-framework:utils:process onBeforeExit handler: running 1 queued functions +0ms ionic:cli-framework:utils:process onBeforeExit handler: exiting (exit code 127) +0ms

These are some of my files; let me know if you need more information:

app.module.ts: https://pastebin.com/TXQ4tDFM

package.json: https://pastebin.com/kAK5eK5Z

This is the configuration from ionic info:

Ionic:

ionic (Ionic CLI) : 4.0.0-rc.9 (C:\Users\ceman\AppData\Roaming\npm\node_modules\ionic) Ionic Framework : ionic-angular 3.9.2 @ionic/app-scripts : 3.1.10

Cordova:

cordova (Cordova CLI) : not installed Cordova Platforms : android 7.1.0

System:

Android SDK Tools : 26.1.1 NodeJS : v6.14.3 (P:\nodejs\node.exe) npm : 6.1.0 OS : Windows 10

Environment:

ANDROID_HOME : P:\Android\sdk

As an additional detail, I tried upgrading to Node 8 in hopes of resolving the issue, but reverted back to version 6 as it didn't have any effect.

angulartypescriptionic-frameworkionic3

Answer №1

To utilize the IonicModule, simply import it into your module.ts file and then apply it in the following manner:

import { IonicModule } from 'ionic-angular';

...

@NgModule({
    imports: [
        IonicModule.forRoot(yourPage)
    ],

Answer №2

It's possible that IonModule hasn't been properly installed in your component.module.ts file or in another module where ion-icon, ion-buttons, and ion-col are being used.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The mat-table's data source is failing to refresh and display the latest

When I click on a column header to sort the table, a function should trigger and update the data. However, the data is not updating as expected. Below is the code for the function and the table: <table mat-table #table [dataSource]="dataSourceMD&qu ...

javascriptangulartypescriptangular-materialdatasource

Tips for providing a base URL in Angular to fetch images from an API

How do I access the API URL to retrieve images from a database? <table class="table"> <tr> <th>Id</th> <th>Image</th> </tr> ...

angular

fp-ts/typescript steer clear of chaining multiple pipes

Is there a more concise way to handle nested pipes in fp-ts when working with TypeScript? Perhaps using some form of syntactic sugar like Do notation? I'm trying to avoid this kind of nested pipe structure: pipe( userId, O.fold( () => set ...

typescriptfp-ts

Is it possible to use TypeScript or Angular to disable or remove arrow key navigation from a PrimeNG Table programmatically?

Is there a way to programmatically prevent left and right arrow key navigation in a PrimeNG Table with cell editing, without the need to modify the Table component source code? You can check out an example here: Angular Primeng Tableedit Demo code. I mana ...

angulartypescriptprimengprimeng-table

What are the steps to fix errors when deploying a MEAN stack application on Heroku?

Upon building my Angular app with a Node.js API and deploying it on Heroku, I encountered an error. Despite this, the app runs smoothly with no errors when tested on my local server. Below are the logs from Heroku: C:\Users\PC>heroku logs -a= ...

node.jsangularherokunpmheroku-cli

Troubles with implementing child routes in Angular 6

I'm having trouble getting the routing and child routing to work in my simple navigation for an angular 6 app. I've configured everything correctly, but it just doesn't seem to be working. Here is the structure of my app: └───src ...

angularhtmltypescriptangular-routing

Confirming the dependencies of Angular modules versions

Coming from a Java/Maven background, I find understanding versioning in npm to be challenging and somewhat delicate. How can I ensure that all versions in an npm package are accurate? It appears that certain parts of @angular have versions that are separa ...

node.jsangularnpm

SASS property value validation error

I am having trouble using a Font in Storybook as I keep getting the error "invalid property value" in Chrome. I am new to sass and storybook. Error Screenshot: https://ibb.co/HqFLJ5H Main Sass File (excerpt): @import './src/assets/sass/color.sass&a ...

angularsassstorybook

Unlock the power of Env variables on both server and client components with Next.js! Learn how to seamlessly integrate these

In my Next.js app directory, I am facing the need to send emails using Nodemailer, which requires server-side components due to restrictions on client-side sending. Additionally, I am utilizing TypeScript in this project and encountering challenges when tr ...

typescriptnext.jsnext.js13react-server-components

Looping issue with ForEach in Typscript with Firebase Functions

While browsing through various questions on this topic, I've noticed that the specific answers provided don't quite fit my situation. My query involves converting a Google Firebase RTB datasnapshot into an array of custom objects, each representi ...

typescriptasynchronousfirebase-realtime-databasegoogle-cloud-functions

What is the best way to ensure a div is always scrollable?

I am currently working with Angular 4 and Bootstrap 4 (alpha 6). I have implemented ngx-infinte-scroll to fetch data from the server when the user scrolls to the top or bottom of the div. The issue I am facing is that the user can only scroll when there ar ...

htmlcsstwitter-bootstrapangular

Deduce the property type by the existence of the value

Here's a situation I'm trying to address in a simple way: if the entity prop is present, I want the onClick callback to receive the entity string, otherwise it should receive nothing. type SnakeOrCamelDomains = "light" | "switch" | "input_boolean ...

reactjstypescriptreact-propstype-inferenceinference

Understanding the Typescript Type for a JSON Schema Object

When working with JSON-schema objects in typescript, is there a specific type that should be associated with them? I currently have a method within my class that validates whether its members adhere to the dynamic json schema schema. This is how I am doing ...

javascriptjsontypescript

Position the dropdown beneath the button within the Chips Autocomplete component for proper alignment

I have enhanced the layout of the Chips Autocomplete component by placing a button above the dropdown, as illustrated in the image below. https://i.sstatic.net/d2ZD8.png My goal is to position the dropdown below the button, similar to this desired arrang ...

angularangular-material

TS - The 'new' keyword can only be used with a void function

I'm encountering a strange TypeScript error: "Only a void function can be called with the 'new' keyword." What in the world? https://i.sstatic.net/bKAUT.png The constructor function looks like this: function Suman(obj: ISumanInputs): ...

node.jstypescripttypescript2.0

Monitor changes in a dynamic child component using Angular fire and TypeScript only (no HTML)

Currently, I am developing a component using TypeScript and passing inputs to my child component from there. In the parent TypeScript file: this.childComponent = this.viewContainerRef.createComponent(this.data.body).instance; this.childComponent['chi ...

angulartypescriptngonchanges

Adding Rows Dynamically to Material Data Table in Angular 7

Is there a way to dynamically add data from a service into my table? I am receiving data from AuthenticationService dialog and attempted using this.dataSource.push(this.transaction);, but it did not work as expected. This is the code snippet where I trie ...

angularservicedatatableangular-material

Utilizing TypeScript code to access updatedAt timestamps in Mongoose

When querying the database, I receive the document type as a return. const table: TableDocument = await this.tableSchema.create({ ...createTableDto }) console.log(table) The structure of the table object is as follows: { createdBy: '12', cap ...

typescriptmongodbmongoose

The specified type '{ children: Element; ref: MutableRefObject<HTMLDivElement>; }' cannot be matched with type 'IntrinsicAttributes & RefAttributes<HTMLDivElement>' in the assignment

Encountering an issue with fowardRef in ReactJS where everything seems fine, but an error pops up: Type '{ children: Element; ref: MutableRefObject<HTMLDivElement>; }' is not assignable to type 'IntrinsicAttributes & SectionContent ...

javascriptreactjstypescriptjsx

Module 'next-intl/client' cannot be located

When I run npm test, I encounter the following error: 'next-intl/client' module not found jest.mock( | ^ 22 | 'next-intl/client', 23 | (): Record<string, unknown> => ({ 24 | usePathname: ...

typescripttestingnext.js