When executing the release command in Ionic 3, the Angular AoT build encountered a failure

Struggling to get my Sony Z2 smartphone app running. Command used:

ionic build android --prod --release

Error displayed in console:

typescript error Type CirckelmovementPage in C:/Users/fearcoder/Documents/natuurkundeformules/src/pages/circkelmovement/circkelmovement.ts is part of the declarations of 2 modules: AppModule in C:/Users/fearcoder/Documents/natuurkundeformules/src/app/app.module.ts and CirckelmovementPageModule in C:/Users/fearcoder /Documents/natuurkundeformules/src/pages/circkelmovement/circkelmovement.module.ts!

      Please consider moving CirckelmovementPage in

C:/Users/fearcoder/Documents/natuurkundeformules/src/pages/circkelmovement/circkelmovement.ts to a higher module that imports AppModule in C:/Users/fearcoder/Documents/natuurkundeformules/src/app/app.module.ts and CirckelmovementPageModule in C:/Users/fearcoder/Documents/natuurkundeformules/src/pages/circkelmovement/circkelmovement.module.ts.

      You can also create a new NgModule that exports and includes

CirckelmovementPage in C:/Users/fearcoder/Documents/natuurkundeformules/src/pages/circkelmovement/circkelmovement.ts then import that NgModule in AppModule in C:/Users/fearcoder/Documents/natuurkundeformules/src/app/app.module.ts

      and CirckelmovementPageModule in

C:/Users/fearcoder/Documents/natuurkundeformules/src/pages/circkelmovement/circkelmovement.module.ts.

Files causing issues

circkelmovement.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { AdMobFree, AdMobFreeBannerConfig } from '@ionic-native/admob-free';

@IonicPage()
@Component({
  selector: 'page-circkelmovement',
  templateUrl: 'circkelmovement.html',
})
export class CirckelmovementPage {

  ray:any;
  circulationtime:any;
  result:any;

  constructor(public navCtrl: NavController, public navParams: NavParams, private admob: AdMobFree) {
  } 

  ionViewDidLoad(){
    const bannerConfig: AdMobFreeBannerConfig = {
      isTesting: true,
      autoShow: true
    };
    this.admob.banner.config(bannerConfig);

    this.admob.banner.prepare()
      .then(() => {
        this.admob.banner.show()
      })
      .catch(e => console.log(e));
  }

