angular / angular-cli

CLI tool for Angular
https://cli.angular.io
MIT License
26.73k stars 11.98k forks source link

ERROR in Error encountered resolving symbol values statically. Calling function 'PerfectScrollbarModule', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function #3707

Closed Oleg1969 closed 7 years ago

Oleg1969 commented 7 years ago

Please provide us with the following information:

OS?

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

Versions.

Please run ng --version. If there's nothing outputted, please run in a Terminal: node --version and paste the result here: cli beta 24

Repro steps.

Was this an app that wasn't created using the CLI? What change did you do on your code? etc.

  1. generate new project with cli beta 24
  2. npm install angular2-perfect-scrollbar --save
  3. import PerfectScrollbarModule.forRoot({suppressScrollX: true})

The log given by the failure.

Normally this include a stack trace and some more information.

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

Mention any other details that might be useful.

angular version 2.3.1


Thanks! We'll be in touch soon.

markmssd commented 7 years ago

Also getting this error, upgrading typescript seems to resolve it (although it might create other errors :/)

hansl commented 7 years ago

angular2-perfect-scrollbar is not publishing metadata, and so is not compatible with Angular CLI. I contacted our relation team and they'll contact that library.

Oleg1969 commented 7 years ago

angular2-perfect-scrollbar is just one example , the are plenty modules like that. What you saying all of them will not be compatible with Angular CLI? What that means to us? We can not upgrade because of 3rd party modules simply will stop working. That is kind of odd path. Where would I find information about "publishing metadata" in context with CLI compatibility?

hansl commented 7 years ago

We are working in the future to show a warning for those. I also think it shouldn't be an error, but there are cases where an error can happen because of these libraries (routing for example) and these libraries are not AOT-compatible (at all!).

We have clear guidelines for libraries that include generating those files and what to publish to NPM. If libraries don't follow those guidelines we can't guarantee that they'll be compatible.

And yes, we have report of these a lot, and when I tell the relation team they are actually efficient in dealing with those. So there's hope.

loicsalou commented 7 years ago

please provide a link to your clear guidelines about publishing compatible library, I'm trying to make one and I'd like it to be compatible.

antoineabourjeilycme commented 7 years ago

@hansl I'm having the same problem with Angular-Datatables. is there anything we can do ourselves? or should we always wait for the 3rd party libraries to publish metadata. Where can I find more about the metadata you're talking about?

Mage111 commented 7 years ago

I have same issue. in beta.22 all work fine. but when I upgrade to beta.24 I got the following error: ERROR in Error encountered resolving symbol values statically. Calling function 'SharedModule', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol AppModule in ../src/app/app.module.ts, resolving symbol AppModule in ../src/app/app.module.ts

Bretto commented 7 years ago

I have the same issue with:

angular-cli: 1.0.0-beta.24
node: 7.0.0
os: linux x64
@angular/common: 2.4.2
@angular/compiler: 2.4.2
@angular/core: 2.4.2
@angular/forms: 2.4.2
@angular/http: 2.4.2
@angular/platform-browser: 2.4.2
@angular/platform-browser-dynamic: 2.4.2
@angular/router: 3.4.2
@angular/compiler-cli: 2.4.2

Error:

client?93b6:80Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function (position 12:42 in the original .ts file), resolving symbol compose in /data/2017/search-project/node_modules/@ngrx/core/compose.d.ts, resolving symbol appStore in /data/2017/search-project/src/app/main/app.store.ts, resolving symbol appStore in /data/2017/search-project/src/app/main/app.store.ts, resolving symbol appStore in /data/2017/search-project/src/app/main/app.store.ts, resolving symbol AppModule in /data/2017/search-project/src/app/main/app.module.ts, resolving symbol AppModule in /data/2017/search-project/src/app/main/app.module.ts, resolving symbol AppModule in /data/2017/search-project/src/app/main/app.module.ts

baruchvlz commented 7 years ago

@Bretto That seems to be a missing export error.

Mage111 commented 7 years ago

