Kendo-angular: Kendo Grid and Date Input Module issue with AOTPlugin in webpack config for production build -Visual Studio 2017 Spa template

[MohamedSaydSaleh]

I'm submitting a...

building error while using AOTPlugin in webpack.Config for production build --Visula Studio Spa template,
error appear when using kendo grid and dateInputModule due to lambda function [error details below],

• Bug report

Current behavior

ERROR in Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function (position 163:34 in the original .
ts file), resolving symbol isWindowAvailable in folderPath/node_modules/@progress/kendo-angular-dateinputs/dist/npm/util.d.ts, resolving symbol
mobileOS in folderPath/node_modules/@progress/kendo-angular-dateinputs/dist/npm/support.d.ts, resolving symbol folderPath/node_modules/@progress/kendo-angular-dateinputs/dist/npm/support.d.ts, resolving symbol touchEnabled in folderPath/node_modules/@progress/kendo-angular-dateinputs/dist/npm/support.d.ts, resolving symbol DatePickerModule in folderPath/node_modules/@progress/kendo-angular-dateinputs/dist/npm/datepicker/datepicker.module.d.ts, resolving symbol DatePickerModule in folderPath/node_modules/@progress/kendo-angular-dateinputs/dist/npm/datepicker/datepicker.module.d.ts

Minimal reproduction of the problem with instructions

create new asp.net angular core2 project in Visuall Studio 2017 and
install kendo grid and all it's dependencies ,
import grid module in app.module
and then run
node node_modules/webpack/bin/webpack.js --env.prod
,Shall add --env.prod for production build

--Webpack.config

const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const AotPlugin = require('@ngtools/webpack').AotPlugin;
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
const { sharedModuleRules } = require('./webpack.additions');
module.exports = (env) => {
// Configuration in common to both client-side and server-side bundles
const isDevBuild = !(env && env.prod);
console.info(isDevBuild);
const sharedConfig = {
stats: { modules: false },
context: __dirname,
resolve: { extensions: [ '.js', '.ts' ] },
output: {
filename: '[name].js',
publicPath: 'dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
},
module: {
rules: [
{ test: /.ts$/, use: isDevBuild ? ['awesome-typescript-loader?silent=true', 'angular2-template-loader', 'angular2-router-loader'] : '@ngtools/webpack' },
{ test: /.html$/, use: 'html-loader?minimize=false' },
{ test: /.css$/, use: [ 'to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize' ] },
{ test: /.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' },
...sharedModuleRules
]
},
plugins: [new CheckerPlugin()]
};
//Configuration for client-side bundle suitable for running in browsers
const clientBundleOutputDir = './wwwroot/dist';
const clientBundleConfig = merge(sharedConfig, {
entry: { 'main-client': './ClientApp/boot.browser.ts' },
output: { path: path.join(__dirname, clientBundleOutputDir) },
plugins: [
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./wwwroot/dist/vendor-manifest.json')
})
].concat(isDevBuild ? [
// Plugins that apply in development builds only
new webpack.SourceMapDevToolPlugin({
filename: '[file].map', // Remove this line if you prefer inline source maps
moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
})
] : [
// Plugins that apply in production builds only
new webpack.optimize.UglifyJsPlugin(),
new AotPlugin({
tsConfigPath: './tsconfig.json',
entryModule: path.join(__dirname, 'ClientApp/app/app.browser.module#AppModule'),
exclude: ['./*/.server.ts']
})
])
});

// Configuration for server-side (prerendering) bundle suitable for running in Node
const serverBundleConfig = merge(sharedConfig, {
resolve: { mainFields: ['main'] },
entry: { 'main-server': './ClientApp/boot.server.ts' },
plugins: [
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./ClientApp/dist/vendor-manifest.json'),
sourceType: 'commonjs2',
name: './vendor'
})
].concat(isDevBuild ? [] : [
// Plugins that apply in production builds only
new AotPlugin({
tsConfigPath: './tsconfig.json',
entryModule: path.join(__dirname, 'ClientApp/app/app.server.module#AppModule'),
exclude: ['./*/.browser.ts']
})
]),
output: {
libraryTarget: 'commonjs',
path: path.join(__dirname, './ClientApp/dist')
},
target: 'node',
devtool: 'inline-source-map'
});
return [clientBundleConfig,serverBundleConfig];
};
------tsconfig
{
"compileOnSave": false,
"compilerOptions": {
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [ "es6", "dom" ],
"module": "es2015",
"moduleResolution": "node",
"noImplicitAny": false,
"skipDefaultLibCheck": true,
"skipLibCheck": true, // Workaround for https://github.com/angular/angular/issues/17863. Remove this if you upgrade to a fixed version of Angular.
"sourceMap": true,
"strict": true,
"target": "es5",
"types": [ "webpack-env" ]
},
"exclude": [ "bin", "node_modules" ],
"atom": { "rewriteTsconfig": false }
}

//---- package.json
{
name: UI,
private: true,
version: 0.0.0,
scripts: {
test: karma start ClientApp/test/karma.conf.js
},
devDependencies: {
angular/animations: 4.2.5,
angular/common: 4.2.5,
angular/compiler: 4.2.5,
angular/compiler-cli: 4.2.5,
angular/core: 4.2.5,
angular/forms: 4.2.5,
angular/http: 4.2.5,
angular/platform-browser: 4.2.5,
angular/platform-browser-dynamic: 4.2.5,
angular/platform-server: 4.2.5,
angular/router: 4.2.5,
ngtools/webpack: 1.5.0,
types/chai: 4.0.1,
types/jasmine: 2.5.53,
types/webpack-env: 1.13.0,
angular2-router-loader: 0.3.5,
angular2-template-loader: 0.6.2,
aspnet-prerendering: ^3.0.1,
aspnet-webpack: ^2.0.1,
awesome-typescript-loader: 3.2.1,
bootstrap: 3.3.7,
chai: 4.0.2,
css: 2.2.1,
css-loader: 0.28.4,
es6-shim: 0.35.3,
event-source-polyfill: 0.0.9,
expose-loader: 0.7.3,
extract-text-webpack-plugin: 2.1.2,
file-loader: 0.11.2,
html-loader: 0.4.5,
isomorphic-fetch: 2.2.1,
jasmine-core: 2.6.4,
jquery: 3.2.1,
json-loader: 0.5.4,
karma: 1.7.0,
karma-chai: 0.1.0,
karma-chrome-launcher: 2.2.0,
karma-cli: 1.0.1,
karma-jasmine: 1.1.0,
karma-webpack: 2.0.3,
preboot: 4.5.2,
raw-loader: 0.5.1,
reflect-metadata: 0.1.10,
style-loader: 0.18.2,
to-string-loader: 1.1.5,
typescript: 2.4.1,
url-loader: 0.5.9,
webpack: 2.5.1,
webpack-hot-middleware: 2.18.2,
webpack-merge: 4.1.0,
zone.js: 0.8.12,
rxjs: ^5.5.0,
ngx-treeview: 1.2.5,
progress/kendo-angular-buttons: ^3.0.1,
progress/kendo-angular-charts: ^2.0.0,
progress/kendo-angular-dateinputs: ^2.0.0,
progress/kendo-angular-dialog: ^3.0.0,
progress/kendo-angular-dropdowns: ^2.0.0,
progress/kendo-angular-excel-export: ^1.0.5,
progress/kendo-angular-grid: ^2.0.1,
progress/kendo-angular-inputs: ^2.0.0,
progress/kendo-angular-intl: ^1.3.0,
progress/kendo-angular-l10n: ^1.0.5,
progress/kendo-data-query: ^1.1.2,
progress/kendo-drawing: ^1.4.2,
progress/kendo-theme-default: ^2.47.2,
lodash: ^4.17.5,
file-saver: ^1.3.3,
hammerjs: ^2.0.8,
ngx-translate/core: 6.0.1,
ngx-translate/http-loader: 0.0.3,
ng2-tree-viewer: 0.2.0,
ngx-chips: 1.5.10,
node-sass: ^4.7.2,
oidc-client: 1.2.1,
randomcolor: 0.5.3,
sass-loader: ^6.0.6
},
dependencies: {
progress/kendo-angular-layout: ^2.0.0,
progress/kendo-angular-popup: ^2.0.1,
ng2-translate: ^5.0.0,
stacktrace-js: ^2.0.0
}
}

[ggkrustev]

Hi @MohamedSaydSaleh, thanks for the report. We tried to replicate the issue, but to no avail. Could you send us a simple demo that replicates the issue? You can share a Github repo if it's more convenient for you.

Please also note that our latest components are tested against latest Angular LTS release, which is 4.4.6 at the time of writing this message. Could you try to upgrade your project to Angular 4.4.6 and let us know if the issue still persists?

[MohamedSaydSaleh]

@ggkrustev Thanks for your reply, I will upgrade to Angular 4.4.6 once it valid to me,
by the way, I got a workaround to fix this issue [before getting your reply] by downgrading
progress/kendo-angular-dateinputs: ^2.0.0 to 1.4.4 (I am sharing that , hopefully, may help another developer)

[ggkrustev]

@MohamedSaydSaleh Thanks for the workaround. I hope it will be helpful to someone experiencing the same issue.

Let me know once a repro demo is available.

Looking forward to hearing from you.

[tsvetomir]

@MohamedSaydSaleh the built-in template in Visual Studio is deprecated and will soon be replaced by a new version, based on the Angular CLI. See the updated Using with .NET Core help topic.

Our experience with the new template is very positive and we recommend migrating to it.