We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Building prod Angular project with syncfusion

Thread ID:

Created:

Updated:

Platform:

Replies:

131441 Jul 10,2017 09:44 AM UTC Jul 19,2017 09:47 AM UTC Angular 13
loading
Tags: ejDiagram
Robert Williamson
Asked On July 10, 2017 09:44 AM UTC

Hi guys, 

I've been attempting build--prods with my project and noticed that it keeps getting FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory errors whenever i try. 

I noticed the updated guide had new documentation about this so i updated the files as stated and still got the same error. I've gone to an extreme now and put this up to a ridiculous amount but still get the error





i did a bit of research and noticed that it was included in the 15.2.43 version which i seem to have according to my package.json. 



Any ideas as to why this would still be occuring? 

Thanks
Robert



Abinaya Subbiah [Syncfusion]
Replied On July 10, 2017 12:28 PM UTC

Hi Robert Williamson, 

Thanks for contacting Syncfusion support. 

We are unable to reproduce the issue “JavaScript heap out of memory”. We have prepared sample using angular-cli.  Refer to the below attached sample and run the below command to get production build.  

ng build --prod 


We suspect that, issue JavaScript heap out of memory may occur,  increasing of bundle size while building application in production mode. So if you are using more number of Angular modules, we suggest you to eject your application’s webpack configuration using below command and split up the entry modules in configuration. 

ng eject 


Refer to the below code snippet. 