I solved it by replace the anonymous (lambda) method to explicitly method: providers: [ TranslateService, { provide: TranslateLoader, useFactory: translateLoader, deps: [Http] } ] and following method: export function translateLoader(http: Http) { return new TranslateStaticLoader(http, 'assets/i18n', '.json');

instead of: TranslateModule.forRoot({ provide: TranslateLoader, useFactory: (http: Http) => new TranslateStaticLoader(http, '/assets/i18n', '.json'), deps: [Http] })

Bretto commented 7 years ago

@baruchvlz the application works, I don't think its a missing export

export const appStore = compose(storeLogger(), combineReducers)({
  items: TntReducer.registerReducer(ItemReducers, itemInitState),
});

With the same code other project on previous version of the CLI had no issues...

Currently the application works but when it starts with a big error like this it doesn't look good/pro... I have updated the CLI:

angular-cli: 1.0.0-beta.25.5
node: 7.0.0
os: linux x64
@angular/common: 2.4.3
@angular/compiler: 2.4.3
@angular/core: 2.4.3
@angular/forms: 2.4.3
@angular/http: 2.4.3
@angular/platform-browser: 2.4.3
@angular/platform-browser-dynamic: 2.4.3
@angular/router: 3.4.3
@angular/compiler-cli: 2.4.3

but the problem remains. Is it correct to assume that the issue is in the Ngrx code base ? How do I fix this ?

beeman commented 7 years ago

please provide a link to your clear guidelines about publishing compatible library, I'm trying to make one and I'd like it to be compatible.

@loicsalou I just came across your comment. You can refer to this guide https://medium.com/@cyrilletuzi/how-to-build-and-publish-an-angular-module-7ad19c0b4464#.9y88ipdk7 on how to make a working module.

tom10271 commented 7 years ago
Error: Error encountered resolving symbol values statically. Calling function 'makeDecorator', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol Injectable in /Users/pathetic-dev/Sites/my-app/public-html/jspm_packages/npm/@angular/core@2.4.3/src/di/metadata.d.ts, resolving symbol OpaqueToken in /Users/pathetic-dev/Sites/my-app/public-html/jspm_packages/npm/@angular/core@2.4.3/src/di/opaque_token.d.ts, resolving symbol OpaqueToken in /Users/pathetic-dev/Sites/my-app/public-html/jspm_packages/npm/@angular/core@2.4.3/src/di/opaque_token.d.ts
    at simplifyInContext (/Users/pathetic-dev/Sites/my-app/node_modules/@angular/compiler/bundles/compiler.umd.js:25569:27)
    at StaticReflector.simplify (/Users/pathetic-dev/Sites/my-app/node_modules/@angular/compiler/bundles/compiler.umd.js:25581:17)
    at StaticReflector.annotations (/Users/pathetic-dev/Sites/my-app/node_modules/@angular/compiler/bundles/compiler.umd.js:25077:64)
    at NgModuleResolver.resolve (/Users/pathetic-dev/Sites/my-app/node_modules/@angular/compiler/bundles/compiler.umd.js:17557:86)
    at CompileMetadataResolver.getNgModuleMetadata (/Users/pathetic-dev/Sites/my-app/node_modules/@angular/compiler/bundles/compiler.umd.js:18058:64)
    at addNgModule (/Users/pathetic-dev/Sites/my-app/node_modules/@angular/compiler/bundles/compiler.umd.js:24839:62)
    at /Users/pathetic-dev/Sites/my-app/node_modules/@angular/compiler/bundles/compiler.umd.js:24850:18
    at Array.forEach (native)
    at _createNgModules (/Users/pathetic-dev/Sites/my-app/node_modules/@angular/compiler/bundles/compiler.umd.js:24849:30)
    at analyzeNgModules (/Users/pathetic-dev/Sites/my-app/node_modules/@angular/compiler/bundles/compiler.umd.js:24724:18)
Compilation failed

I start using ng2-cli but why official Angular 2 core library will trigger this error? Very frustrated for switching to AoT after over 1 day of trying....

joidegn commented 7 years ago

I had the same issue @tom10271. I think your problem is different than op's. Please check if you have a node_modules folder in ./src folder and if so remove it.

apelleti commented 7 years ago

@Bretto I have the same problem. In localhost, it's working even if there is the error. But with Jenkins, the build crash. Any update ?

Bretto commented 7 years ago

My Custom Module and the App had different versions of Ng2. After I updated both to the last version of angular the issue disappeared in my case. Hope this helps...

richardsengers commented 7 years ago

The error even shows up when your using "window." or "location." in your environment file :s Is it incorrect to use window and location in an Angular 2 app?

anrepppp commented 7 years ago

I am getting the same error, i tried to fix it by converting into an export function: Problem: {provide: APP_INITIALIZER, useFactory: (config: AppConfig) => () => config.load(), deps: [AppConfig], multi: true }, Step1: export function textFunction(config: AppConfig): any { () => { config.load() } }

{provide: APP_INITIALIZER, useFactory: textFunction, deps: [AppConfig], multi: true },

Error: AppInits[i] is not a function

Step2: export function textFunction(config: AppConfig) { return config.load(); } {provide: APP_INITIALIZER, useFactory: textFunction, deps: [AppConfig], multi: true },

Error: AppInits[i] is not a function

When i convert into an export function compiler error gets disappeared but the app breaks with appInits[i] is not a function. Can you please guide me how to convert appIntializer useFactory to an export method.

psancho commented 7 years ago

I get the same error with angular2-cool-storage Linux x64 npm@3.5.2 typescript@2.1.5 angular-cli@1.0.0-beta.26 angular2-cool-storage@1.2.2 Unfortunately, I see no lambda in imports statement:

import { CoolStorageModule } from 'angular2-cool-storage'; @NgModule({ imports: [CoolStorageModule], }) export class CoreModule {} results in: ERROR in Error encountered resolving symbol values statically. Calling function 'makeDecorator', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function,...

johannawad commented 7 years ago

I have the same issue when creating translation files using ng-xi18n

Error: Error encountered resolving symbol values statically. Calling function 'NoOpAnimationDriver', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol AnimationDriver.NOOP in,..

Klerith commented 7 years ago

Same issue trying to use angular2-jwt (Json web tokens)

import { AUTH_PROVIDERS } from 'angular2-jwt';

image

apapatp commented 7 years ago

Same issue trying to use angular2-social-login

import { Angular2SocialLoginModule } from "angular2-social-login";

@NgModule({ .... Angular2SocialLoginModule.initWithProviders(providers) });

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

cesarvarela commented 7 years ago

what's exactly happening here?

Bretto commented 7 years ago

Ok I am back, now I have the same problem with new version 30 of the CLI

christianacca commented 7 years ago

I have an example repo that show cases the problem.

"Interestingly" the problem just got worse after the upgrade to beta 30 of the cli - the site will no longer serve the bundled JS (see screenshot below).

With earlier version of the cli (1.0.0-beta.24), at least the bundled files would be served and the site would be functional.

To reproduce:

  1. Clone the repo: https://github.com/christianacca/ng2-experiements.git
  2. npm install
  3. npm start
  4. browse to http://localhost:4200/

image

GuillaumeUnice commented 7 years ago

+1

toanxyz commented 7 years ago

Same here too! A problem with angular2-jwt

valorad commented 7 years ago

I'm using @angular/cli beta30, and I have the same issue with ngx-translate. Similar error appears at the first time running ng serve, but compilation is successful after I just press Ctrl + S to a file again without changing anything, even so the translation works fine. Could be a bug of @angular/cli?

Bretto commented 7 years ago

I have the same problem, and when it re-compiles it goes away. How could this issue be closes ?

@NgModule({
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: test2,
      deps: [MainConfigService],
      multi: true
    },
  ],...

export function test2(mainConfigService: MainConfigService) {
  return function test() {
    return mainConfigService.loadConf()
  }
}
xtianus79 commented 7 years ago

This issue should not be closed as the error continues

nikhildev commented 7 years ago

I have the same problem with the FlexLayoutModule. Can't live with it and can't live without it.

jeevanpalakurty commented 7 years ago

Even I am seeing the same error, re compiling the app would make this error disappear.

nikhildev commented 7 years ago

Removing the .forRoot() on FlexLayoutModule fixed the problem

aguarino77 commented 7 years ago

I confirm the same about FlexLayoutModule, remove .forRoot(). Thanks @nikhildev

marioleed commented 7 years ago

More regarding this: https://github.com/angular/angular-cli/issues/3674#issuecomment-279977533

robertohuertasm commented 7 years ago

@christianacca I've tried your app and I found something curious. Once you execute ng serve compilation it will fail, but if you do ctrol+s in any of your files, recompilation will trigger again and, boom, it will work. Why is this happening?? Honestly, I don't have any clue yet. We'll have to dig into it.

christianacca commented 7 years ago

It is strange agreed!

@wcxaaa commented above - he is getting the same problem. See: https://github.com/angular/angular-cli/issues/3707#issuecomment-279194758)

christianacca commented 7 years ago

@robertohuertasm, good luck btw with your digging :-)

