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. Image for the cookie policy date
  1. Home
  2. Forum
  3. Dashboard Platform
  4. Angular Documentation

Angular Documentation

I was wondering if the documentation found here has been looked at in a while:


We are running Angular 7+ and this particular app already runs the v1 Syncfusion components.

These directions are very hard to follow and it feels like there are missing pieces because I can't get it to work. I have a Dashboard component created that imports Easing, the web.all.min, and the dashboardViewer:

import 'app/ej-dashboard/jquery.easing.min.js';
import 'syncfusion-javascript/Scripts/ej/web/ej.web.all.min';
import 'app/ej-dashboard/ej.dashboardViewer.all.min.js';

These import links work for me but as soon as I serve, I immediately get an "Out of Memory" error and the server crashes. This seems to be due to the ej.web.all.min file.

I am also declaring the components in my app module. APP_COMPONENTS is spread in the app.module declarations section. Note that I am using the spread operator on EJ_DASHBOARDVIEWER_COMPONENTS because that is missing in the docs. Without it, the final array would look like [AppComponent, [SYNC_COMPONENTS]]:

import { EJ_DASHBOARDVIEWER_COMPONENTS } from '../ej-dashboard/web.all';

export const APP_COMPONENTS = [
...components,
...EJ_DASHBOARDVIEWER_COMPONENTS,
];

Are there new steps to get this working in Angular or can someone please re-visit them?

7 Replies
RN Renuka N Syncfusion Team June 6, 2019 11:17 AM UTC

Hi Austin, 
 
Thanks for contacting Syncfusion support.  
 
Please find the response for the queries below   
 
Queries   
Response  
I was wondering if the documentation found here has been looked at in a while:  
  
  
We are running Angular 7+ and this particular app already runs the v1 Syncfusion components.  
  
These directions are very hard to follow and it feels like there are missing pieces because I can't get it to work. I have a Dashboard component created that imports Easing, the web.all.min, and the dashboardViewer:  
  
import 'app/ej-dashboard/jquery.easing.min.js';  
import 'syncfusion-javascript/Scripts/ej/web/ej.web.all.min';  
import 'app/ej-dashboard/ej.dashboardViewer.all.min.js';  
For creating Angular 7 sample, the structure will differ with documentation when latest version arrives. For generic solution to create Angular sample, we have planned to add a KB to embed the Dashboard in the Angular 7 application without using web pack. It will be published by 10th June 2019. We have embedded the Dashboard in the Angular 7 sample without using the webpack. Please find the sample in the below link for your reference.  
 
These import links work for me but as soon as I serve, I immediately get an "Out of Memory" error and the server crashes. This seems to be due to the ej.web.all.min file.  
We have ensured that the Dashboard is rendering fine in the Angular 7 sample without any memory issue. Please refer the attached sample. If you still face the issue please share the sample you have created to investigate the issue.   
I am also declaring the components in my app module. APP_COMPONENTS is spread in the app.module declarations section. Note that I am using the spread operator on EJ_DASHBOARDVIEWER_COMPONENTS because that is missing in the docs. Without it, the final array would look like [AppComponent, [SYNC_COMPONENTS]]:  
  
import { EJ_DASHBOARDVIEWER_COMPONENTS }from '../ej-dashboard/web.all';  
  
export const APP_COMPONENTS = [  
  ...components,  
  ...EJ_DASHBOARDVIEWER_COMPONENTS,  
];  
  
Are there new steps to get this working in Angular or can someone please re-visit them?  
We have ensured the Documentation contains information to import the EJ_DASHBOARDVIEWER_COMPONENTS in the dashboard.module.ts. Please refer the below link   
 
 
As we mentioned, we will publish the Knowledge Base article to embed the Dashboard in the Angular 7 application without using web pack by 10th June 2019. However you can refer the attached Angular 7 Sample to resolve the issue.   


Please let us know, if you need further assistance on this. 

Regards  
Renuka N. 


AU austinthedeveloper June 7, 2019 01:23 AM UTC

This example does not help me. I understand that it can be served and built (The simple example takes over 6 minutes when building in prod mode) but it cannot be brought into another application without crashing. The only solution I've seen so far is to run the Dashboard as a separate application rather than integrate it into our current one.

I copy/pasted the Dashboard module from the example into my current application ("syncfusion-javascript": "^16.4.46") and changed the import statements to match the paths on my application. As soon as I tried serving the app, the memory leak happened and crashed the server.

The problem is obvious when eliminating imports one-by-one:

import 'syncfusion-javascript/Scripts/ej/web/ej.web.all.min';

