Angular-CLI-Based-Template: Lib works with Node based SSR but not .NET SSR in prod build #203

Closed
opened 2025-08-09 17:15:23 +00:00 by fergalmoran · 0 comments
Owner

Originally created by @artemzakharov on 1/28/2018

I'm currently trying to leverage the Apollo client for GraphQL operations in my dockerized, SSR enabled (per link in Startup.cs) Angular & .NET Core application. When I add it to my project, build the image (which publishes a production version of the application), and run it, the app breaks and I get a lot of errors like this:

Microsoft.AspNetCore.NodeServices.HostingModels.NodeInvocationException: Prerendering failed because of error: /app/ClientApp/node_modules/apollo-angular/Apollo.js:19
import { Injectable } from '@angular/core';
^^^^^^
SyntaxError: Unexpected token import
    at createScript (vm.js:56:10)
    at Object.runInThisContext (vm.js:97:10)
    at Module._compile (module.js:542:28)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.OVgk (/app/ClientApp/dist-server/main.bundle.js:1:92666)
Current directory is: /app

   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.ExceptionServices.ExceptionDispatchInfo.Throw()
   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.ExceptionServices.ExceptionDispatchInfo.Throw()
   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 System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
   at Microsoft.AspNetCore.NodeServices.NodeServicesImpl.<InvokeExportWithPossibleRetryAsync>d__10`1.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(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.ExceptionServices.ExceptionDispatchInfo.Throw()
   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.ExceptionServices.ExceptionDispatchInfo.Throw()
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at Microsoft.AspNetCore.Diagnostics.ExceptionHandlerMiddleware.<Invoke>d__6.MoveNext()
fail: Microsoft.AspNetCore.Server.Kestrel[13]
      Connection id "0HLB646CLF89K", Request id "0HLB646CLF89K:00000003": An unhandled exception was thrown by the application.

If I disable SSR, everything works fine. What's really odd about this is that the Apollo integration is lifted straight from a sample specifically designed to demonstrate using Apollo in a SSR-enabled application, which can be found here:

https://github.com/kamilkisiela/apollo-angular-ssr

The only difference between the sample and my project is that the sample uses a simple Express server for rendering, while my project is obviously based on the Angular CLI template. The sample leverages Angular Universal just like the template, and works in both dev and prod builds, so it seems to be compatible with AoT.

If I was to guess, I think the error may be somewhere in the webpack config files that are no longer accessible. It could also be a difference in the NPM build scripts, which I'm going to try to fiddle around with to see if it makes any difference. Mirrored the build scripts, error still present.

I've created a repository that reproduces this error with my setup:

https://github.com/artemzakharov/ssr/tree/master

This is the dockerfile: (although I expect the error would still pop up without docker)

FROM microsoft/aspnetcore-build:2.0 AS build-env
WORKDIR /app
COPY *.csproj ./
RUN dotnet restore
COPY . ./
RUN dotnet publish -c Release -o out

FROM microsoft/aspnetcore:2.0
RUN apt-get update
RUN apt install -y curl software-properties-common gnupg
RUN curl -sL https://deb.nodesource.com/setup_6.x | bash -
RUN apt install -y nodejs
WORKDIR /app
COPY --from=build-env /app/out .
ENTRYPOINT ["dotnet", "ssr.dll"]
*Originally created by @artemzakharov on 1/28/2018* I'm currently trying to leverage the Apollo client for GraphQL operations in my dockerized, SSR enabled (per link in Startup.cs) Angular & .NET Core application. When I add it to my project, build the image (which publishes a production version of the application), and run it, the app breaks and I get a lot of errors like this: ``` Microsoft.AspNetCore.NodeServices.HostingModels.NodeInvocationException: Prerendering failed because of error: /app/ClientApp/node_modules/apollo-angular/Apollo.js:19 import { Injectable } from '@angular/core'; ^^^^^^ SyntaxError: Unexpected token import at createScript (vm.js:56:10) at Object.runInThisContext (vm.js:97:10) at Module._compile (module.js:542:28) at Object.Module._extensions..js (module.js:579:10) at Module.load (module.js:487:32) at tryModuleLoad (module.js:446:12) at Function.Module._load (module.js:438:3) at Module.require (module.js:497:17) at require (internal/module.js:20:19) at Object.OVgk (/app/ClientApp/dist-server/main.bundle.js:1:92666) Current directory is: /app 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.ExceptionServices.ExceptionDispatchInfo.Throw() 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.ExceptionServices.ExceptionDispatchInfo.Throw() 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 System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw() at Microsoft.AspNetCore.NodeServices.NodeServicesImpl.<InvokeExportWithPossibleRetryAsync>d__10`1.MoveNext() --- End of stack trace from previous location where exception was thrown --- at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw() at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(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.ExceptionServices.ExceptionDispatchInfo.Throw() 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.ExceptionServices.ExceptionDispatchInfo.Throw() at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task) at Microsoft.AspNetCore.Diagnostics.ExceptionHandlerMiddleware.<Invoke>d__6.MoveNext() fail: Microsoft.AspNetCore.Server.Kestrel[13] Connection id "0HLB646CLF89K", Request id "0HLB646CLF89K:00000003": An unhandled exception was thrown by the application. ``` If I disable SSR, everything works fine. What's really odd about this is that the Apollo integration is lifted straight from a sample specifically designed to demonstrate using Apollo in a SSR-enabled application, which can be found here: https://github.com/kamilkisiela/apollo-angular-ssr The only difference between the sample and my project is that the sample uses a simple Express server for rendering, while my project is obviously based on the Angular CLI template. The sample leverages Angular Universal just like the template, and works in both dev and prod builds, so it seems to be compatible with AoT. If I was to guess, I think the error may be somewhere in the webpack config files that are no longer accessible. ~~It could also be a difference in the NPM build scripts, which I'm going to try to fiddle around with to see if it makes any difference.~~ Mirrored the build scripts, error still present. I've created a repository that reproduces this error with my setup: https://github.com/artemzakharov/ssr/tree/master This is the dockerfile: (although I expect the error would still pop up without docker) ``` FROM microsoft/aspnetcore-build:2.0 AS build-env WORKDIR /app COPY *.csproj ./ RUN dotnet restore COPY . ./ RUN dotnet publish -c Release -o out FROM microsoft/aspnetcore:2.0 RUN apt-get update RUN apt install -y curl software-properties-common gnupg RUN curl -sL https://deb.nodesource.com/setup_6.x | bash - RUN apt install -y nodejs WORKDIR /app COPY --from=build-env /app/out . ENTRYPOINT ["dotnet", "ssr.dll"] ```
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github/JavaScriptServices#203
No description provided.