robertohuertasm commented 7 years ago

@christianacca you're right. I totally missed @wcxaaa's post! Sorry for the redundancy!

marciojustino commented 7 years ago

I've update @angular/cli to last version (actual in beta.32) and @angular/** (common, compiler, core, forms, http, ...) to last version (actual 2.4.8) and resolve this issue.

valorad commented 7 years ago

This issue reappeared in version rc0. In a completely new project.

ERROR in Error encountered resolving symbol values statically. Calling function 'makeDecorator', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol NgModule in E:/DocCenter/va_WorkStation_Benben/vaSites/upgrade-project/node_modules/@angular/platform-browser/node_modules/@angular/core/src/metadata/ng_module.d.ts, resolving symbol NgModule in E:/DocCenter/va_WorkStation_Benben/vaSites/upgrade-project/node_modules/@angular/platform-brows er/node_modules/@angular/core/src/metadata.d.ts, resolving symbol NgModule in E:/DocCenter/va_WorkStation_Benben/vaSites/upgrade-project/node_modules/@angular/platform-browse r/node_modules/@angular/core/src/core.d.ts, resolving symbol NgModule in E:/DocCenter/va_WorkStation_Benben/vaSites/upgrade-project/node_modules/@angular/platform-browser/node_modules/@angular/core/index.d.ts, resolving symbol BrowserModule in E:/DocCenter/va_W orkStation_Benben/vaSites/upgrade-project/node_modules/@angular/platform-browser/src/browser.d.ts, resolving symbol BrowserModule in E:/DocCenter/va_WorkStation_Benben/vaSites/upgrade-project/node_modules/@angular/platform-browser/src/browser.d.ts

