Angular wrapped in .Net Core 2.2.4, outputs the index.html running in Debug Docker Container

Question

I have an Angular V7 project wrapped in .Net Core 2.2.4 using the latest template, where you can run ng build, ng serve and it works perfect. But when I run it in debug within a Docker for Windows container the index.html is outputted to the browser and "<" char fires an mime error in which I get.

I thought is was an issue with SPA services, or my startup, program but this error message says I have an issue with a Angular module. I was getting circular errors using ng build and thought I fixed them correctly by testing with ng serve. I'm only a year into Angular and .Net Core and I really have no idea where I went wrong.

What I've tried: Building my startup.cs, program.cs, Dockerfile line by line. Examining my Angular files in detail.

This is what Chrome says:

Uncaught SyntaxError: Unexpected token <
core.js:15724 ERROR Error: Uncaught (in promise): Error: Loading chunk home-home-module failed.
(missing: https://localhost:44397/home-home-module.js)
Error: Loading chunk home-home-module failed.
(missing: https://localhost:44397/home-home-module.js)
    at HTMLScriptElement.onScriptComplete (bootstrap:133)
    at HTMLScriptElement.wrapFn (zone.js:1188)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:17290)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
    at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:496)
    at invokeTask (zone.js:1540)
    at HTMLScriptElement.globalZoneAwareCallback (zone.js:1566)
    at resolvePromise (zone.js:814)
    at resolvePromise (zone.js:771)
    at zone.js:873
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:17290)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:595)
    at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:500)
    at invokeTask (zone.js:1540)

ng server output sya when I build it in a Docker container for Windows - Linux - partial to keep it short:

chunk {default~admin-admin-module~error-error-module~home-home-module~portfolios-portfolios-module~reviews-~dd04c28b} default~admin-admin-module~error-error-module~home-home-module~portfolios-portfolios-module~reviews-~dd04c28b.js, default~admin-admin-module~error-error-module~home-home-module~portfolios-portfolios-module~reviews-~dd04c28b.js.map (default~admin-admin-module~error-error-module~home-home-module~portfolios-portfolios-module~reviews-~dd04c28b) 339 kB  [rendered]
[rendered]
chunk {error-error-module} error-error-module.js, error-error-module.js.map (error-error-module) 9.76 kB  [rendered]
chunk {home-home-module} home-home-module.js, home-home-module.js.map (home-home-module) 282 kB  [rendered]
chunk {main} main.js, main.js.map (main) 1.04 MB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 220 kB [initial] [rendered]
i ｢wdm｣: Compiled successfully.

This is what output says, I suspect the answer lies here in SPA and how it builds my project. To me everything looks good here.

    chunk {home-home-module} home-home-module.js, home-home-module.js.map (home-home-module) 282 kB  [rendered]

    >[40m[32minfo[39m[22m[49m: Microsoft.AspNetCore.Hosting.Internal.WebHost[1]
          Request starting HTTP/1.1 GET https://localhost:44397/runtime.js  
    Microsoft.AspNetCore.Hosting.Internal.WebHost:Information: Request starting HTTP/1.1 GET https://localhost:44397/runtime.js  
    [40m[32minfo[39m[22m[49m: Microsoft.AspNetCore.Server.Kestrel[34]
          Connection id "0HLM9Q6D5OLVD", Request id "0HLM9Q6D5OLVD:00000002": the application aborted the connection.
    Microsoft.AspNetCore.Server.Kestrel:Information: Connection id "0HLM9Q6D5OLVD", Request id "0HLM9Q6D5OLVD:00000002": the application aborted the connection.
    [40m[32minfo[39m[22m[49m: Microsoft.AspNetCore.StaticFiles.StaticFileMiddleware[2]
          Sending file. Request path: '/runtime.js'. Physical path: '/app/ClientApp/dist/runtime.js'
    Microsoft.AspNetCore.StaticFiles.StaticFileMiddleware:Information: Sending file. Request path: '/runtime.js'. Physical path: '/app/ClientApp/dist/runtime.js'
    [40m[32minfo[39m[22m[49m: Microsoft.AspNetCore.Hosting.Internal.WebHost[2]
          Request finished in 42.1488ms 0 application/javascript
    Microsoft.AspNetCore.Hosting.Internal.WebHost:Information: Request finished in 42.1488ms 0 application/javascript
    [40m[32minfo[39m[22m[49m: Microsoft.AspNetCore.Hosting.Internal.WebHost[1]
          Request starting HTTP/1.1 GET https://localhost:44397/home-home-module.js  
    Microsoft.AspNetCore.Hosting.Internal.WebHost:Information: Request starting HTTP/1.1 GET https://localhost:44397/home-home-module.js  
    [40m[32minfo[39m[22m[49m: Microsoft.AspNetCore.Hosting.Internal.WebHost[2]
          Request finished in 36.5316ms 200 text/html; charset=UTF-8
    Microsoft.AspNetCore.Hosting.Internal.WebHost:Information: Request finished in 36.5316ms 200 text/html; charset=UTF-8

I'm stumped here.

I have a feeling that Spa services and Kestrel don't mix together. I just reverted to my minimum startup.cs and program.cs and Angular plays nice. — jkirkerx

jkirkerx jkirkerx · Accepted Answer · 2019-04-26T21:38:51

Got it working today!

It was a matter of me doing too much, by trying to port an Angular V7 wrapped in .Net Core V2.2.4 app that used Webpack V4 and wwwroot into a Angular V7 wrapped in .Net Core V2.2.4 app that uses Spa services and dist folder.

I had to strip out Startup.cs and Program.cs and rebuild it again one service and app at a time, and then fix my circular references again the right way. This time I refereed to the official Angular Documentation to get it right. So now I can ng build and ng serve, run it in debug using the project, and it should work in a Docker Container.

Actually debugging the app using the project setting allowed me to fix everything, like the JWT Authorize, all my services and circular references. This version of the Angular template is pretty slick; I like it! I learned a lot about about startup.cs and program.cs.

So to sum it up, my app was just really broken and it had to be cleaned up properly.

Angular wrapped in .Net Core 2.2.4, outputs the index.html running in Debug Docker Container

1 Answers