Skip to content

Error encountered resolving symbol values statically #4956

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
abansal77 opened this issue Feb 23, 2017 · 23 comments
Closed

Error encountered resolving symbol values statically #4956

abansal77 opened this issue Feb 23, 2017 · 23 comments

Comments

@abansal77
Copy link

Please provide us with the following information:

OS?

Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)
Ubuntu

Versions.

Please run ng --version. If there's nothing outputted, please run in a Terminal: node --version and paste the result here:
@angular/cli: 1.0.0-beta.32.3 [1.0.0-beta.24]
node: 6.10.0
os: linux x64
@angular/common: 2.4.8
@angular/compiler: 2.4.8
@angular/core: 2.4.8
@angular/flex-layout: 2.0.0-beta.5
@angular/forms: 2.4.8
@angular/http: 2.4.8
@angular/material: 2.0.0-beta.2
@angular/platform-browser: 2.4.8
@angular/platform-browser-dynamic: 2.4.8
@angular/router: 3.4.8
@angular/compiler-cli: 2.4.8
@angular/cli: 1.0.0-beta.32.3

Repro steps.

Was this an app that wasn't created using the CLI? What change did you do on your code? etc.
We did development on Windows/Mac. For production, we chose ubuntu. Fresh machine. Everything installed fresh. When we compile, we get following error

package.json file

{
  "name": "glam",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^2.3.1",
    "@angular/compiler": "^2.3.1",
    "@angular/core": "^2.3.1",
    "@angular/flex-layout": "^2.0.0-beta.1",
    "@angular/forms": "^2.3.1",
    "@angular/http": "^2.3.1",
    "@angular/material": "^2.0.0-beta.2",
    "@angular/platform-browser": "^2.3.1",
    "@angular/platform-browser-dynamic": "^2.3.1",
    "@angular/router": "^3.3.1",
    "@angular2-material/core": "^2.0.0-alpha.8-2",
    "angular-2-local-storage": "^1.0.0",
    "angular2-onsenui": "^1.0.0-rc.4",
    "core-js": "^2.4.1",
    "hammerjs": "^2.0.8",
    "ng2-material": "^0.8.1",
    "ng2-page-scroll": "^4.0.0-beta.2",
    "onsenui": "^2.0.5",
    "primeng": "^1.1.2",
    "rxjs": "^5.0.1",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.7.2"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^2.3.1",
    "@types/jasmine": "2.5.38",
    "@types/node": "^6.0.42",
    "@angular/cli": "1.0.0-beta.32.3",
    "codelyzer": "~2.0.0-beta.1",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "~4.0.13",
    "ts-node": "1.2.1",
    "tslint": "^4.0.2",
    "typescript": "~2.0.3"
  }
}

The log given by the failure.

Normally this include a stack trace and some more information.

ng build
10% building modules 3/3 modules 0 active(node:24869) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see webpack/loader-utils#56
parseQuery() will be replaced with getOptions() in the next major version of loader-utils.
Hash: aadb17976632b415a446
Time: 23846ms
chunk {0} main.bundle.js, main.bundle.js.map (main) 180 kB {2} [initial] [rendered]
chunk {1} styles.bundle.js, styles.bundle.js.map (styles) 194 kB {3} [initial] [rendered]
chunk {2} vendor.bundle.js, vendor.bundle.js.map (vendor) 5.22 MB [initial] [rendered]
chunk {3} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]

ERROR in Error encountered resolving symbol values statically. Calling function 'FlexLayoutModule', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol AppModule in /home/glamstudios/mobilesite/src/app/app.module.ts, resolving symbol AppModule in /home/glamstudios/mobilesite/src/app/app.module.ts

Mention any other details that might be useful.


Thanks! We'll be in touch soon.

@Meligy
Copy link
Contributor

Meligy commented Feb 23, 2017

This is an Angular compiler problem really not CLI problem.

convert any lambda () => something or function function something() {} to use export like:

export function getFlexLayoutModule() {
  return FlexLayoutModule;
}

