Encountering an Error on Building Android with Ionic 2 RC0 and Angular 2: ngc error during symbol values resolution

An error occurs when trying to build the Android application using the command ionic build android.

The error message reads: "ngc: Error: Error encountered resolving symbol values statically. Reference to a local (non-exported) symbol 'dictionary'. Consider exporting the symbol (position 14:8 in the original .ts file), resolving symbol TRANSLATION_PROVIDERS."

Here is the code snippet from my translation.ts file:

export const TRANSLATIONS = new OpaqueToken('translations');
// all translations
const dictionary : any = {
    [LANG_EN_NAME]: LANG_EN_TRANS,
    [LANG_AR_NAME]: LANG_AR_TRANS,
    [LANG_FR_NAME]: LANG_FR_TRANS
};
// providers
export const TRANSLATION_PROVIDERS : any = [
    { provide: TRANSLATIONS, useValue: dictionary},
];

In my app.module.ts file, I have the following code:

import {TRANSLATION_PROVIDERS,TranslatePipe,TranslateService} from './translate';

@NgModule({
  declarations: [
    MyApp,
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,

  ],
  providers: [TRANSLATION_PROVIDERS,TranslateService ]
})
export class AppModule {}

I am looking for suggestions on how to resolve this issue. Interestingly, when I use the ionic serve command, the project functions perfectly with translations.

Answer №1

I stumbled upon a solution for that issue.

There's no need to export your dictionary object, just adjust the keys to static values.

Here is what worked for me:

// all translations
const dictionary = {
  "en": LANG_EN_TRANS,
  "ar": LANG_AR_TRANS,
  "fr": LANG_FR_TRANS
};
// providers
export const TRANSLATION_PROVIDERS = [
  { provide: TRANSLATIONS, useValue: dictionary },
];

Answer №2

Indeed, just as pointed out by @welefish in their response, there is no need to export the dictionary object. All you have to do is modify the keys to a static value.

Note: An alternative approach (I am sharing this as an answer because the method suggested by @welefish did not work for me)

let en = LANG_EN_NAME;
let er = LANG_AR_NAME;
let fr = LANG_FR_NAME;

const dictionary : any = {
    en: LANG_EN_TRANS,
    er: LANG_AR_TRANS,
    fr: LANG_FR_TRANS
};

// providers
export const TRANSLATION_PROVIDERS = [
  { provide: TRANSLATIONS, useValue: dictionary },
];

Answer №3

Just follow the instructions from the compiler :). Make sure to export your dictionary:

export const languageDictionary : any = {
    [ENGLISH_NAME]: ENGLISH_TRANSLATION,
    [ARABIC_NAME]: ARABIC_TRANSLATION,
    [FRENCH_NAME]: FRENCH_TRANSLATION
};

Answer №4

Specify the [LANG_EN_NAME] data type:

export const LANG_EN_NAME : string = 'en';

This solution solved my issue.

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

Angular: Step-by-step guide to controlling input field visibility with a toggle switch

// The property autoGenerate is declared in my .ts file autoGenerate: boolean; constructor(){ this.autoGenerate = true; } <div class="col-sm-4"> <div class="checkbox switcher"> <label>Invoice Number * <input t ...

Implementation of setProperties method on LineLayer in MapBox encounters resolution issues

I am currently utilizing the Android Mapbox SDK to integrate a VectorSource into a MapboxMap and then I am trying to incorporate a LineLayer onto the map as well. My version is 5.1.3 This code will be written in TypeScript due to its compatibility with t ...

Struggling with JSON parsing on your Android device?

Greetings to all Android developers, In the process of creating a currency application, I am utilizing data from the following website (which provides a JSON response): Below is the function in my code that retrieves the currency rates from the mentioned ...

Is it possible for me to establish alternative coordinates within the "findCurrentPlace()" function?

I understand that this method uses the device's current location to find places where it is most likely located, but I'm unsure how to retrieve places from different coordinates. ...

Angular application's HTML Canvas unexpectedly changes to a black color when I begin drawing

Currently, I am developing an Angular application in which users can draw text fields on PDF pages. To achieve this functionality, I have integrated the ng2-pdf-viewer library and created a PDF page component that incorporates an HTML canvas element. Howe ...

