Encountering an error message about 'resolving symbol values statically' while building an Angular 2 project

Currently, I am utilizing an older module called angular-2-local-storage. The initialization process is as follows:

const LOCAL_STORAGE_SERVICE_CONFIG_TOKEN: string = 'LOCAL_STORAGE_SERVICE_CONFIG';
export const LOCAL_STORAGE_SERVICE_CONFIG = new OpaqueToken(LOCAL_STORAGE_SERVICE_CONFIG_TOKEN);

...and within my code:

@NgModule({
  .....
  providers: [
      LocalStorageService,
    {
      provide: LOCAL_STORAGE_SERVICE_CONFIG,
      useValue: { prefix: 'miswap' }
    },
    {

Yet, during the build of my project, I encounter the following error message:

Error: Error encountered resolving symbol values statically. Only initialized variables and constants can be referenced because the value of this variable is needed by the template compiler (position 2:22 in the original .ts file), resolving symbol LOCAL_STORAGE_SERVICE_CONFIG in ....

This is the point where I find myself completely lost.

The problem seems to be related to the deprecation of OpaqueToken as discussed here. However, my project is based on Angular 2, not 4.

So, am I overlooking something? Could this be due to a mismatch in the angular cli version? I am unsure where to look for a solution!

Here is a snippet from my package.json that might offer some insight:

  "devDependencies": {
    "@angular/compiler-cli": "^2.0.0",
    "@angular/platform-server": "2.0.0",
    "@angular/tsc-wrapped": "0.3.0",
    "@types/async": "2.0.31",
    "@types/core-js": "0.9.32",

Answer №1

Consider this concept: Have you checked the initial value of LOCAL_STORAGE_SERVICE_CONFIG before passing it? Experiment with

console.log(LOCAL_STORAGE_SERVICE_CONFIG)
just before initializing the @NgModule. If it outputs undefined, then there might be an issue with the import, causing the value to be missing. Alternatively, there could be a problem with new OpaqueToken() - is OpaqueToken not defined correctly?

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

Trouble with line breaks in expandable rows of data grid causing clarity issues

Exploring the expandable rows feature of Clarity datagrid for the first time. I initially thought I could insert any HTML code within the collapsed view to show content. Using VMware's expandable datagrid: However, I am facing an issue where even wh ...

Retrieving a data type from the key values of deeply nested objects

I'm currently working with JSON data that contains nested objects, and my goal is to extract the unique set of second-level keys as a type. For instance: const json = { 'alice': { 'dogs': 1, 'birds': 4 ...

showcasing products from database with the help of Angular 12

Here are the files related to the item: Item file And here is the component file: Component file Lastly, this is the data service file: Data Service file However, issues arise when testing the code with console log statements as it indicates that the ...

Filtering an RXJS BehaviorSubject: A step-by-step guide

Looking to apply filtering on data using a BehaviorSubject but encountering some issues: public accounts: BehaviorSubject<any> = new BehaviorSubject(this.list); this.accounts.pipe(filter((poiData: any) => { console.log(poiData) } ...

Fetching data from one component to load an Angular component

Essentially, I have a grid within Ionic that dynamically populates its rows using ngFor. Each row contains an ionic button labeled "View details" which, when clicked, should display all the data associated with that specific object. Imagine it as a preview ...

Tips for setting the scroll back to the top when switching between pages in quasar

Whenever a qlist item is clicked by the user, it redirects to another page. However, the scrolled position from the previous page is retained and not set to the top. This means that the user has to manually scroll back to the top to view the contents of th ...

*NgFor toggle visibility of specific item

Here is a snippet of HTML code that I'm working with: <!-- Toggle show hide --> <ng-container *ngFor="let plateValue of plateValues; let i=index"> <button (click)="toggle(plateValue)">{{i}}. {{ btnText }}</button> ...

Clicking on the sub kendo panelbar item activates the parent kendo panelbar item

Utilizing a Kendo Angular UI panelbar within the sidepanel as a treemenu with submenu's, each item is linked to the Angular router routes array via routerLink. An issue arises when opening the submenu, where the parent menuitem's path is followe ...

Having trouble retrieving the user-object within tRPC createContext using express

I'm encountering an issue with my tRPC configuration where it is unable to access the express session on the request object. Currently, I am implementing passport.js with Google and Facebook providers. Whenever I make a request to a regular HTTP rout ...

Is there an npm module for filtering cities by country?

Looking to implement city or state selection based on country in my Angular project. Is there a suitable npm package or API that can help achieve this functionality? ...

How to filter an array in Angular 4 without the need for creating a new array and then displaying the filtered results within the same

In my collection of students, I have their names paired with their academic outcomes. studentResults = [ {name: 'Adam', result : 'Passed'}, {name: 'Alan', result : 'Failed'}, {name : 'Sandy', result : &ap ...

Contrasting between betting text and console error logging in Angular

Currently working on an Angular application and exploring the best practices for error logging. I'm pondering whether to opt for console logging or text-based logging. Text-based logging seems beneficial as it stores historical error data on the serv ...

Setting up a Node.js project in your local environment and making it

I need help installing my custom project globally so I can access it from anywhere in my computer using the command line. However, I've been struggling to make it work. I attempted the following command: npm install -g . and some others that I can&ap ...

Guide to transforming a TaskOption into a TaskEither with fp-ts

I have a method that can locate an item in the database and retrieve a TaskOption: find: (key: SchemaInfo) => TO.TaskOption<Schema> and another method to store it: register: (schema: Schema) => TE.TaskEither<Error, void> Within my regis ...

It is not possible to import Angular MockBackend with a production build

In my Angular application, I have set up a mock backend for use in end-to-end tests. To determine whether to use the mock backend or an actual HTTP backend service, I created a factory function. The factory function checks if the build is for production a ...

Error: Unable to access the 'clearAsyncValidators' property as it is undefined when running Jest tests on an Angular component

Encountering an Error While Testing Components with Jest Here is my code block for onClickLogin() method: onClickLogin() { if(this.loginForm.valid) { this.api.getLoginData().subscribe(res => { const user = res.find(a => { ...

Routes within modules that are loaded lazily may not function properly for child components

I'm struggling to figure out the routing for a lazy loaded module. Take a look at this stackblitz I've created, which is based on the Angular lazy loading example with some modifications. Initially, the lazy loading function appears to be workin ...

Utilize Material icons in CSS for a list in Angular 9

My task involves altering the HTML provided by a content management system for one of our applications. Specifically, I need to replace all "ul"s with <mat-icon>check_circle_outline</mat-icon> instead of the default "." The challenge lies in t ...

Here's a unique rewritten version: "Achieving a looping carousel with autoplay in Angular 2+ using with

https://i.sstatic.net/MmmOg.jpg Could someone provide recommendations for an image carousel that is compatible with angular 8? I would also like to know how to customize the images inside the carousel specifically for small devices. Thank you in advance! ...

Which release of "ngx-bootstrap" is compatible with "Angular 17"?

Here's the scoop I attempted to download ngx-bootstarp but couldn't find a suitable version. I searched online, but there was no information available. Checking the list on the Angular Bootstrap official website, I noticed that version 17.0.0 ha ...