@krishollenbeck
Copy link

@Meligy There seems to be a lot of confusion in regards to the AOT compiler, myself included. I am also running into some of these errors. Is there a guide anywhere on how to use the AOT compiler with angular cli? I see in the Angular guide https://angular.io/docs/ts/latest/cookbook/aot-compiler.html they recommend creating a separate tsconfig, tsconfig-aot.json. If so shouldn't this be a part of @angular/cli when a new project is created?

I have also read in the change log a while back that AOT is default when using --prod flag (which is fine). But I don't think most people will realize this right away, I know I didn't. With that said, is there a way to build --prod with the JIT compiler? This also doesn't appear to be documented anywhere. Or I am just not looking in the right places. Any enlightenment/guidance on this subject would be much appreciated. Thanks,

@deebloo
Copy link
Contributor

deebloo commented Feb 24, 2017

you can turn AOT off by saying ng build --prod --aot=false.
I however would not recommend this as the performance gains of AOT are to substantial to ignore.

The goal of AOT in the CLI is to abstract it away so that you don't have to think about it. If you want a better understanding of what the AOT compiler is/does that article you posted should do a good job walking you through the steps. There is no tsconfig.aot.json because the cli is handling all of this for you in memory, behind the scenes.

The docs for the cli are getting a lot of focus so things should improve in that regard.

@krishollenbeck
Copy link

@deebloo, Thanks for the response. That at least clears up my confusion about tsconfig-aot.json. I will be looking forward to those updated docs.

@filipesilva
Copy link
Contributor

Heya, errors like Error encountered resolving symbol values statically mean that there has been some problem in statically analyzing your app.

The CLI always runs statical analysis on code to ensure it will run when compiled with AOT. This may cause a lot of static analysis errors to surface when importing your project into the CLI, or upgrading for older versions where we didn't run this kind of analysis.

A good resource on how to to debug these errors is https://github.com/rangle/angular-2-aot-sandbox#aot-dos-and-donts.

Also, the examples shown in https://angular.io/docs/ts/latest/cookbook/aot-compiler.html are not using the CLI so they are very different.

@darincardin
Copy link

darincardin commented Jun 6, 2017

This is like the 6th different error i have gotten while trying to configure AOT. The angular team should not put out code until it has been properly tested.
My code works absolutely fine with JIT. As soon as AOT comes into the picture, i get a tidal wave of errors.

@Karasuni
Copy link

Karasuni commented Jun 7, 2017

I've been getting stuck on this issue with the error

Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function (position 9:15 in the original .ts file)

I don't understand what's going on. Originally my file included

export const testIndexedDBCache = new InjectionToken('testIndexedDBCache');

export let testIndexedDBCacheProvider : Provider = {
  provide: testIndexedDBCache,
  useFactory: () => new IndexedDBCache('test')
  //          ^--- position of error
};

But even when I change the arrow function it still gets stuck on the same position!

export const testIndexedDBCache = new InjectionToken('testIndexedDBCache');

export let testIndexedDBCacheProvider : Provider = {
  provide: testIndexedDBCache,
  useFactory: function() { return new IndexedDBCache('test'); }
  //          ^--- position of error
};

@darincardin
Copy link

Karasuni, Angular 2 AOT is broken right now. I wasted over a week trying to update my project to work with AOT. Now I am extremely far behind, and AOT still doesn't work. My advice is to just use the Uglify plugin.

@Yugloocamai
Copy link

I have a project that has been ejected to Webpack that seems to build AoT ok, but when I use NGC manually I run into this error. What's the difference?

@craftpip
Copy link

craftpip commented Jul 12, 2017

I get this error, when i first run build watch, but later when i change a file, it builds fine, :/ strange

ERROR in Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function (position 36:31 in the original .ts file), resolving symbol routes in E:/www/htdoc
s/website/admin-src/src/app/app.routing.ts, resolving symbol AppRoutingModule in E:/www/htdocs/website/admin-src/src/app/app.routing.ts, resolving symbol AppRoutingModule in E:/www/htdocs/website/admin-src/src/app/app.routing.ts, resolving s
ymbol AppRoutingModule in E:/www/htdocs/website/admin-src/src/app/app.routing.ts

