angular / angular-cli

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

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 closed 7 years ago

DeekshaPandit commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

Hey @clydin,

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

DeekshaPandit commented 7 years ago

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 commented 7 years ago

@hansl Can you please suggest anything?

catull commented 7 years ago

@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.

valkanov commented 7 years ago

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

evgeny-o commented 7 years ago

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

itslenny commented 7 years ago

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

chayankiit commented 7 years ago

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 commented 5 years ago

still getting the error.

angular-automatic-lock-bot[bot] commented 5 years ago

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.