How to integrate with angular CLI build tool #47

shijumon · 2016-07-21T07:04:17Z

Hi,

I would like to know how to integrate devExtreme-angular2 library with angular CLI build tool.
How to configure 'evextreme-angular2' for the following files in angular CII
system-config.ts
angular-cli-build.js
index.html

dxbykov · 2016-07-21T14:13:30Z

Hi,

The following configuration works on my side:

in system-config.ts

const barrels: string[] = [
  // Angular specific barrels.
  '@angular/core',
  '@angular/common',
  '@angular/compiler',
  '@angular/forms',
  '@angular/http',
  '@angular/router',
  '@angular/platform-browser',
  '@angular/platform-browser-dynamic',

  // Thirdparty barrels.
  'rxjs',
  'devextreme-angular2', //<=== add this ===

  // App specific barrels.
  'app',
  'app/shared',
  /** @cli-barrel */
];

System.config({
  map: {
    '@angular': 'vendor/@angular',
    'rxjs': 'vendor/rxjs',
    'devextreme-angular2': 'vendor/devextreme-angular2', //<=== add this ===
    'main': 'main.js'
  },
  packages: cliSystemConfigPackages
});

in angular-cli-build.js

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      'systemjs/dist/system-polyfills.js',
      'systemjs/dist/system.src.js',
      'zone.js/dist/**/*.+(js|js.map)',
      'es6-shim/es6-shim.js',
      'reflect-metadata/**/*.+(ts|js|js.map)',
      'rxjs/**/*.+(js|js.map)',
      '@angular/**/*.+(js|js.map)',
       //=== add this === 
      'devextreme-angular2/**/*.+(js|js.map)',
      'devextreme/dist/js/dx.all.js',
      'devextreme/dist/css/**/*.*',
      'jquery/dist/jquery.min.js'    
    ]
  });
};

in index.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>MyProj</title>
  <base href="/">

  {{#unless environment.production}}
  <script src="/ember-cli-live-reload.js" type="text/javascript"></script>
  {{/unless}}
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">

  <link rel="stylesheet" type="text/css" href="vendor/devextreme/dist/css/dx.common.css" />
  <link rel="stylesheet" type="text/css" href="vendor/devextreme/dist/css/dx.light.css" />  
</head>
<body>
  <app-root>Loading...</app-root>

    {{#each scripts.polyfills}}
    <script src="{{.}}"></script>
    {{/each}}

    <script src="vendor/jquery/dist/jquery.min.js"></script>
    <script src="vendor/devextreme/dist/js/dx.all.js"></script>

    <script>
      System.import('system-config.js').then(function () {
        System.import('main');
      }).catch(console.error.bind(console));
    </script>

</body>
</html>

shijumon · 2016-07-21T16:54:00Z

Hi
Why can't we include jquery.min.js and dx.all.js into system-config.js ?
I tried to move jquery.min.js an dx.all.js into system-config.js. But i cannot make it working.
Is there any way to move those into system-config.js?

thanks for your reply
SHIJU

dxbykov · 2016-07-22T12:09:58Z

Hi,

jQuery and DevExtreme are not imported as modules by our Angular 2 components. We are going to fix this in the context of #16. You can move jquery.min.js an dx.all.js references to system-config.js, but in this case, you'll have to manually import them since they are not explicitly imported by any other module. I'm not sure that's what you want.

dxbykov · 2016-11-30T14:57:34Z

Follow these steps:

Install the devextreme-angular npm package:

npm install --save devextreme-angular

Go to src/app/app.module.ts and import the DevExtremeModule module as follows:

...
import { DevExtremeModule } from 'devextreme-angular';

@NgModule({ 
  ...
  imports: [ 
  ...
    DevExtremeModule 
  ], 
  ...
}) 
export class AppModule { }

Go to angular-cli.json and add references to the necessary DevExtreme css files:

{ 
  ... 
  "apps": [ 
    { 
      ... 
      "styles": [ 
        ...
        "../node_modules/devextreme/dist/css/dx.common.css", 
        "../node_modules/devextreme/dist/css/dx.light.css", 
        "styles.css" 
      ], 
      ... 
      } 
    } 
  ], 
... 
}

dxbykov added the question label Jul 21, 2016

dxbykov self-assigned this Jul 21, 2016

This was referenced Aug 23, 2016

ReferenceError: DevExpress is not defined #62

Closed

How to integrate with angular CLI@webpack build tool #66

Closed

Aden-git self-assigned this Oct 21, 2016

dxbykov closed this as completed Nov 30, 2016

marcwittke pushed a commit to marcwittke/devextreme-angular that referenced this issue Jan 28, 2022

Set assetsBasePath (DevExpress#47)

02b2d3d

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to integrate with angular CLI build tool #47

How to integrate with angular CLI build tool #47

shijumon commented Jul 21, 2016

dxbykov commented Jul 21, 2016

shijumon commented Jul 21, 2016 •

edited

Loading

dxbykov commented Jul 22, 2016

dxbykov commented Nov 30, 2016

How to integrate with angular CLI build tool #47

How to integrate with angular CLI build tool #47

Comments

shijumon commented Jul 21, 2016

Hi,

dxbykov commented Jul 21, 2016

shijumon commented Jul 21, 2016 • edited Loading

dxbykov commented Jul 22, 2016

dxbykov commented Nov 30, 2016

shijumon commented Jul 21, 2016 •

edited

Loading