Kendo-angular: ASP.NET Core 2.0 + Angular 5 App with Kendo components failed when published to production with SSR and AoT enabled

[lankaapura]

I'm submitting a...

• Bug report

Current behavior

We have upgraded our existing angular 4.x.x project to angular 5.x. As a part of that, we have migrated to latest Asp.net project template too (which is based on angular CLI).

even though everything works fine in the development environment, @progress packages giving 'Unexpected token import' error when it published to production.

2018-01-12 13:21:58.697 +05:30 [ERR] HTTP GET /index.html responded 500 in 3295.7207893842437 ms
Microsoft.AspNetCore.NodeServices.HostingModels.NodeInvocationException: Prerendering failed because of error: C:\Dev\IIS\XXX\ClientApp\node_modules\@progress\kendo-angular-resize-sensor\dist\es\resize-sensor.component.js:1
(function (exports, require, module, __filename, __dirname) { import { Component, ElementRef, EventEmitter, Input, Output, ViewChild, NgZone, Renderer2 } from '@angular/core';
                                                              ^^^^^^

SyntaxError: Unexpected token import
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:588:28)
    at Object.Module._extensions..js (module.js:635:10)
    at Module.load (module.js:545:32)
    at tryModuleLoad (module.js:508:12)
    at Function.Module._load (module.js:500:3)
    at Module.require (module.js:568:17)
    at require (internal/module.js:11:18)
    at Object.ayiD (C:\Dev\IIS\XXX\ClientApp\dist-server\main.bundle.js:1:542921)
Current directory is: C:\Dev\IIS\XXX

   at Microsoft.AspNetCore.NodeServices.HostingModels.HttpNodeInstance.<InvokeExportAsync>d__7`1.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at Microsoft.AspNetCore.NodeServices.HostingModels.OutOfProcessNodeInstance.<InvokeExportAsync>d__13`1.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at Microsoft.AspNetCore.NodeServices.NodeServicesImpl.<InvokeExportWithPossibleRetryAsync>d__10`1.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at Microsoft.AspNetCore.NodeServices.NodeServicesImpl.<InvokeExportWithPossibleRetryAsync>d__10`1.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter.ValidateEnd(Task task)
   at Microsoft.AspNetCore.Builder.SpaPrerenderingExtensions.<>c__DisplayClass0_0.<<UseSpaPrerendering>b__1>d.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at Microsoft.AspNetCore.Builder.RouterMiddleware.<Invoke>d__4.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at Swashbuckle.AspNetCore.Swagger.SwaggerMiddleware.<Invoke>d__6.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at Microsoft.AspNetCore.Cors.Infrastructure.CorsMiddleware.<Invoke>d__7.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at XXX.Core.ErrorHandleAndLogMiddleware.<Invoke>d__4.MoveNext()

Workaround

Follow instructions here and compile js files into es2015

    "compile_telerik_node_modules": "node node_modules/babel-cli/bin/babel.js node_modules/@progress -d node_modules/@progress --presets es2015",
    "postinstall": "npm run compile_telerik_node_modules",

Environment

Package versions:

+-- @angular-devkit/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @nguniversal/[email protected]
+-- @ngx-cache/[email protected]
+-- @ngx-cache/[email protected]
+-- @ngx-cache/[email protected]
+-- @ngx-cache/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @types/[email protected]
+-- @types/[email protected]
+-- @types/[email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
`-- [email protected]

[tsvetomir]

It looks like the SSR implementation uses the "module" entry point, but attempts to execute the code in NodeJS.

This will not work unless the application code is first bundled through Webpack or Rollup. Babel can also be used, but technically the code doesn't need transpilation, just different module syntax.

I'm not sure what we could do to rectify this. The packages already have a "main" entry point with the correct module type for NodeJS, as per the CommonJS specification. This code doesn't seem to be used in this case.

[lankaapura]

Thanks for the explanation. Is there any way to force Angular CLI to use correct module entry point?

[tsvetomir]

Updates

• The issue affects server-side rendering with .NET Core
• The root cause seems to be angular/angular-cli#7200. The "deep imports" in the output bundle point to ES2015 modules
• Other packages seem to be affected as well, see aspnet/JavaScriptServices#1502

Workaround

• Replace "dist/es/" with "dist/npm/" in "ClientApp\dist-server\main.bundle.js"

[lankaapura]

Thanks @tsvetomir for the investigation. Based on comments, it seems that this related to how we publish the NPM package. See the explanations by Toxicable. He has shared this doc which will be helpful to fix the issue.

[tsvetomir]

Thanks for sharing :+1:

The most likely reason why this is not an issue with the @angular packages is that they use flat
modules. They provide other benefits like improved built times too.

We would've considered them as a possible solution, but there is some controversy on whether they're a good choice going forward.

In any case, our current packaging should also work provided the SSR implementation picks up the right entry point.

[tsvetomir]

Managed to solve this by changing the package structure. All latest package versions include the fix.

[lankaapura]

Awesome! Thanks @tsvetomir 👍