const fs = require('fs'); 
const path = require('path'); 
const ProgressPlugin = require('webpack/lib/ProgressPlugin'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 
. . . . .  
        // safe settings based on: https://github.com/ben-eb/cssnano/issues/358#issuecomment-283696193 
        const importantCommentRe = /@preserve|@license|[@#]\s*source(?:Mapping)?URL|^!/i; 
        const minimizeOptions = { 
            autoprefixer: false, 
            safe: true, 
            mergeLonghand: false, 
            discardComments: { remove: (comment) => !importantCommentRe.test(comment) } 
        }; 
        return [ 
            postcssUrl({ 
                . . . . 
module.exports = { 
  . . . . 
  }, 
  "entry": { 
    "main": [ 
      "./src\\app\\module2.ts", 
      "./src\\app\\module1.ts", 
      "./src\\app\\app.module.ts", 
      "./src\\main.ts" 
    ], 
    "polyfills": [ 
      "./src\\polyfills.ts" 
    ], 
    "styles": [ 
      "./src\\styles.css", 
      "./node_modules\\syncfusion-javascript\\Content\\ej\\web\\material\\ej.web.all.min.css" 
    ] 
  }, 
  "output": { 
    "path": path.join(process.cwd(), "dist"), 
    "filename": "[name].bundle.js", 
    "chunkFilename": "[id].chunk.js" 
  },  
 

 Run below command to get production build with webpack configuration.  

npm run build -e –prod 

If you are still facing the issues please share more information about sample or share the simple sample to reproduce the issue.  

Please let us know if you need further assistance on this, we are always happy to help you. 

Regards, 
Abinaya S  


Robert Williamson
Replied On July 10, 2017 01:08 PM UTC

Hi Abinaya


Thanks for this, running the eject and then build seems to have worked, my only concern is that i'm getting warnings like this 


WARNING in ./~/ej-angular2/src/ej/diagram.component.js

Cannot find source file '../../ej/diagram.component.ts': Error: Can't resolve '../../ej/diagram.component.ts' in 'C:\TFS\KTA\Main\Agility\Code

\Client\Angular\Designer\node_modules\ej-angular2\src\ej'

 @ ./~/ej-angular2/src/index.js 10:26-59 82:9-42

 @ ./src/agility/processes/process-designer/process-designer.module.ts

 @ ./src async

 @ ./~/@angular/core/@angular/core.es5.js

 @ ./src/main.ts

 @ multi ./src/main.ts


There's quite a number of them and it's all around the components in the ej-angular2. 

Is this something to be concerned about? will the components still work if we go to run out solution when installed?


Thanks

Robert


Abinaya Subbiah [Syncfusion]
Replied On July 12, 2017 10:14 AM UTC

Hi Robert Williamson, 

We have analyzed about the compilation warning, which occurred due to exclusion of node_modules folder in webpack.config.js file. So we suggest you to change moduleà rules section of the webpack configuration as like below code snippet. 
 
[webpack.config.js] 
module.exports = { 
  "resolve": { 
    "extensions": [ 
      ".ts", 
      ".js" 
    ], 
    "modules": [ 
      "./node_modules", 
      "./node_modules" 
    ], 
    "symlinks": true 
  }, 
  "resolveLoader": { 
    "modules": [ 
      "./node_modules", 
      "./node_modules" 
    ] 
  }, 
  "entry": { 
    "main": [ 
      "./src\\app\\app.module.ts", 
      "./src\\main.ts" 
    ], 
    "polyfills": [ 
      "./src\\polyfills.ts" 
    ], 
    "styles": [ 
      "./src\\styles.css", 
      "./node_modules\\syncfusion-javascript\\Content\\ej\\web\\material\\ej.web.all.min.css" 
    ] 
  }, 
  "output": { 
    "path": path.join(process.cwd(), "dist"), 
    "filename": "[name].bundle.js", 
    "chunkFilename": "[id].chunk.js" 
  }, 
  "module": { 
    "rules": [ 
      { 
        "enforce": "pre", 
        "test": /\.js$/, 
        "loader": "source-map-loader", 
        "exclude": [ 
          /\\node_modules\\/ 
        ] 
      }, 
      { 
        "test": /\.json$/, 
        "loader": "json-loader" 
      }, 
      { 
        "test": /\.html$/, 
        "loader": "raw-loader" 
      }, 
      { 
        "test": /\.(eot|svg)$/, 
        "loader": "file-loader?name=[name].[hash:20].[ext]" 
      }, 
      { 
        "test": /\.(jpg|png|webp|gif|otf|ttf|woff|woff2|cur|ani)$/, 
        "loader": "url-loader?name=[name].[hash:20].[ext]&limit=10000" 
      }, 
      { 
        "exclude": [ 
          path.join(process.cwd(), "src\\styles.css"), 
          path.join(process.cwd(), "node_modules\\syncfusion-javascript\\Content\\ej\\web\\material\\ej.web.all.min.css") 
        ], 
        "test": /\.css$/, 
        "use": [ 
          "exports-loader?module.exports.toString()", 
          { 
            "loader": "css-loader", 
            "options": { 
              "sourceMap": false, 
              "importLoaders": 1 
            } 
          }, 
          { 
            "loader": "postcss-loader", 
            "options": { 
              "ident": "postcss", 
              "plugins": postcssPlugins 
            } 
          } 
        ] 
      }, 


Refer to the below link to know more about issue. 


Please let us know if you need further assist on this. 

Regards, 
Abinaya S 


Robert Williamson
Replied On July 13, 2017 10:48 AM UTC

Hi Abinaya


Replying from a new account (company account) just talked with architecture and the ng eject isn't a viable option for us with our project. 

We've noticed that the problem is around the fact that we are importing all components through the EJAngular2Module.forRoot(), is there any way we can only import the components that we are using in that module? 


Thanks

Robert


Abinaya Subbiah [Syncfusion]
Replied On July 14, 2017 06:15 AM UTC

Hi Robert Williamson, 

Thanks for your update. 

Yes, we can import required Syncfusion Angular component from ej-angular2 package. Refer to the below code snippet. 

import { NgModule, enableProdMode, ErrorHandler } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
. . .. .  
 
import { EJ_GRID_COMPONENTS } from 'ej-angular2'; 
 
import { AppComponent } from './app.component'; 
import { HomeComponent } from './home/home.component'; 
import { GridComponent } from './grid/grid.component'; 
 
import { rootRouterConfig } from './app.routes'; 
 
@NgModule({ 
  imports: [ 
    BrowserModule, FormsModule, HttpModule, RouterModule.forRoot(rootRouterConfig, { useHash: true }) 
  ], 
  declarations: [ 
    AppComponent, HomeComponent, GridComponent, EJ_GRID_COMPONENTS 
  ], 
  bootstrap: [AppComponent] 
}) 
export class AppModule { } 

Please let us know if you need further assist on this. 

Regards, 
Abinaya S 


Robert Williamson
Replied On July 14, 2017 07:20 AM UTC

Hi Abinaya, 

Unfortunately we've tried this already, this will work for a normal build but for a production build it will fall over because the component has been declared twice, once in our component and then once in the EJAngular2Module that is exported from the ej-angular2 node module


Thanks

Robert


Abinaya Subbiah [Syncfusion]
Replied On July 14, 2017 09:59 AM UTC

Hi Robert Williamson, 

Sorry for the inconvenience caused. 

Import required Angular components from ej-angular2 package as like below. Refer to the below code snippet. 

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
 
import { AppComponent } from './app.component'; 
 
import { EJ_GRID_COMPONENTS } from 'ej-angular2/src/ej/grid.component'; 
 
@NgModule({ 
  declarations: [ 
    AppComponent, EJ_GRID_COMPONENTS 
  ], 
  imports: [ 
    BrowserModule 
  ], 
  providers: [], 
  bootstrap: [AppComponent] 
}) 
export class AppModule { } 

For your convenience we have prepared sample to import required Angular component. Refer below link for sample. 


If you are still facing issues, we request you to share a sample or configuration files, which helps us to provide you prompt solution at the earliest. 

Please let us know if you need further assist on this. 

Regards, 
Abinaya S 


Robert Williamson
Replied On July 14, 2017 11:15 AM UTC

Hi Abinaya, 

Thanks again for you reply, the last approach fits our purposes perfectly it seems. 


Thanks for your time and effect.

Robert


Abinaya Subbiah [Syncfusion]
Replied On July 17, 2017 04:52 AM UTC

Hi Robert Williamson, 

We happy to hear that the issue has been resolved.  

Regards, 
Abinaya S  


Robert Williamson
Replied On July 17, 2017 08:12 AM UTC

Hi Abinaya


I've just tested the prod build of the solution and notice now that when i attempt to browse a page it won't load and i get the following reference error

                    ReferenceError: ej is not defined

This doesnt occuring when testing a regular non prod build. 


Thanks

Robert



Abinaya Subbiah [Syncfusion]
Replied On July 18, 2017 05:30 AM UTC

Hi Robert Williamson, 

We are unable to reproduce the issue  at our end with the provided information. For your convenience we have prepared sample and attached below. 


Follow below steps to get and launch production build. 

  • Run the below command to generate production build.

ng build --prod 


  • We can use http-server to serve the production build dist folder. Use below command to install http-server.

npm install http-server -g 


  • Run the below command to server the application’s production build.

http-server ./dist 


If you are still facing the issue we request you to share the attached sample with issue reproducible. 

Regards, 
Abinaya S 


Robert Williamson
Replied On July 18, 2017 01:50 PM UTC

Hi Abinaya

We've done a bit of investigating and determined that this is due to the way we are have been told to implement the user handles for the diagram,

We've going to go back to this thread to get it resolved but incase you are curious here is a link to an edit of your sample project with the diagram and user handles plugged in. please download the zip named SampleWithDiagramUserHandles

https://1drv.ms/u/s!AAxIdbDPqmRThVk


Thanks

Robert


Shyam G [Syncfusion]
Replied On July 19, 2017 09:47 AM UTC

Hi Robert, 
 
In the app.module.ts file, you have imported the app.component file before the EJ_DIAGRAM_COMPONENTS file. So only the reported issue occurs. Please import app.component file next to EJ_DIAGRAM_COMPONENTS file to resolve your issue. Please refer to the code example and modified app.module.ts file below. 
 
Code example: 
 
import { EJ_DIAGRAM_COMPONENTS } from 'ej-angular2'; 
import { AppComponent } from './app.component'; 
 
 
Regards, 
Shyam G 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;