Kindly include an @Ionic3Annotation for either @Pipe, @Directive, or @Component

During development, this code runs without any issues. However, when attempting to run it in production using the command:

Working:

ionic cordova run android

Not working:

ionic cordova run android --prod --release

Error Message:

    [03:34:41]  typescript error
                Unexpected module 'TranslateModule in C:/Users/tm_ma/Doc/PROJECT/node_modules/@ngx-translate/core/core.d.ts' declared by the module 'EmentaPageModule in
                C:/Users/tm_ma/Doc/PROJECT/src/pages/ementa/ementa.module.ts'. Please add a
                @Pipe/@Directive/@Component annotation.
  [03:34:41]  ionic-app-script task: "build"
  [03:34:41]  Error: The Angular AoT build failed. See the issues above
    Error: The Angular AoT build failed. See the issues above

Ementa Module:

import { NgModule } from '@angular/core'; 
import { IonicPageModule } from 'ionic-angular'; 
import { EmentaPage } from './ementa'; import { TranslateModule } from '@ngx-translate/core';


@NgModule({  
   declarations: [
    EmentaPage,
    TranslateModule
       ],   imports: [
    IonicPageModule.forChild(EmentaPage),
    TranslateModule
       ], }) export class EmentaPageModule {}

App Module:

export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

@NgModule({
  declarations: [
   ...
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    IonicModule.forRoot(MyApp),
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [HttpClient]
      }
    })

  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
   ...
  ],
  providers: [

  ]
})
export class AppModule {}

Dependencies Version:

"@ngx-translate/core": "^9.1.1",
"@ngx-translate/http-loader": "^4.0.0",   
"angularfire2": "^5.0.0-rc.11",   
"@angular/animations": "5.2.11",    
"@angular/common": "5.2.11",    
"@angular/compiler": "5.2.11",   
"@angular/compiler-cli": "5.2.11",    
"@angular/core": "5.2.11",    
"@angular/forms": "5.2.11",   
"@angular/http": "5.2.11",

Answer №1

When working with Angular5, it is recommended to use core versions 8.x - 9.x and loader versions 1.x - 2.x. For Angular4.3, core versions 7.x or lower are suitable along with loader versions 1.x - 2.x.

For more information, visit https://github.com/ngx-translate/core

In my application, I utilized Ionic4 (Angular6) and found ngx-translate to be compatible with core version 10.x and loader version 3.x.

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

Using the watch flag in TypeScript across multiple projects - A comprehensive guide

In my project, I have the following scripts section in the package.json: "watch": "?", "build": "npm run build:compactor && npm run build:generator && npm run build:cleaner", "build:lambda": ...

The user keeps finding themselves redirected back to the Home page rather than the page they are trying

Within my Angular application, users are authenticated through an OIDC provider using the library angular-auth-oidc-client. In the scenario where a user is not authenticated or their session has expired and they attempt to access a page such as https://loc ...

Ways to populate missing cells with a default hyphen symbol