@lifenautjoe
Copy link

Is AOT even worth all the pain it causes? Why does angular need this while other libraries are doing just fine without it? Looks a lot like a fix to a problem that shouldn't exist.

@dbettini
Copy link

dbettini commented Oct 3, 2017

@lifenautjoe probably because Angular is a few times larger than other libraries that do the same job, like vue.js. To be more precise, vue.js supports AOT through its loaders out of the box, but people usually don't even know that (maybe because vue.js is much smaller even without AOT so they don't feel it makes much difference, or because Angular causes so much pain while trying to set it up, so you NEED to talk about it).

@irtazabbas
Copy link

irtazabbas commented Oct 22, 2017

Without going into too much details, I worked around this by doing what the error's details suggested. Code that was erring out is:

import * as Modules from './modules';

...
imports: [
  BrowserModule,
  RouterModule,
].concat(Object.keys(Modules).map(key => Modules[key]))

Fixed by creating a function and exporting it that creates an array out of the object Modules, like so:

export function joinImports() {
  return Modules: Object.keys(Modules).map(key => Modules[key]);
}

...
imports: [
  BrowserModule,
  RouterModule
].concat(joinImports()),

@skoropadas
Copy link

@irtazabbas i tried your solution, compiling is ok, but modules are not imported

@irtazabbas
Copy link

With the option -aot, I had to remove the dynamic references, meaning I had to explicitly import or declare components and modules, so that it can be analyzed statically. It was a bummer because I had to and will have to write more code, but you also do get the benefits of aot compilation mode. @skoropadas

@vytautas-pranskunas-
Copy link

Bug Report

  • bug report
    I cannot understand why all issues are closed but it got me annoyed to the death... Wasted whole day on this and still cannot understand why this code is not working
@NgModule({
    imports: [CommonModule]
})
export class StoreModule {
    static provideStore(): ModuleWithProviders {
        return {
            ngModule: StoreModule,
            providers: [ added some providers]
        };
    }     
}

throwing an error:

"Calling function 'SotreModule', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol AppModule"

I compared it with RouterModule in .ts and .js all the same. Tried to many of work arounds and nothing.
In dev mode all works fine, when this code is added stright to project it works fine too, but when exported as a separate package - BAM - nothing!

Anybody?

For example RouterModule:

@NgModule({declarations: ROUTER_DIRECTIVES, exports: ROUTER_DIRECTIVES})
export class RouterModule {
  constructor(@Optional() @Inject(ROUTER_FORROOT_GUARD) guard: any, @Optional() router: Router) {}
  static forChild(routes: Routes): ModuleWithProviders {
    return {ngModule: RouterModule, providers: [provideRoutes(routes)]};
  }
}

If this thing will not be resolved I will not have any other way just to drop Angular support and stay only in react since this issue with ngc aot is very old.

More than that - when compiling AOT with webpack all works fine, just after upgrading to Angular 5.0.0 ngc-weback plugin is not working any more.

here is complete code of ng-state.module.ts:

import { Inject, Injector, ModuleWithProviders, NgModule, InjectionToken } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Dispatcher } from './services/dispatcher';
import { Router } from '@angular/router';
import { RouterState } from './state/router-state';
import { ServiceLocator } from './helpers/service-locator';
import { State } from './state/state';
import { StateHistory } from './state/history';
import { StateHistoryComponent } from './state/state-history';
import { Store } from './store/store';

export const INITIAL_STATE = new InjectionToken('INITIAL_STATE');
export const COLLECT_HISTORY = new InjectionToken('COLLECT_HISTORY');
export const STORE_HISTORY_ITEMS = new InjectionToken('STORE_HISTORY_ITEMS');
export const IS_PROD = new InjectionToken('IS_PROD');

export function stateFactory(initialState) {
    return new State(initialState);
}

