Skip to content
This repository was archived by the owner on Mar 2, 2026. It is now read-only.

Commit ac72c87

Browse files
ovchinnikovovchinnikov
authored
Angular Package Format (#1006) (#1019)
* Build npm with ng-packgr * Change destination for ng-packagr * Remove unused config * Don't need to check metadata * Take package.json from root folder * Fix tsconfig for src folder * DevExtremeModule is restored * whitelistedNonPeerDependencies prop was added * Update imports in example * Update tsconfig for example * Revert unnecessary changes * Schematics were added into npm package * Remove unused package.json * Fix out of memory on CI * Readme and license were added into npm package * Reduce number of tsconfigs * Karma tests restored * Fix lint * Fix component names generator * Remove unused rules from gitignore * Update component names file * Fix excludedFileNames for names generator * Try to use node 10 * Try to split commands * Remove unused code * Update SystemJS config * Improve SystemJS config for example * Use function instead of variable for Server State * Fix compilation with Angular 7 * Fix lint * Compile package with Angular 7 * Fix SystemJS config for example * Fix after merge * Fix after merge 2 * Remove tests for Angular 6 * Fix path to devextreme-angular in tests
1 parent b976e5e commit ac72c87

50 files changed

Lines changed: 227 additions & 284 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.circleci/config.yml‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,8 @@ jobs:
1414
name: Install packages
1515
command: npm install --unsafe-perm
1616
- run:
17-
name: Build and run tests with Angular 6
18-
command: npx gulp test
19-
- run:
20-
name: Install Angular 7
21-
command: npm install @angular/animations@^7.0.0 @angular/core@^7.0.0 @angular/common@^7.0.0 @angular/compiler@^7.0.0 @angular/forms@^7.0.0 @angular/http@^7.0.0 @angular/platform-browser@^7.0.0 @angular/platform-server@^7.0.0 @angular/platform-browser-dynamic@^7.0.0 @angular/compiler-cli@^7.0.0 --unsafe-perm
17+
name: Build with Angular 7
18+
command: npm run build
2219
- run:
2320
name: Build tests with Angular 7
2421
command: npx gulp build.tests

‎.gitignore‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,5 @@ npm/dist
66
npm-debug.log
77
.vscode/launch.json
88
metadata/generated
9-
examples/app/**/*.d.ts
10-
examples/app/**/*.map
11-
examples/app/**/*.js
129
src/ui/
1310
src/index.ts

‎build.config.js‎

Lines changed: 8 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
var bundleName = "devextreme-angular";
2-
31
module.exports = {
42
tools: {
53
srcFilesPattern: ['tools/src/**/*.ts'],
@@ -27,10 +25,7 @@ module.exports = {
2725
facades: {
2826
'./src/index.ts': {
2927
sourceDirectories: [
30-
'./src/core',
31-
'./src/ui',
32-
'./src/ui/nested',
33-
'./src/ui/nested/base',
28+
'./metadata/generated'
3429
]
3530
}
3631
}
@@ -43,18 +38,18 @@ module.exports = {
4338
'./src/ui'
4439
],
4540
additionalImports: {
46-
'DxTemplateModule': 'import { DxTemplateModule } from \'../core/template\''
41+
'DxTemplateModule': 'import { DxTemplateModule } from \'devextreme-angular/core\''
4742
}
4843
}
4944
}
5045
},
5146
componentNamesGenerator: {
5247
importFrom: './tools/dist/component-names-generator',
5348
componentFilesPath: './src/ui/',
54-
excludedFileNames: [ 'all.ts', 'validation-group.ts', 'validation-summary.ts', 'validator.ts' ],
49+
excludedFileNames: [ 'nested', 'validation-group', 'validation-summary', 'validator' ],
5550
outputFileName: 'tests/src/server/component-names.ts'
5651
},
57-
tsConfigPath: "tools/src/tsconfig.json",
52+
tsConfigPath: "tsconfig.json",
5853
tests: {
5954
srcFilesPattern: 'tools/spec/tests/*.spec.js'
6055
}
@@ -64,19 +59,17 @@ module.exports = {
6459
tsTestSrc: ['tests/src/**/*.spec.ts', 'tests/src/**/component-names.ts'],
6560
testsPath: 'tests/dist',
6661
sourcePath: 'src',
67-
outputPath: 'dist',
68-
bundleName: bundleName
62+
outputPath: 'dist'
6963
},
7064
examples: {
71-
srcFilesPattern: ['examples/**/*.ts'],
65+
srcFilesPattern: ['examples/**/*.ts']
7266
},
7367
tests: {
74-
tsConfigPath: "tests/src/tsconfig.json"
68+
tsConfigPath: "tsconfig.json"
7569
},
7670
npm: {
7771
distPath: "npm/dist",
7872
sourcesTargetFolder: "ts",
79-
content: [ "LICENSE", "README.md" ],
80-
package: [ "package.json", "npm/package.json" ]
73+
content: [ "LICENSE", "README.md" ]
8174
}
8275
};

