Using InjectionToken results in the generation of the error message "Encountered an issue while resolving symbol values

Question

Using InjectionToken results in the generation of the error message "Encountered an issue while resolving symbol values

Recently, I encountered an issue while building my Ionic 3 app using ionic cordova build ios --prod.

Everything was functioning perfectly until a package update caused some complications, preventing me from successfully building the app.

I suspect that the error is stemming from an InjectionToken within my app.config.ts file, which I implemented based on the guidelines outlined in Angular 4 documentation.

Here's a snippet from app.config.ts:

import { InjectionToken } from '@angular/core';

export interface OneSignalConfig {
  apiKey: string
};

// PROD Config

export const ONESIGNAL_CONFIG: OneSignalConfig = {
  apiKey: '**apiKey**'
};

export const firebaseConfig = {
  ...
};

export const mixpanelToken = "**mytoken**";

// COMMON
export let ONESIGNAL_CONFIG_TOKEN = new InjectionToken<OneSignalConfig>('onesignal.config');

In my app.module.ts file, I utilized these configurations:

// Config imports
import { firebaseConfig, ONESIGNAL_CONFIG, ONESIGNAL_CONFIG_TOKEN } from './app-config.ts';
...
// the providers part
providers: [
    ...
    OneSignal,
    { provide: ONESIGNAL_CONFIG_TOKEN, useValue: ONESIGNAL_CONFIG },
...
  ]

However, attempting to build the app resulted in the following issue:

[16:10:19]  ngc started ...
[16:10:27]  typescript error
            Error encountered resolving symbol values statically. Could not resolve ./app-config.ts relative to
            /Users/me/myproj/src/app/app.module.ts., resolving symbol
            AppModule in /Users/me/myproj/src/app/app.module.ts,
            resolving symbol AppModule in
            /Users/me/myproj/src/app/app.module.ts, resolving symbol
            AppModule in /Users/me/myproj/src/app/app.module.ts

Error: The Angular AoT build failed. See the issues above
    at /Users/me/myproj/node_modules/@ionic/app-scripts/dist/aot/aot-compiler.js:237:55
    at step (/Users/me/myproj/node_modules/@ionic/app-scripts/dist/aot/aot-compiler.js:32:23)
    at Object.next (/Users/me/myproj/node_modules/@ionic/app-scripts/dist/aot/aot-compiler.js:13:53)
    at fulfilled (/Users/me/myproj/node_modules/@ionic/app-scripts/dist/aot/aot-compiler.js:4:58)
[16:10:27]  copy finished in 7.84 s

Strangely enough, the app functions as expected when using serve, run, and emulate. This inconsistency is quite perplexing to me.

angular typescript ionic-framework ionic2 ionic3

Answer 1

Answer №1

Here is a simplified version:

import { InjectionToken } from "@angular/core";

    export let APP_CONFIG= new InjectionToken<AppConfig >('app.config');

    export interface AppConfig {
      apiKey: string
      // Add any other constants here.
    }

    export const AppConstants: AppConfig = {
      apiKey: '**apiKey**'
      // Add any other values matching the interface above.
    }

In your module:

// Import config settings
import { firebaseConfig, ONESIGNAL_CONFIG, ONESIGNAL_CONFIG_TOKEN } from './app-config.ts';
...
// Set up providers
providers: [
    ...
    OneSignal,
    { provide: APP_CONFIG, useValue: AppConstants },
...
  ]

In your components:

...

import { Inject } from '@angular/core';
import { APP_CONFIG, AppConfig } from '../../app/app.config';

...

constructor(@Inject(APP_CONFIG)
    private config: AppConfig,
) {
  console.log(this.config.apiKey) // Use constants as needed.
}

Answer 2

Here is a simplified version:

import { InjectionToken } from "@angular/core";

    export let APP_CONFIG= new InjectionToken<AppConfig >('app.config');

    export interface AppConfig {
      apiKey: string
      // Add any other constants here.
    }

    export const AppConstants: AppConfig = {
      apiKey: '**apiKey**'
      // Add any other values matching the interface above.
    }

In your module:

// Import config settings
import { firebaseConfig, ONESIGNAL_CONFIG, ONESIGNAL_CONFIG_TOKEN } from './app-config.ts';
...
// Set up providers
providers: [
    ...
    OneSignal,
    { provide: APP_CONFIG, useValue: AppConstants },
...
  ]

In your components:

...

import { Inject } from '@angular/core';
import { APP_CONFIG, AppConfig } from '../../app/app.config';

...

constructor(@Inject(APP_CONFIG)
    private config: AppConfig,
) {
  console.log(this.config.apiKey) // Use constants as needed.
}

Answer 3

Answer №2

It is important to note that file extensions should not be included in your import statement. To resolve the issue, simply remove `.ts` from app.module.ts. This adjustment should allow your code to function properly.

import { firebaseConfig, ONESIGNAL_CONFIG, ONESIGNAL_CONFIG_TOKEN } from './app-config';

If you encounter a different error message containing `ts`, it suggests that you may be working with an older version of Angular.

Answer 4

It is important to note that file extensions should not be included in your import statement. To resolve the issue, simply remove `.ts` from app.module.ts. This adjustment should allow your code to function properly.

import { firebaseConfig, ONESIGNAL_CONFIG, ONESIGNAL_CONFIG_TOKEN } from './app-config';

If you encounter a different error message containing `ts`, it suggests that you may be working with an older version of Angular.

Using InjectionToken results in the generation of the error message "Encountered an issue while resolving symbol values

Answer №1

Answer №2

Similar questions

Is there a way to verify within the "if" statement without repeating the code?

Is it possible to enlarge the panel only by clicking on the text, without affecting the entire header panel?

Begin the Angular 4 project by loading it with RequireJS

What is the reason behind `ngAfterViewChecked` and `ngAfterContentChecked` being invoked twice?

Adding typing to Firebase Functions handlers V2: A step-by-step guide

Sometimes the downloaded xlsx file may become corrupted

Tips for obtaining response headers

Encountering "SyntaxError:" due to an unexpected token in the JSON data at the beginning while trying to parse with JSON.parse

Can someone please point me in the right direction to locate a Typescript project within Visual Studio

How can I apply concatMap in Angular?

Determine the date and time based on the number of days passed

Steps for compiling SCSS to CSS using Angular-CLI and moving it to the assets directory

Creating an interface or type in Typescript with a nested object property that uses keys from the same interface

Having trouble activating the ENTER key press event listener for the QuillJS editor in Angular 4 and above

The alignment of elements side by side in Angular Flex is not supported, specifically in versions Angular 8.2.1 and Flex-Layout 8.0.0.beta 26

Developing React component libraries with TypeScript compared to Babel compiler

Guide to customizing the appearance of a Bootstrap Component within an Angular project

Retrieve the initial token from a union, referred to as an "or list," in Typescript

Mocked observables are returned when testing an Angular service that includes parameters

Getting started with Angular 2 using NPM version 3.10.6 and Angular CLI 1.0.0