export function storeFactory(state: State<any>) {
    return new Store(state);
}

export function historyFactory(store: Store<any>) {
    return new StateHistory(store);
}

export function routerStateFactory(store: Store<any>, router: Router) {
    return new RouterState(store, router);
}

@NgModule({
    imports: [CommonModule],
    declarations: [StateHistoryComponent],
    exports: [StateHistoryComponent]
})
export class StoreModule {
    static provideStore(initialState: any, isProd?: boolean, collectHistory?: boolean, storeHistoryItems?: number): ModuleWithProviders {
        return {
            ngModule: StoreModule,
            providers: [
                { provide: STORE_HISTORY_ITEMS, useValue: storeHistoryItems },
                { provide: COLLECT_HISTORY, useValue: collectHistory },
                { provide: INITIAL_STATE, useValue: initialState },
                { provide: IS_PROD, useValue: isProd },
                { provide: State, useFactory: stateFactory, deps: [INITIAL_STATE] },
                { provide: Store, useFactory: storeFactory, deps: [State] },
                { provide: StateHistory, useFactory: historyFactory, deps: [Store, INITIAL_STATE] },
                { provide: RouterState, useFactory: routerStateFactory, deps: [Store, Router] },
                Dispatcher
            ]
        };
    }

    constructor(
        injector: Injector,
        stateHistory: StateHistory,
        routerState: RouterState,
        @Inject(INITIAL_STATE) initialState: any,
        @Inject(STORE_HISTORY_ITEMS) storeHistoryItems: any,
        @Inject(COLLECT_HISTORY) collectHistory: any,
        @Inject(IS_PROD) isProd: any
    ) {
        if (storeHistoryItems !== undefined) {
            StateHistory.collectHistory = collectHistory;
        }

        if (collectHistory !== undefined) {
            StateHistory.storeHistoryItems = storeHistoryItems;
        }

        ServiceLocator.injector = injector;
        stateHistory.init(initialState);
        routerState.init();

        if (!isProd) {
            (<any>window).state = StateHistory;
        }
    }
}

@darin-cardin
Copy link

darin-cardin commented Nov 15, 2017

@vytautas-pranskunas- I know what you mean. the AOT team seems to be in denial about the scope of the bug issue. One time, a legitimate issue was raised, and the bug was closed, with the comment "Thats the way it works". If you dont have the time or resources to fix the issue, i understand. But to just close it, when many people report the same thing.

@vksgautam1
Copy link

i too have same issue
typescript error
Error encountered resolving symbol values statically. Expression form not supported (position 90:18 in the
original .ts file), resolving symbol AppModule in E:/Working Project/ngo/src/app/app.module.ts

@viniciusrs
Copy link

viniciusrs commented Jan 10, 2018

I'm trying using a subject on my route and it's cause the same issue.

export function subject() {
    return new Subject<string>();
}


@NgModule({
    imports: [
        RouterModule.forChild([
            {
                path: 'services',
                data: { breadcrumb: 'Our Services' },
                children: [
                    { path: '', pathMatch: 'full', component: ServicesComponent, data: { breadcrumb: null } },
                    { path: ':slug', component: ServiceComponent, data: { breadcrumb: subject() } },
                ]
            },
        ])
    ]
})
export class ServicesRoutingModule { }

@karthik473
Copy link

I also met with the same issue has anybody resoved this type of issue when running in (ng build --prod ) my angular version is 4
ERROR in Error: Error encountered resolving symbol values statically. Reference to a local (non- exported) symbol 'myDpStyles'. Consider exporting the symbol (position 9:7 in the original .ts file), resolving symbol MyDatePicker in D:/User/Karthik/test/07thaptilangular/AngularClient/node_modules/angular4-datepicker/src/my-date-picker/my-date-picker.component.ts

@Sai-Maha
Copy link

Hi , did anybody find the solution for that , i too get the same issue. It is strange we can able to run it when we run as "ng build --env=prod". But facing issue with ng build --prod. Are they both same .

@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 9, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests