Skip to content
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

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 #4122

Closed
DeekshaPandit opened this issue Jan 19, 2017 · 12 comments

Comments

@DeekshaPandit
Copy link

DeekshaPandit commented Jan 19, 2017

OS?

Ubuntu

Versions.

node version: 6.9.2
npm version: 3.10.8
angular-cli: 1.0.0-beta.25.

Repro steps.

I am getting following error when building my project.

"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, resolving symbol AppModule in /../../../../src/app/app.module.ts, resolving symbol AppModule in /../../../../src/app/app.module.ts".

{ "name": "od-cli", "version": "0.0.0", "license": "MIT", "angular-cli": {}, "scripts": { "ng": "ng", "start": "ng serve", "lint": "tslint \"src/**/*.ts\" --project src/tsconfig.json --type-check && tslint \"e2e/**/*.ts\" --project e2e/tsconfig.json --type-check", "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/forms": "2.3.1", "@angular/http": "2.3.1", "@angular/platform-browser": "2.3.1", "@angular/platform-browser-dynamic": "2.3.1", "@angular/router": "3.3.1", "aws-sdk": "2.6.6", "bootstrap": "3.3.7", "core-js": "2.4.1", "linq-es2015": "2.4.13", "ng2-auto-complete": "0.8.2", "ng2-bootstrap": "1.1.14", "ng2-bs3-modal": "0.10.4", "ng2-ckeditor": "1.1.5", "ng2-completer": "0.4.0", "ng2-img-cropper": "0.7.6", "ng2-meta": "2.0.3", "ng2-sharebuttons": "1.1.1", "ng2-toasty": "2.1.0", "ng2-ui-auth": "4.1.0", "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.25.5", "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.3.0", "typescript": "2.0.3" } }

and app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from "@angular/forms";
import { HttpModule } from "@angular/http";
import { MetaModule, MetaService } from 'ng2-meta';
import { AppRoutes } from "./routes/app.route";
import { MyAuthConfig, metaConfig } from './config';
import { CKEditorModule } from 'ng2-ckeditor';
import { Ng2BootstrapModule } from 'ng2-bootstrap';
import { Ng2UiAuthModule } from 'ng2-ui-auth'
import { Ng2Bs3ModalModule, ModalComponent } from 'ng2-bs3-modal/ng2-bs3-modal';
import { ImageCropperComponent, CropperSettings, Bounds } from 'ng2-img-cropper';
import { ToastyModule } from 'ng2-toasty';
import { asEnumerable } from 'linq-es2015';
import { ShareButtonsModule } from 'ng2-sharebuttons';
import { Ng2AutoCompleteModule } from 'ng2-auto-complete';
import { Ng2CompleterModule } from "ng2-completer";

import { AppComponent } from './app.component';

@NgModule({
imports: [
BrowserModule,
FormsModule,
HttpModule,
AppRoutes,

    Ng2AutoCompleteModule,
    Ng2CompleterModule,
    CKEditorModule,
    ShareButtonsModule,
    Ng2BootstrapModule,
    Ng2Bs3ModalModule,
    Ng2UiAuthModule.getWithConfig(MyAuthConfig),
    ToastyModule.forRoot(),
    MetaModule.forRoot(metaConfig),

],

declarations: [
    AppComponent,
    UserHomeComponent,    
],

bootstrap: [AppComponent],
providers: [SharedService, ToastService, MetaService, SocketService, HeaderService]
})
export class AppModule { }`


```Can Anyone tell what is wrong in app.module.ts?
Attached screenshot of error
![build error](https://cloud.githubusercontent.com/assets/24922710/22122794/50c43238-deaf-11e6-8dcc-689965983a5a.png)

### The log given by the failure.
> Normally this include a stack trace and some more information.


### Mention any other details that might be useful.

> ---------------------------------------------------------------
> Thanks! We'll be in touch soon.
@killrazor
Copy link
Contributor

Formatting to be helpful but I think they are going to tell you to take your question over to stackoverflow.

{
   "name":"od-cli",
   "version":"0.0.0",
   "license":"MIT",
   "angular-cli":{

   },
   "scripts":{
      "ng":"ng",
      "start":"ng serve",
      "lint":"tslint \"src/**/*.ts\" --project src/tsconfig.json --type-check && tslint \"e2e/**/*.ts\" --project e2e/tsconfig.json --type-check",
      "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/forms":"2.3.1",
      "@angular/http":"2.3.1",
      "@angular/platform-browser":"2.3.1",
      "@angular/platform-browser-dynamic":"2.3.1",
      "@angular/router":"3.3.1",
      "aws-sdk":"2.6.6",
      "bootstrap":"3.3.7",
      "core-js":"2.4.1",
      "linq-es2015":"2.4.13",
      "ng2-auto-complete":"0.8.2",
      "ng2-bootstrap":"1.1.14",
      "ng2-bs3-modal":"0.10.4",
      "ng2-ckeditor":"1.1.5",
      "ng2-completer":"0.4.0",
      "ng2-img-cropper":"0.7.6",
      "ng2-meta":"2.0.3",
      "ng2-sharebuttons":"1.1.1",
      "ng2-toasty":"2.1.0",
      "ng2-ui-auth":"4.1.0",
      "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.25.5",
      "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.3.0",
      "typescript":"2.0.3"
   }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from "@angular/forms";
import { HttpModule } from "@angular/http";
import { MetaModule, MetaService } from 'ng2-meta';
import { AppRoutes } from "./routes/app.route";
import { MyAuthConfig, metaConfig } from './config';
import { CKEditorModule } from 'ng2-ckeditor';
import { Ng2BootstrapModule } from 'ng2-bootstrap';
import { Ng2UiAuthModule } from 'ng2-ui-auth'
import { Ng2Bs3ModalModule, ModalComponent } from 'ng2-bs3-modal/ng2-bs3-modal';
import { ImageCropperComponent, CropperSettings, Bounds } from 'ng2-img-cropper';
import { ToastyModule } from 'ng2-toasty';
import { asEnumerable } from 'linq-es2015';
import { ShareButtonsModule } from 'ng2-sharebuttons';
import { Ng2AutoCompleteModule } from 'ng2-auto-complete';
import { Ng2CompleterModule } from "ng2-completer";

import { AppComponent } from './app.component';

@NgModule({
   imports: [
     BrowserModule,
     FormsModule,
     HttpModule,
     AppRoutes,
     Ng2AutoCompleteModule,
     Ng2CompleterModule,
     CKEditorModule,
     ShareButtonsModule,
     Ng2BootstrapModule,
     Ng2Bs3ModalModule,
     Ng2UiAuthModule.getWithConfig(MyAuthConfig),
     ToastyModule.forRoot(),
     MetaModule.forRoot(metaConfig),
   ],
   declarations: [
     AppComponent,
     UserHomeComponent,    
   ],
   bootstrap: [AppComponent],
   providers: [SharedService, ToastService, MetaService, SocketService, HeaderService]
})
export class AppModule { }

@clydin
Copy link
Member

clydin commented Jan 19, 2017

One of your imported NgModules is not statically analyzable. I would check that each library used is AOT compatible.

You could also remove them one by one to narrow down the offender(s).

@DeekshaPandit
Copy link
Author

Hey @clydin,

Thanks for checking this. We will try to narrow down it and check here where is the problem.

@DeekshaPandit
Copy link
Author

Hey @clydin ,

Your suggestion helped a lot to figure out offender module. We used some third party modules which broke our application.

Here is the list:

Ng2AutoCompleteModule
ShareButtonsModule
Ng2UiAuthModule
ToastyModule
MetaModule

After removing these modules from AppModule. We were able to build using ng build command

Here is the result

ngbuild

I think I need to report issues in the repositories of these module.

@DeekshaPandit
Copy link
Author

@hansl Can you please suggest anything?

@catull
Copy link
Contributor

catull commented Jan 23, 2017

@DeekshaPandit

The errors were highlighted in red in your console; which mean you have to trim your module definition down to the following:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { MetaService } from 'ng2-meta';
import { CKEditorModule } from 'ng2-ckeditor';
import { Ng2BootstrapModule } from 'ng2-bootstrap';
import { Ng2Bs3ModalModule } from 'ng2-bs3-modal/ng2-bs3-modal';
import { ToastyModule } from 'ng2-toasty';
import { ShareButtonsModule } from 'ng2-sharebuttons';
import { Ng2AutoCompleteModule } from 'ng2-auto-complete';
import { Ng2CompleterModule } from 'ng2-completer';

import { AppComponent } from './app.component';

@NgModule({
   imports: [
     BrowserModule,
     CKEditorModule,
     FormsModule,
     HttpModule,
     Ng2AutoCompleteModule,
     Ng2BootstrapModule,
     Ng2Bs3ModalModule,
     Ng2CompleterModule,
     ShareButtonsModule,
     ToastyModule.forRoot(),
   ],
   declarations: [
     AppComponent,
   ],
   bootstrap: [AppComponent],
   providers: [MetaService]
})
export class AppModule {
}

This code builds:

➜  initial2 git:(master) ✗ ng build
Hash: e972711a2b50fad12978
Time: 14154ms
chunk    {0} main.bundle.js, main.bundle.map (main) 7.2 kB {2} [initial] [rendered]
chunk    {1} styles.bundle.css, styles.bundle.map, styles.bundle.map (styles) 1.77 kB {3} [initial] [rendered]
chunk    {2} vendor.bundle.js, vendor.bundle.map (vendor) 4.08 MB [initial] [rendered]
chunk    {3} inline.bundle.js, inline.bundle.map (inline) 0 bytes [entry] [rendered]
➜  initial2 git:(master) ✗

Now, this is not an angular CLI issue.
You have been able to create your app with the tool.

Now, go on, complete the app and impress your customers.

@hansl hansl closed this as completed Jan 23, 2017
@valkanov
Copy link

valkanov commented Mar 7, 2017

ng build --prod --aot false fixed the issue for me.

@evgeny-o
Copy link

ng build --prod --aot false
In my case this helped too. Thank a lot, Deyan.

@itslenny
Copy link
Contributor

Disabling AOT is not a fix, but a good, hopefully temporary, mitigation.

@chayankiit
Copy link

how to fix

ERROR in Error encountered resolving symbol values statically. Calling function 'MetaModule', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol AppModule in /home/chayan/MyWorkspace/Angular2Workspace/knowledgelab/src/app/app.module.ts, resolving symbol AppModule in /home/chayan/MyWorkspace/Angular2Workspace/knowledgelab/src/app/app.module.ts
webpack: Failed to compile.

app.module.ts file

import { MetaConfig, MetaModule, MetaService } from 'ng2-meta/dist';
import { WorkWithUsComponent } from './templates/workWithUs/workWithUs.component';
import { SocialnetworksComponent } from './templates/socialnetworks/socialnetworks.component';
import { AboutUsComponent } from './templates/aboutUs/aboutUs.component';
import { ShortbannerComponent } from './templates/shortbanner/shortbanner.component';
import { NewsletterComponent } from './templates/newsletter/newsletter.component';
import { ClientsComponent } from './templates/clients/clients.component';
import { TestimonialsComponent } from './templates/testimonials/testimonials.component';
import { BlogComponent } from './templates/blog/blog.component';
import { PricingComponent } from './templates/pricing/pricing.component';
import { CampusComponent } from './templates/campus/campus.component';
import { EventComponent } from './templates/event/event.component';
import { RegisterComponent } from './templates/register/register.component';
import { CommitmentComponent } from './templates/commitment/commitment.component';
import { CoursesComponent } from './templates/courses/courses.component';
import { FooterComponent } from './templates/footer/footer.component';
import { BannerComponent } from './templates/banner/banner.component';
import { Routing } from './app.routes';
import { HomeComponent } from './templates/home/home.component';
import { HeaderComponent } from './templates/header/header.component';
import { BrowserModule, Title } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';

const metaConfig: MetaConfig = {
useTitleSuffix: true,
defaults: {
title: 'Default title for pages without meta in their route',
titleSuffix: ' | Site Name',
'og:image': 'http://example.com/default-image.png',
'any other': 'arbitrary tag can be used'
}
};

@NgModule({
declarations: [
AppComponent,
HeaderComponent,
HomeComponent,
BannerComponent,
FooterComponent,
CoursesComponent,
CommitmentComponent,
RegisterComponent,
EventComponent,
CampusComponent,
PricingComponent,
BlogComponent,
TestimonialsComponent,
ClientsComponent,
NewsletterComponent,
ShortbannerComponent,
AboutUsComponent,
SocialnetworksComponent,
WorkWithUsComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
Routing,
MetaModule.forRoot(metaConfig)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

@LeenuV
Copy link

LeenuV commented Jan 23, 2019

still getting the error.

@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

10 participants