Launching an activity within a BroadcastReceiver

I'm currently working on an app that automatically calls the sender of an SMS as soon as it's received by the smartphone. Here's a look at my code: public class SmsReceiver extends BroadcastReceiver { @Override public voi ...

What is the best way to verify if the ReactDOM.render method has been invoked with a React component as an argument

Here's the code snippet: index.tsx: import React, { Component } from 'react'; import ReactDOM from 'react-dom'; export function Loading(props) { return <div {...props}>loading...</div>; } export class MyComponent e ...

Guide to setting a white background color specifically for a lightbox in Angular

I want to change the background-color to white for my gallery items. Currently, I am using the following code to open the full-screen view: this.lightbox.open(0, 'lightbox1', { panelClass: 'fullscreen'}) Can someone please guide me on ...

Error message: VSCode is reporting an issue with TSLint, stating that the current working

I'm currently working in VSCode using TSLint version 5.11.0. In my VSCode settings, I have enabled the following option: "tslint.autoFixOnSave": true However, every time I open a TypeScript file, I encounter the following TS error message: [Info - ...

NativeScript does not acknowledge the permission "android.Manifest.permission.READ_CONTACTS"

Hi there! I am a beginner in mobile development and currently learning Angular 2. I am facing an issue with requesting permission for reading contacts in NativeScript. It seems that "android" is not being recognized. For instance, when trying to execute t ...

What is the best way to divide a bootstrap card into two columns?

Currently, in my Angular 9 application, I have a component that utilizes Bootstrap cards. My objective is to create the following layout within this component: For the desktop view, the layout should resemble the image below: https://i.sstatic.net/3MGKm. ...

Parsing string to JSON object and extracting specific information

In my code, I have a variable named "response" that contains the following string: {"test": { "id": 179512, "name": "Test", "IconId": 606, "revisionDate": 139844341200, "Level": 20 }} My goal is to extract the value of the id key and store ...

Creating a circular array of raycast directions with HTML Canvas 2D

I'm currently working on implementing raycasting in typescript with HTML Canvas 2D based on the tutorial from this video: https://youtu.be/TOEi6T2mtHo. However, I've encountered an issue where the rays being cast consistently point in a single di ...

Different ways to update the AutoComplete Style attribute

MuiInput-formControl { margin-top: 16px; Is there a way to reset the marginTop property to zero? I attempted the following method, but it was not successful. MuiFormControlLabel: { marginTop: 0, }, <Autocomplete disabl ...

Is it possible to leverage two JSON arrays within the doInBackground method of an AsyncTask?

Is there a way to incorporate two different JSONArray objects into the doInBackground method of an AsyncTask? I would like to display one set of data from a JSONArray in a custom list view, and another set of data from a separate JSONArray in a TextView. ...

Encountered difficulties decoding certain animated GIF files while using Movie on Android version 2.3.x or earlier

Experimenting with the snippet code below to extract data from an animated gif file using the Movie class. URL url; InputStream is = null; BufferedInputStream bis = null; url = new URL("http://emos.plurk ...

Using JavaScript and TypeScript to create a regular expression that meets three different conditions

I need assistance validating a specific element in an XML document using regular expressions. <ConfigOption>value</ConfigOption> Here are the requirements for ConfigOption: Allowed characters include letters, numbers, underscores, and spaces. ...

How to Change the Title of the Toolbar in an Android Setting

I encountered a minor bug with fragment transactions. The issue arises when I open multiple fragments and press the back button, leading to incorrect titles displayed on the toolbar. For example, if I navigate from Home -> Expenses fragment, and then p ...

The method srcFile() is not defined in the archives.internal.DefaultManifest signature

Attempting to set up my initial Gradle project in Android Studio and encountering an issue that seems confusing. The error message states a problem with 'app/src/main/AndroidManifest.xml' as a string. Error:(23, 0) No signature of method: or ...

Error: The AppModule is missing a provider for the Function in the RouterModule, causing a NullInjectorError

https://i.stack.imgur.com/uKKKp.png Lately, I delved into the world of Angular and encountered a perplexing issue in my initial project. The problem arises when I attempt to run the application using ng serve.https://i.stack.imgur.com/H0hEL.png ...