‎examples/app/app.component.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ import{
2929
} from './owner.service';
3030
import{
3131
DxPopoverComponent
32-
} from '../../dist';
32+
} from 'devextreme-angular';
3333

3434
@Component({
3535
selector: 'my-app',

‎examples/app/app.module.ts‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,15 @@ import { NgModule } from '@angular/core';
22
import { BrowserModule } from '@angular/platform-browser';
33
import { ReactiveFormsModule } from '@angular/forms';
44
import { AppComponent } from './app.component';
5-
import {
6-
DevExtremeModule
7-
} from '../../dist';
5+
6+
import { DevExtremeModule } from 'devextreme-angular';
87

98
@NgModule({
109
declarations: [AppComponent],
1110
imports: [
1211
BrowserModule,
13-
DevExtremeModule,
14-
ReactiveFormsModule
12+
ReactiveFormsModule,
13+
DevExtremeModule
1514
],
1615
bootstrap: [AppComponent],
1716
})

‎examples/systemjs.config.js‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -29,12 +29,16 @@
2929
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
3030
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
3131
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
32+
33+
'devextreme-angular': '../npm/dist',
34+
3235
// devextreme & devextreme deps
3336
'devextreme': 'npm:devextreme',
37+
'devexpress-diagram': 'npm:devexpress-diagram',
38+
'devexpress-gantt': 'npm:devexpress-gantt/dist/dx-gantt.js',
3439
'jszip': 'npm:jszip/dist/jszip.min.js',
3540
'quill-delta-to-html': 'npm:quill-delta-to-html/dist/browser/QuillDeltaToHtmlConverter.bundle.js',
3641
'quill': 'npm:quill/dist/quill.min.js',
37-
'../../dist': '../../dist',
3842
// other libraries
3943
'rxjs': 'npm:rxjs'
4044
},
@@ -51,13 +55,14 @@
5155
main: 'index.js',
5256
defaultExtension: 'js'
5357
},
54-
'../../dist': {
55-
main: 'index.js',
56-
defaultExtension: 'js'
57-
},
5858
'devextreme': {
5959
defaultExtension: 'js'
6060
}
61-
}
61+
},
62+
packageConfigPaths: [
63+
'../npm/*/package.json',
64+
'../npm/dist/*/package.json',
65+
'../npm/dist/ui/*/package.json',
66+
]
6267
});
6368
})(this);

‎examples/tsconfig.json‎

Lines changed: 0 additions & 17 deletions
This file was deleted.

‎gulpfile.js‎

Lines changed: 13 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -9,20 +9,18 @@ var sourcemaps = require('gulp-sourcemaps');
99
var jasmine = require('gulp-jasmine');
1010
var jasmineReporters = require('jasmine-reporters');
1111
var del = require('del');
12-
var mergeJson = require('gulp-merge-json');
1312
var karmaServer = require('karma').Server;
1413
var karmaConfig = require('karma').config;
1514
var buildConfig = require('./build.config');
1615
var header = require('gulp-header');
17-
var fs = require('fs');
16+
var ngPackagr = require('ng-packagr');
1817

1918
//------------Main------------
2019

2120
gulp.task('build', [
2221
'build.tools',
2322
'build.components'
24-
]
25-
);
23+
]);
2624

