-
Notifications
You must be signed in to change notification settings - Fork 159
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
Comments
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> |
Hi thanks for your reply |
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. |
Follow these steps:
npm install --save devextreme-angular
...
import { DevExtremeModule } from 'devextreme-angular';
@NgModule({
...
imports: [
...
DevExtremeModule
],
...
})
export class AppModule { }
{
...
"apps": [
{
...
"styles": [
...
"../node_modules/devextreme/dist/css/dx.common.css",
"../node_modules/devextreme/dist/css/dx.light.css",
"styles.css"
],
...
}
}
],
...
} |
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
The text was updated successfully, but these errors were encountered: