Can't compile the devextreme-angular package in the Production mode using the ASP.NET Core 2.0 Angular template

[GoshaFighten]

This issue relates to the one. I've created an Angular application using .NET Core 2.0. The issue is reproducible regardless if I use Visual Studio 2017 15.3 or dotnet new angular. Everything works fine in the Development mode. But, once I publish my application with the DevExtreme Angular package using dotnet publish -c Release, I'm getting the following error:

      ERROR in ./$$_gendir/~/devextreme-angular/ui/data-grid.ngfactory.ts
      Module parse failed: D:\FromCustomers\GH534\NGCore\NGCore\$$_gendir\node_modules\devextreme-angular\ui\data-grid.ngfactory.ts Unexpected token (63:38)
      You may need an appropriate loader to handle this file type.
      | import * as i52 from 'devextreme-angular/core/iterable-differ-helper';
      | import * as i53 from 'devextreme-angular/core/nested-option';
      | export const DxDataGridModuleNgFactory:i0.NgModuleFactory<i1.DxDataGridModule> = i0.╔╡cmf(i1.DxDataGridModule,
      |     ([] as any[]),(_l:any) => {
      |       return i0.╔╡mod([i0.╔╡mpd(512,i0.ComponentFactoryResolver,i0.╔╡CodegenComponentFactoryResolver,
       @ ./$$_gendir/ClientApp/app/components/fetchdata/fetchdata.component.ngfactory.ts 8:0-102
       @ ./$$_gendir/ClientApp/app/app.module.server.ngfactory.ts
       @ ./ClientApp/boot.server.ts
D:\FromCustomers\GH534\NGCore\NGCore\NGCore.csproj(41,5): error MSB3073: The command "node node_modules/webpack/bin/webpack.js --env.prod" exited with code 2.

I added

"devextreme": "^17.1.5",
"devextreme-angular": "^17.1.5",

to the package.json file. Then, I added DevExtreme CSS files to the webpack.config.vendor.js as

const nonTreeShakableModules = [
    'bootstrap',
    'bootstrap/dist/css/bootstrap.css',
    'es6-promise',
    'es6-shim',
    'event-source-polyfill',
    'jquery',
    'devextreme/dist/css/dx.common.css',
    'devextreme/dist/css/dx.light.css'
];

If instead of the following line in the webpack.config.js file

{ test: /\.ts$/, include: /ClientApp/, use: isDevBuild ? ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] : '@ngtools/webpack' },

I use

{ test: /\.ts$/, use: isDevBuild ? ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] : '@ngtools/webpack' },

or

{ test: /\.ts$/, include: /ClientApp/, use: ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] },

everything works fine. A similar configuration in a project created using Angular CLI works fine as well.

The attached NGCore project illustrates the issue and test-app created with Angular CLI illustrates that this works in a standard Angular CLI project after I call ng eject.

What can be the problem here? Is it in DevExtreme modules or in your webpack configuration? test-app.zip NGCore.zip

[Eilon]

cc @SteveSandersonMS

[SteveSandersonMS]

@GoshaFighten I see you found the fix as per your post at https://github.com/DevExpress/devextreme-angular/issues/534

@Eilon This is the same issue as https://github.com/aspnet/JavaScriptServices/issues/1168, which is the one we considered including a fix for at the last minute before the 2.0 SDK shipped. It's resolved in our dev branch already so will be fixed in the next SDK.

[GoshaFighten]

I installed .NET Core 2.0.3 and I can confirm that now my project is built with no errors. Thank you, @SteveSandersonMS !