  calculateWebSpeed(ray, circulationtime){      
    return this.result = "Baansnelheid: " + (2 * Math.PI * ray / circulationtime) + " m/s";    
  }
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { AdMobFree } from '@ionic-native/admob-free';
import { InAppBrowser } from '@ionic-native/in-app-browser';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { SpeedPage } from '../pages/speed/speed';
import { DistancePage } from '../pages/distance/distance';
import { TimePage } from '../pages/time/time';
import { WorkPage } from '../pages/work/work';
import { KinenergyPage } from '../pages/kinenergy/kinenergy';
import { GravityenergyPage } from '../pages/gravityenergy/gravityenergy';
import { GravityforcePage } from '../pages/gravityforce/gravityforce';
import { CirckelmovementPage } from '../pages/circkelmovement/circkelmovement';
import { ElectricityenergyPage } from '../pages/electricityenergy/electricityenergy';
import { LawohmPage } from '../pages/lawohm/lawohm';
import { LenslawPage } from '../pages/lenslaw/lenslaw';
import { LorentzforcewirePage } from '../pages/lorentzforcewire/lorentzforcewire';
import { DensityPage } from '../pages/density/density';
import { PressurePage } from '../pages/pressure/pressure';
import { LensstrenghtPage } from '../pages/lensstrenght/lensstrenght';
import { PowerPage } from '../pages/power/power';
import { CurrentstrenghtPage } from '../pages/currentstrenght/currentstrenght';
import { FrequencyPage } from '../pages/frequency/frequency';
import { WavespeedPage } from '../pages/wavespeed/wavespeed';
import { MassPage } from '../pages/mass/mass';
import { LorentzparticlePage } from '../pages/lorentzparticle/lorentzparticle';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    SpeedPage,
    DistancePage,
    TimePage,
    WorkPage,
    KinenergyPage,
    GravityenergyPage,
    GravityforcePage,
    CirckelmovementPage,
    ElectricityenergyPage,
    LawohmPage,
    LenslawPage,
    LorentzforcewirePage,
    DensityPage,
    PressurePage,
    LensstrenghtPage,
    PowerPage,
    CurrentstrenghtPage,
    FrequencyPage,
    WavespeedPage,
    MassPage,  
    LorentzparticlePage       
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    SpeedPage,
    DistancePage,
    TimePage,
    WorkPage,
    KinenergyPage,
    GravityenergyPage,
    GravityforcePage,
    CirckelmovementPage,
    ElectricityenergyPage,
    LawohmPage,
    LenslawPage,
    LorentzforcewirePage,
    DensityPage,
    PressurePage,
    LensstrenghtPage,
    PowerPage,
    CurrentstrenghtPage,
    FrequencyPage,
    WavespeedPage,
    MassPage,   
    LorentzparticlePage    
  ],
  providers: [
    StatusBar,
    SplashScreen,
    AdMobFree,
    InAppBrowser,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

circkelmovement.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { CirckelmovementPage } from './circkelmovement';

@NgModule({
  declarations: [
    CirckelmovementPage,
  ],
  imports: [
    IonicPageModule.forChild(CirckelmovementPage),
  ],
})
export class CirckelmovementPageModule {}

Trying to enhance app performance with the given command, but facing complications. Need guidance on what might be going wrong. Any help appreciated!

Regards

androidangularcordovatypescriptionic-framework

Answer №1

When utilizing lazy loaded pages, there is no need to import or declare them in the app.module.ts file as they will have their own module within their respective folder. For all lazy loaded pages:

  • Each lazy loaded page should have its own named module file in the page's folder (you seem to already have this for the specific page)

  • In your app logic, when loading such a page (using navCtrl for example), you should refer to the name of the page as a string and not as a Component

To enable lazy loading for your code, uncomment those pages that are to be lazily loaded:

// Code snippet with imports for various pages
// Ensure consistency with naming conventions throughout your app for better organization and readability

@NgModule({
  // Declarations and imports for various pages
  // Entry components and providers listed for proper functionality
})
export class AppModule {}

Additionally, pay attention to naming conventions in your app. As seen here:

@Component({
  selector: 'page-circkelmovement',
  templateUrl: 'circkelmovement.html',
})

Ensure uniformity in selector names and template url file naming to avoid potential issues. Refer to Angular Style Guide for guidance or follow Ionic's recommended practices. Consistency in file naming like:

  • publish.page.html
  • publish.page.module.ts
  • publish.page.scss
  • publish.page.ts

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

Flutter tutorial: Creating animated heroes and pop-up dialogs

I'm looking for assistance in recreating a sample animation using Flutter. I attempted to use showDialog(), but the animation didn't work as expected. I also tried using Hero() with a tag, but it was unsuccessful. Can someone please help me out w ...

androidiosflutterdart

Exploring the directories: bundles, lib, lib-esm, and iife

As some libraries/frameworks prepare the application for publishing, they create a specific folder structure within the 'dist' directory including folders such as 'bundles', 'lib', 'lib-esm', and 'iife'. T ...

javascriptnode.jstypescriptwebpackrollup

typescript Object that consists of properties from an array with a defined data type

I have an array consisting of strings. I am trying to transform this array into an object where each string is a property with specific attributes assigned to them. export interface SomeNumbers { name: string; value: number; } const arr = ['apple& ...

typescript

I am looking to superimpose one rectangle over another rectangle

I am looking to create something similar using CSS and TypeScript/JavaScript: Could someone please guide me on how to achieve this? My attempt with a flex container looks like this: I am new to front-end development. Can anyone point out what I might be ...

javascripthtmlcssreactjstypescript

Lazy-loading modules in SSR Angular 8 applications are currently unspecified

I am currently in the process of setting up my Angular 8 application to work with server-side rendering (SSR). However, I am encountering some undefined errors in webpack when running my application using ng serve, especially with lazy-loaded modules. Ever ...

angulartypescriptwebpacklazy-loadingserver-side-rendering

Using a custom TemplateRef in NgxDatatable

In the project I am currently working on, the tables have a specific wrapper around them. To prevent repetition of code, I am seeking a method to create a template where each component passes an ng-template that will be rendered within the custom table tem ...

angularngx-datatable

Troubleshoot Angular2 modules efficiently using source mapping features

Is there a way to debug Angular2 module code using TypeScript source mapping in the browser? After installing my project with the "npm install" command following the steps in https://angular.io/guide/quickstart, I noticed that while source mapping is ava ...

npmangulartypescript1.7

The content of the string within the .ts file sourced from an external JSON document

I'm feeling a bit disoriented about this topic. Is it feasible to insert a string from an external JSON file into the .ts file? I aim to display the URLs of each item in an IONIC InAppBrowser. For this reason, I intend to generate a variable with a sp ...

javascriptangulartypescriptionic-framework

Ensuring Completion of Operations before Executing Observables in Angular 2

Working with observables has been a bit of a learning curve for me, especially when integrating Firebase. It seems like there's quite a bit of complexity involved in order to achieve the desired results! Currently, I'm facing an issue where my ob ...

angularfirebasefirebase-realtime-databaseionic2

Automatic Formatting of Typescript in SublimeText

Utilizing Microsoft's Typescript Sublime Plugin, I am able to format a file using the shortcut ^T ^F as outlined in the plugin's feature list. Is there a method to automatically execute this command when saving a file? Similar to the functionali ...

typescriptsublimetext3sublimetext

Can an @Input value be transmitted to the app.component in Angular 2?

As I work on my Angular 2 app using ASP.Net for rendering, I find myself facing a challenge when trying to pass initialization data from RAZOR into my bootstrapped component. Despite setting up the _Layout.cshtml as the only RAZOR page, the data transfer d ...

angular

In TypeScript, there is a curious phenomenon where private properties seem to be mimicking the

Here is an example of an issue I encountered while working with private properties in TypeScript. I expected that only the public properties would be visible in my object output, similar to normal encapsulation. My aim here is to include the property wit ...

javascripttypescriptoopproperties

Is it possible to utilize the less than or equal to operator with a string in programming?

mUserBalance.child(user.getUid()).addValueEventListener(new ValueEventListener() { @Override public void onDataChange(DataSnapshot dataSnapshot) { int lim = 100; ...

javaandroid

Error in the ngx-owl-carousel-o-Angular causing disruptions in the carousel rotation

I've integrated the owl carousel into my Angular project to showcase various elements. The carousel is set to only display from 767px downwards with display:block, and above 767px it's set to display:none. However, I'm encountering a glitch ...

angular

The information retrieved from the API is not appearing as expected within the Angular 9 ABP framework

I am facing an issue with populating data in my select control, which is located in the header child component. The data comes from an API, but for some reason, it is not displaying correctly. https://i.stack.imgur.com/6JMzn.png. ngOnInit() { thi ...

javascriptangulartypescriptasp.net-coreabp

Tips for locating the index of a substring within a string with varying line endings using Typescript

I am faced with the task of comparing two strings together. abc\r\ndef c\nde My goal is to determine the index of string 2 within string 1. Using the indexOf() method is not an option due to different line endings, so I require an altern ...

javascripttypescriptstringsubstringline-endings

What is the method to obtain the content height of individual pages in Android, with or without the use of JavaScript?

I am facing an issue while trying to retrieve the content height of each webpage consecutively. When I load pages separately, I can successfully get the height of each page. However, when I attempt to fetch the content height continuously for webpages in a ...

javascriptandroidhtmlwebviewwebclient

How can we avoid a runtime error when attempting to filter an array that may not be present at a certain point in

Encountering a runtime error with my reducer state chunk - specifically a TypeError stating that an intermediate value is not iterable. This occurs when the object, childGroup, may not be present in the state at a given moment. Any solutions on how to avoi ...

reactjstypescript

What causes React component state initialization to return a `never` type when set to null?

Initializing a component's state to null outside of the constructor results in the state having the type never in the render function. However, when the state is initialized within the constructor, the correct type is maintained. Despite many StackO ...

reactjstypescript

Finding the solution to the perplexing issue with Generic in TypeScript

I recently encountered a TypeScript function that utilizes Generics. function task<T>(builder: (props: { propsA: number }, option: T) => void) { return { run: (option: T) => {}, } } However, when I actually use this function, the Gener ...

reactjstypescriptgenericstypes