2725
gulp.task('default', ['build']);
2826

@@ -56,9 +54,8 @@ gulp.task('generate.metadata', ['build.tools', 'clean.metadata'], function () {
5654
});
5755

5856
gulp.task('clean.generatedComponents', function () {
59-
var outputFolderPath = buildConfig.tools.componentGenerator.outputFolderPath;
60-
61-
return del([outputFolderPath + "/**/*.*"]);
57+
var { outputFolderPath } = buildConfig.tools.componentGenerator;
58+
del.sync([outputFolderPath + "/**"]);
6259
});
6360

6461
gulp.task('generate.components', ['generate.metadata', 'clean.generatedComponents'], function () {
@@ -118,22 +115,17 @@ gulp.task('clean.dist', function () {
118115
return del([buildConfig.components.outputPath]);
119116
});
120117

121-
gulp.task('build.ngc', function(done) {
122-
var config = buildConfig.components,
123-
task = shell.task([
124-
'ngc -p ' + path.join(config.outputPath, 'tsconfig.esm5.json'),
125-
'ngc -p ' + path.join(config.outputPath, 'tsconfig.json'),
126-
]);
127-
128-
task(done);
118+
gulp.task('build.ngc', function() {
119+
var config = buildConfig.components;
120+
return ngPackagr.build({
121+
project: path.join(config.outputPath, 'package.json')
122+
});
129123
});
130124

131125
gulp.task('build.copy-sources', ['clean.dist'], function() {
132126
var config = buildConfig.components;
133-
134-
return gulp.src([path.join(config.sourcePath, '**/*.*')])
127+
return gulp.src([path.join(config.sourcePath, '**/*.*'), 'package.json'])
135128
.pipe(gulp.dest(config.outputPath));
136-
137129
});
138130

139131
// Note: workaround for https://github.com/angular/angular-cli/issues/4874
@@ -146,58 +138,28 @@ gulp.task('build.remove-unusable-variable', function() {
146138
.pipe(gulp.dest(config.outputPath));
147139
});
148140

149-
gulp.task('build.checkMetadata', function(done) {
150-
if(fs.existsSync(path.resolve(buildConfig.components.outputPath, 'index.metadata.json'))) {
151-
done();
152-
} else {
153-
done("Metadata not generated!");
154-
}
155-
});
156-
157141
gulp.task('build.components', ['generate.facades'], function(done) {
158142
runSequence(
159143
'build.copy-sources',
160144
'build.license-headers',
161145
'build.ngc',
162146
'build.remove-unusable-variable',
163-
'build.checkMetadata',
164147
done
165148
);
166149
});
167150

168151

169152
//------------npm------------
170153

171-
gulp.task('npm.clean', function() {
172-
var config = buildConfig.npm;
173-
174-
return del([config.distPath + '/**/*']);
175-
});
176-
177-
gulp.task('npm.content.package', ['npm.clean'], function() {
178-
var config = buildConfig.npm;
179-
180-
return gulp.src(config.package)
181-
.pipe(mergeJson('package.json'))
182-
.pipe(gulp.dest(config.distPath));
183-
});
184-
185-
gulp.task('npm.content', ['npm.clean', 'npm.content.package'], function() {
186-
var config = buildConfig.npm;
187-
188-
return gulp.src(config.content)
189-
.pipe(gulp.dest(config.distPath));
190-
});
191-
192-
gulp.task('npm.modules', ['npm.clean', 'build.components'], function() {
154+
gulp.task('npm.content', ['build.components'], function() {
193155
var npmConfig = buildConfig.npm,
194156
cmpConfig = buildConfig.components;
195157

196-
return gulp.src([path.join(cmpConfig.outputPath, '**/{*.{js,d.ts,js.map,metadata.json},collection.json}')])
158+
return gulp.src([path.join(cmpConfig.outputPath, '**/collection.json'), ...npmConfig.content])
197159
.pipe(gulp.dest(npmConfig.distPath));
198160
});
199161

200-
gulp.task('npm.pack', ['npm.content', 'npm.modules'], shell.task(['npm pack'], { cwd: buildConfig.npm.distPath }));
162+
gulp.task('npm.pack', ['npm.content'], shell.task(['npm pack'], { cwd: buildConfig.npm.distPath }));
201163

202164

203165
//------------Testing------------

‎npm/package.json‎

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎package.json‎

Lines changed: 30 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,11 @@
99
"scripts": {
1010
"start": "npm run build && npm run serve",
1111
"serve": "http-server -c-1 -o -p 8875 .",
12-
"build": "gulp build",
1312
"lite": "lite-server",
14-
"test": "gulp test",
15-
"pack": "gulp npm.pack"
13+
"gulp": "node --max_old_space_size=8048 node_modules/gulp/bin/gulp.js",
14+
"build": "npm run gulp -- build",
15+
"test": "npm run gulp -- test",
16+
"pack": "npm run gulp -- npm.pack"
1617
},
1718
"author": "Developer Express Inc.",
1819
"license": "MIT",
@@ -23,16 +24,16 @@
2324
"@angular/forms": ">6.0.0"
2425
},
2526
"devDependencies": {
26-
"@angular/animations": "^6.0.0",
27-
"@angular/common": "^6.0.0",
28-
"@angular/compiler": "^6.0.0",
29-
"@angular/compiler-cli": "^6.0.0",
30-
"@angular/core": "^6.0.0",
31-
"@angular/forms": "^6.0.0",
32-
"@angular/http": "^6.0.0",
33-
"@angular/platform-browser": "^6.0.0",
34-
"@angular/platform-browser-dynamic": "^6.0.0",
35-
"@angular/platform-server": "^6.0.0",
27+
"@angular/animations": "~7.2.0",
28+
"@angular/common": "~7.2.0",
29+
"@angular/compiler": "~7.2.0",
30+
"@angular/compiler-cli": "~7.2.0",
31+
"@angular/core": "~7.2.0",
32+
"@angular/forms": "~7.2.0",
33+
"@angular/http": "~7.2.0",
34+
"@angular/platform-browser": "~7.2.0",
35+
"@angular/platform-browser-dynamic": "~7.2.0",
36+
"@angular/platform-server": "~7.2.0",
3637
"@types/dot": "^1.0.29",
3738
"@types/jasmine": "2.5.38",
3839
"@types/mkdirp": "^0.3.29",
@@ -42,6 +43,8 @@
4243
"core-js": "^2.4.1",
4344
"deepmerge": "^2.0.1",
4445
"del": "^2.2.0",
46+
"devexpress-diagram": "^0.1.43",
47+
"devexpress-gantt": "0.0.8",
4548
"devextreme": "~19.2.4",
4649
"dot": "^1.0.3",
4750
"gulp": "^3.9.1",
@@ -66,13 +69,14 @@
6669
"karma-webpack": "^2.0.9",
6770
"lite-server": "^2.2.0",
6871
"mkdirp": "^0.5.1",
72+
"ng-packagr": "^5.6.1",
6973
"plugin-typescript": "^8.0.0",
7074
"puppeteer": "^1.11.0",
7175
"run-sequence": "^1.2.2",
7276
"rxjs": "^6.0.0",
73-
"systemjs": "0.19.39",
77+
"systemjs": "0.21.6",
7478
"tslint": "^4.5.1",
75-
"typescript": "~2.8.0",
79+
"typescript": "~3.1.0",
7680
"webpack": "^3.8.1",
7781
"yargs": "^6.0.0",
7882
"zone.js": "^0.8.25"
@@ -86,5 +90,16 @@
8690
"dependencies": {
8791
"@angular-devkit/schematics": "^7.2.2",
8892
"devextreme-schematics": "latest"
93+
},
94+
"schematics": "./schematics/collection.json",
95+
"ngPackage": {
96+
"$schema": "./node_modules/ng-packagr/ng-package.schema.json",
97+
"lib": {
98+
"entryFile": "index.ts"
99+
},
100+
"dest": "../npm/dist",
101+
"whitelistedNonPeerDependencies": [
102+
"."
103+
]
89104
}
90105
}

0 commit comments

Comments
 (0)