Why is this entire file injected into a single component? Is there not a better way? I've tried importing it in the scripts array on angular.json but the file imported after it (ej.dashboardViewer.all.min.js) seems to heavily rely on ej.web.all.

RN Renuka N Syncfusion Team June 7, 2019 09:48 AM UTC

Hi Austin,  
 
Sorry for the inconvenience caused.  
 
Our wrapper for Angular Platform is dependent on the ej files. However to overcome the crashing issue you can add the reference  of ej.core.min.js instead of ej.web.all.min which is available in the below mentioned path  
 
import '../../../node_modules/syncfusion-javascript/Scripts/ej/common/ej.core.min';  
 
Please let us know if you need further assistance on this. We are happy to help you.  
 
Regards,  
Renuka N. 


AU austinthedeveloper June 7, 2019 08:01 PM UTC

I replaced the ej.web.all import line with the ej.core file. I then received about 10 errors structured the same way:

Module not found: Error: Can't resolve './ej.checkbox' in 'APP_PATH/src/Web/UI/src/app/ej-dashboard'

Import lines in the dashboard component:

import 'jsrender';
import 'jquery/dist/jquery.min.js';
import 'app/ej-dashboard/jquery.easing.min.js';
import 'syncfusion-javascript/Scripts/ej/common/ej.core.min.js';
import 'app/ej-dashboard/ej.dashboardViewer.all.min.js';



PS Prince Solomon Bala Subramani Syncfusion Team June 10, 2019 04:29 AM UTC

Hi Austin, 
  
Thanks for the update. 
  
We have confirmed that the issue is appearing only when using the outdated script of our previous release (3.2.0.68). We have already fixed this issue in the latest released Dashboard Platform SDK build(3.2.0.71). To resolve this issue 
update the script files from 3.2.0.71 Version Dashboard Platform SDK build in your sample by following the below UG link 
  
  
Regards 
Prince Solomon 


AU austinthedeveloper June 10, 2019 09:16 PM UTC

This solution worked for me but was not worded the best. 

Any future developers running into this same issue:

dashboard.component.ts

import 'jsrender';
import 'SCRIPT_PATH/customwidgetcore.min.js';
import 'SCRIPT_PATH/ej.dashboardViewer.all.min.js';

jQuery and easing are imported in angular.json rather than in dashboard.component.

A note about the css file: There are multiple relative import links in the css so make sure you catch them all and that they live in the same path. This includes all font imports, images, and the themes folder. If you do not include these extra files, Angular CLI will throw import errors and it will not compile.

Here are some path examples to watch out for:
'../../fonts/roboto-regular.ttf'
'images/white_triangle_arrow.png'
'../common-images/ejicons.eot?#iefix-dzszjm'

RN Renuka N Syncfusion Team June 11, 2019 05:40 AM UTC

Hi Austin,  
 
Thanks for the update. We are glad to know that the issue has been resolved in your end. Please find the response for your suggestion   
 
Suggestion 
Response 
Any future developers running into this same issue:  
  
dashboard.component.ts  
  
import 'jsrender';  
import 'SCRIPT_PATH/customwidgetcore.min.js';  
import 'SCRIPT_PATH/ej.dashboardViewer.all.min.js';  
  
jQuery and easing are imported in angular.json rather than in dashboard.component.ts  
You can refer the jQuery and jQuery.easing in angular.json inside the script module.  
 
However to add the reference of jQuery and jQuery.easing in the dashboard.component.ts file needs the below code snippet in the app.component.ts file  
 
import * as $ from 'jQuery';  
window["$"] = $;  
window["jQuery"] = $;  
  

A note about the css file: There are multiple relative import links in the css so make sure you catch them all and that they live in the same path. This includes all font imports, images, and the themes folder. If you do not include these extra files, Angular CLI will throw import errors and it will not compile.  
  
Here are some path examples to watch out for:  
'../../fonts/roboto-regular.ttf'  
'images/white_triangle_arrow.png'  
'../common-images/ejicons.eot?#iefix-dzszjm'  
You don’t need to import the font and image files separately. In your angular.json, file add the reference of ej.dashboardViewer.all.min.css file alone. In the ej.dashhboardViewer.all.min.css file we have internally imported the fonts,images and themes  
 
"styles": [  
             "src/styles.css",  
"src/themes/default-theme/ej.dashboardViewer.all.min.css"  
            ],  
 
Even after adding the reference of  theej.dashboardViewer.all.min.css file in the angular.json if you face any error in the compiling means share the screenshot of the error to investigate further.  
 
Regards, 
Renuka N. 


Loader.
Up arrow icon