A glitch was encountered during the execution of the ionic-app-scripts subprocess

I recently started using Ionic 3 and created an application that I'm trying to convert into an APK.

To generate a debug (or testing) android-debug.apk file, I used the following CLI command:

ionic cordova build android --prod

The pages are declared in both 'declarations' and 'entryComponents' sections of my app.module.ts.

Here is my app.module.ts code snippet:

@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage,
    LoginPage,
    MobileScreenPage,
    OtpScreenPage,
    RegisterPage,
    ForgotPasswordPage,
    EditProfilePage,
    MemberDetailPage
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage,
    LoginPage,
    MobileScreenPage,
    OtpScreenPage,
    RegisterPage,
    ForgotPasswordPage,
    EditProfilePage,
    MemberDetailPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    AuthServiceProvider
  ]
})
export class AppModule {}

Error:

https://i.stack.imgur.com/WWOBd.png

angulartypescriptionic-frameworkbuildionic3

Answer №1

It seems that you are attempting to use the same component in multiple ngModule arrays. Instead, try adding it to a higher level module.

If you need to utilize the same component in multiple modules, consider creating a separate module for that component and exporting it from there.

Example of your.module.ts:

 declarations: [
        YourComponent,
    ],
    imports: [
        CommonModule,
        ReactiveFormsModule,
    ],
    exports: [YourComponent]

Edit: 1

Keep in mind that you cannot register one component in multiple modules. To use the same component in different modules, create a separate module for the component and import it where needed. In your case, remove EditProfilePage from the declarations in the app module and add this line to your EditProfilePageModule.

EditProfilePageModule.ts

exports: [EditProfilePage]

Now, import the EditProfilePage module into your app.module.ts file.

app.module.ts

imports: [
        CommonModule,
        EditProfilePageModule,
    ],

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

Tips for testing two conditions in Angular ngIf

I am facing a little issue trying to make this *ngIf statement work as expected. My goal is to display the div only if it is empty and the user viewing it is the owner. If the user is a guest and the div is empty, then it should not be shown. Here is my cu ...

angulartypescript

Ensuring the accurate usage of key-value pairs in a returned object through type-checking

After generating a type definition for possible response bodies, I am looking to create a function that returns objects shaped as { code, body }, which are validated against the typing provided. My current solution looks like this: type Codes<Bodies> ...

javascripttypescripttypes

Guide to retrieving Response Header in Angular 8 when making a POST request

Looking to fetch the response Header in Angular 8 after a post request and securely store the jwt token in localstorage? login(req): Observable<any> { return this.http.post(this.apiUrl + '/login', req).pipe( map(res => { if ...

angular

What is the best way to incorporate a background image using ngStyle?

I need help populating multiple cards in the following way: <mdl-card *ngFor="let product of templates" class="demo-card-event" mdl-shadow="2" [ngStyle]="{ 'background-color': 'lightgray' }"> <mdl-card-title mdl-card-expan ...

angulartypescript

Make sure a Typescript array contains a particular value

Currently, I am in the process of developing a dropdown-style component where the value and options are separate props. My goal is to incorporate Typescript to ensure that the value remains a valid option. Although I could perform this validation at runtim ...

typescripttypescript-generics

How can React TypeScript bind an array to routes effectively?

In my project, I am using the standard VisualStudio 2017 ASP.NET Core 2.0 React Template. There is a class Home included in the template: import { RouteComponentProps } from 'react-router'; export class Home extends React.Component<Rout ...

reactjstypescriptreact-router

How to make a GET request to a Node server using Angular

I am currently running a node server on port 8000 app.get('/historical/:days' ,(req,res,next){..}) My question is how to send a request from an Angular app (running on port 4200) in the browser to this node server. Below is my attempt: makeReq ...

javascriptangularjsnode.jsangular

Failed validation for Angular file upload

I attempted to create a file validator in the front end using Angular. The validator is quite straightforward. I added a function onFileChange(event) to the file input form to extract properties from the uploaded file. I then implemented a filter - only al ...

javascripthtmlcssangulartypescript

Sign in to Azure for an Angular application within the iFrame of another Angular application

I have two separate Angular apps, both enabled with Azure AD login. When accessed separately in the tab, they function properly - redirecting and obtaining the token without issue. Now, I aim to make Angular 1 the Parent and Angular 2 the child within a s ...

angularazureiframeazure-active-directoryopenid-connect

Efficient method for iterating through three arrays that have matching values and satisfy specified conditions in TypeScript

Struggling to speed up my Excel sheet creation time, currently taking over 20 seconds. I'm using the code below to compare three arrays and get the desired output: for (let i = 0; i < this.arrayNumberOne[0].length; i++) { let orangeOne = this.a ...

arraystypescripthashmapiteration

Compelled to utilize unfamiliar types in TypeScript generics

When working with a Typescript React form builder, I encountered a situation where each component had different types for the value and onChange properties. To tackle this issue, I decided to utilize generics so that I could define the expected types for e ...

typescriptgenerics

New options for outdated Webpack i18n plugin and loader

I am currently working on a TypeScript project that requires loading translations from individual .json files assigned to each country. For instance, we would have separate language files like en.json, es.json. The goal is to be able to access these trans ...

javascripttypescriptwebpackinternationalization

Having trouble with MUI auto import suggestions in my Next.js 13 project on VS Code

I'm currently developing a project using Next.js 13 and have installed MUI. However, I am encountering an issue where VS Code is not providing auto imports from the @mui/material library, as shown in the attached screenshot. https://i.stack.imgur.com ...

javascriptreactjstypescriptnext.jsmaterial-ui

Generate a fresh array from the existing array and extract various properties to form a child object or sub-array

I am dealing with an array of Responses that contain multiple IDs along with different question answers. Responses = [0:{Id : 1,Name : John, QuestionId :1,Answer :8}, 1:{Id : 1,Name : John, QuestionId :2,Answer :9}, 2:{Id : 1,Name : John, QuestionId :3,An ...

javascriptjqueryarraystypescriptspfx

Creating a Search Functionality within a Tab Component in Ionic

I'm currently facing an issue with adding a search bar under the "Search" tab in my project. I've tried implementing similar logic to what's shown here, but it doesn't seem to function properly when using the ionic serve --lab live in-b ...

htmlangularjscordovaionic-framework

How to selectively hide the menu button in Ionic framework when not within the <ion-view> element

Within the framework of Ionic, my goal is to dynamically hide the menu button based on certain conditions. However, due to other constraints, I had to separate the menu into its own controller to avoid completely re-rendering the menu and header bar every ...

angularjsionic-framework

Expose the app's homepage through the nginx server configuration

I currently have a server running Nginx and hosting an Angular 4 application under the domain www.mysite.com. However, I now have another domain called www.mySecondDomain.com and I want this site to open a specific route within the same angular app. For ex ...

angularnginx

javascript identify dissimilarities within arrays

Working on an Angular 2 application and attempting to identify the difference between two arrays (last seven days and missing dates within the last seven days). Everything works fine when initializing the array through a string, like in example code 1. How ...

javascriptangulartypescript

Adjusting the timeout for a particular operation according to its unique identifier

I am looking for a solution to call a method that posts an answer after an input change in my Angular project. I want to reset the timeout if another input change occurs to avoid multiple posts. Is there a smart way to achieve this? My project involves po ...

javascriptangulartypescript

Typescript's definition file includes imports that can result in errors

Occasionally, typescript may generate a definition file with code like the following, leading to compile errors: // issue.ts import { Observable } from 'rxjs'; class Issue { get data() { return new Observable(); } } // issue.d.ts class ...

typescriptrxjs