0x1ad2 commented 7 years ago

@wcxaaa I'm also using RC0, same error.

Error encountered resolving symbol values statically. Calling function 'makeDecorator', function calls are not supported.

@angular/cli: 1.0.0-rc.0 node: 6.9.1 os: darwin x64 @angular/animations: 4.0.0-rc.1 @angular/cli: 1.0.0-rc.0 @angular/common: 4.0.0-rc.1 @angular/compiler: 4.0.0-rc.1 @angular/compiler-cli: 4.0.0-rc.1 @angular/core: 4.0.0-rc.1 @angular/forms: 4.0.0-rc.1 @angular/http: 4.0.0-rc.1 @angular/material: 2.0.0-beta.2 @angular/platform-browser: 4.0.0-rc.1 @angular/platform-browser-dynamic: 4.0.0-rc.1 @angular/platform-server: 4.0.0-rc.1 @angular/router: 4.0.0-rc.1


If I remove the --aot flag from my build process it works.

plastikaweb commented 7 years ago

Changing function reducer as the message suggests works for me, though it's a weird error:

It was not working: export const SearchResultReducer = (state: SearchResultState = INITIAL_SEARCH_RESULT_STATE, action: Action): SearchResultState => { ...};

This is working: export function SearchResultReducer(state = INITIAL_SEARCH_RESULT_STATE, action: Action): SearchResultState { ... }

MFProduction commented 7 years ago

+1 form me on JWT AUTH

kerwin612 commented 7 years ago

@wcxaaa @0x1ad2 I'm also using RC0, same error.

metodribic commented 7 years ago

This error is super strange. I have error upon ng serve in app.module.ts and after I make minor change (e.g. add whitespace or new line) compiler compiles the code successfully. Even if I revert the change the error is still gone...

version: 1.0.0-rc.1

jmcmichael commented 7 years ago

I'm getting this error with ngrx's combineReducers function. An initial compile throws 'Error encountered resolving symbol values statically. Calling function 'combineReducers', function calls are not supported.'

Prompting a recompile by updating a watched .ts file fires off a build that then succeeds w/o error.

jcroll commented 7 years ago

@jmcmichael I dealt with basically the same thing yesterday and was able to resolve it, see my comment here: https://github.com/ngrx/store/issues/348#issuecomment-285496328

In short, I created a service that adds the reducers to the store after the module compiles.

jmcmichael commented 7 years ago

@jcroll thanks very much!

I just now returned to note that I solved the issue using a different approach mentioned in this ngrx issue here and implemented in the ngrx/store example app index.ts here.

I'm still wrapping my head around ng2, ngrx/store and TypeScript, so I'm not quite sure if these approaches do basically the same thing. At a first glance, the example-app solution looks like the simpler one, as it just returns a function (which was what the error message I received was complaining about) instead of creating a new injectable service.

strake7 commented 7 years ago

We get the same error when serving; As @metodribic described we leave the process running but insert a blank line into app.module.ts to notify webpack to recompile. This results in success and the application is runs and compiles fine from that point. SO v 1.0.0-rc1

ERROR in Error encountered resolving symbol values statically. Calling function '
makeDecorator', function calls are not supported. Consider replacing the function
 or lambda with a reference to an exported function, resolving symbol NgModule in
 C:/workspace/ng2/npm-module-test/consumer-app/node_modules/@company/lib-app/node
_modules/@angular/core/src/metadata/ng_module.d.ts, resolving symbol NgModule in
C:/workspace/ng2/npm-module-test/consumer-app/node_modules/@company/lib-app/node_
modules/@angular/core/src/metadata.d.ts, resolving symbol NgModule in C:/workspac
e/ng2/npm-module-test/consumer-app/node_modules/@company/lib-app/node_modules/@an
gular/core/src/core.d.ts, resolving symbol NgModule in C:/workspace/ng2/npm-modul
e-test/consumer-app/node_modules/@company/lib-app/node_modules/@angular/core/inde
x.d.ts, resolving symbol SharedLibraryModule in C:/workspace/ng2/npm-module-test/
consumer-app/node_modules/@company/lib-app/src/app/shared-library/shared-library.
module.ts, resolving symbol SharedLibraryModule in C:/workspace/ng2/npm-module-te
st/consumer-app/node_modules/@company/lib-app/src/app/shared-library/shared-libra
ry.module.ts