Looking for a way to default empty cells in my primeng datatable to '-'. Consider the following data: [ { 'column': null }, { 'column': { 'name': 'A' } }, { 'column': { 'name': ...

Keeping the user logged in even after closing the app in an Ionic/Angular project: Best practices to retain user sessions

As a newcomer to angular/ionic, I have been given a project where the user needs to remain logged in even after closing the application unless they explicitly log out. Can anyone provide suggestions on how to modify the code below? login.page.ts import { ...

How can I combine my two ngIf conditions into an ngIf else statement?

Having trouble incorporating an *ngIf else with two large <div> elements, as the content seems overwhelming to organize properly while following the documentation. Initially believed that using the same styling for two open text boxes, with one hidd ...

Test Failure: Attempt to access 'componentInstance' property on a non-existent value

I am facing an issue where my unit tests are working fine with the angular2-seed project, but not with my own project that closely resembles angular2-seed. The only difference between my project and angular2-seed is that I use a gulpfile.ts without the to ...

React's Redux persist is causing a duplication of requests being sent

I am currently utilizing redux-persist along with Redux Toolkit. I have observed a peculiar behavior where, upon changing the slice (RTK), a request is sent to the server. When using redux-persist without a persister, only one request is made as expected. ...

Testing the addition of a dynamic class to an HTML button using Jasmine unit tests

I am brand new to Jasmine and currently in the process of grasping how to write Unit tests for my components in Angular 4. One issue I encountered is when I attempt to add a class to the button's classList within the ngOnInit() lifecycle hook of the C ...

Angular 2 User Interface with Drag-and-Drop Functionality

I have been searching for a solution that would allow me to drag HTML elements and place them anywhere on the screen. After exploring different options, I came across 2 packages: https://github.com/valor-software/ng2-dragula https://github.com/akser ...

An issue has been detected by Zone.js where the ZoneAwarePromise `(window|global).Promise` has been unexpectedly replaced

I have recently integrated the Angular2 quickstart code into my existing webpack setup, but I seem to be facing an issue where something is interfering with the promise from zone.js, resulting in an error. Based on my research on Stack Overflow, it appears ...

Dealing with Typescript in Node.js: Handling the error 'Property not found on type Global & typeof globalThis'

I recently encountered an issue with my NodeJS app that is built with typescript and global.d.ts file. The strange part is that everything works fine in my old application, but when I try to run the new one using ts-node-dev ts-main-file.ts, I encounter an ...

Encountering difficulty in fetching data from a service with ng-select

Currently, I am utilizing ng-select for a form that allows users to search for activities to add. The ng-select component triggers a function whenever something is typed into the field. This function then calls a service that fetches an array of activities ...

Creating a default option in a Select tag with React when iterating over elements using the map method

After learning that each element in the dropdown must be given by the Option tag when using Select, I created an array of values for the dropdown: a = ['hai','hello','what'] To optimize my code, I wrote it in the following ...

Looking to migrate my current firebase/react project to typescript. Any tips on how to batch.update?

Having difficulty resolving a typescript error related to batch.update in my code. const batch = db.batch(); const listingDoc = await db.collection("listings").doc(listingID).get(); const listingData = listingDoc.data( ...

The function tokenNotExpired encounters an error when attempting to access the localStorage, as it

I am looking to incorporate the angular2-jwt library into my project: https://github.com/auth0/angular2-jwt However, I encountered an exception when attempting to call the tokenNotExpired function: Exception: Call to Node module failed with error: Refe ...

Tips for programmatically choosing dropdown menus in Angular 5

Trying to set up a dropdown select option in Angular 5 that dynamically changes based on the backend's input. https://i.sstatic.net/8cgsh.png Keep in mind that both select boxes are identical, only the options inside them vary. selector.html <h ...

The combination of Ionic's new slides feature paired with Swiper and angular-google-maps results in a gray area appearing when the user

Whenever I try to combine the new slides feature (known as Swiper) with angular-google-maps, dragging within Google Maps becomes impossible and results in a grey space instead. Even when I attempt to disable swiping using .lockSwipes(), the issue persists ...

Utilizing symbols as a keyof type: A simple guide

Let's consider the following: type Bar = keyof Collection<string> In this scenario, Bar denotes the type of keys present in the Collection object, such as insert or remove: const x: Bar = 'insert'; ✅ But wait, the Collection also c ...

Ways to transfer application routing to "AngularJS" rather than "ASP.NET MVC"

My current project utilizes asp.net MVC in conjunction with angular 8 for the front end. I have successfully loaded all necessary angular files (main.*.js, polyfills.*.js, runtime.*.js) and CSS files in the index of the project. When accessing my s ...

I'm facing issues with the angular-stl-model-viewer in my current Angular project

I recently attempted to incorporate an stl-viewer into my Angular project using the npm package angular-stl-model-viewer and managed to install all necessary dependencies without any issues. However, I encountered a problem where the viewer is not displayi ...