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

How to integrate with angular CLI build tool #47

Closed
shijumon opened this issue Jul 21, 2016 · 4 comments
Closed

How to integrate with angular CLI build tool #47

shijumon opened this issue Jul 21, 2016 · 4 comments
Assignees
Labels

Comments

@shijumon
Copy link

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
Copy link
Contributor

dxbykov commented Jul 21, 2016

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>

@dxbykov dxbykov self-assigned this Jul 21, 2016
@shijumon
Copy link
Author

shijumon commented Jul 21, 2016

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
Copy link
Contributor

dxbykov commented Jul 22, 2016

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
Copy link
Contributor

dxbykov commented Nov 30, 2016

Follow these steps:

  1. Install the devextreme-angular npm package:
npm install --save devextreme-angular
  1. 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 { } 
  1. 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 dxbykov closed this as completed Nov 30, 2016
marcwittke pushed a commit to marcwittke/devextreme-angular that referenced this issue Jan 28, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants