Cryptic Errors in Angular + Asp.Net Core

This is more a note to self, but might help others.

My current application set-up is:

  1. asp.net core backend with web api
  2. angular cli frontend
  3. Build the frontend (ng build) generates output into the wwwroot folder of the backend/asp.net project.

With angular-cli development build, the frontend calls a fake a api based on finding the environment variable set to development.

With the angular-cli production build, the frontend calls the real api (from the wwwroot directory inside the asp.net core project, it is just “/api”.

I spent the better part of a day, trying to get the angular cli production build to work inside the asp.net core wwwroot directory.  First, I could not get the environ variable to change from development to production.  Then I realized the browser was caching the page (this happens so often to me – yet I still forget to clear the cache).  Then I realized the production build worked without error but I kept seeing multiple console errors Uncaught SyntaxError: Unexpected token <  and the angular app refused to load.

The error was cryptic.  I assumed since this worked in development build, that something in the production file processing was awry (e.g. uglify) or a disallowed character had been inserted (e.g. BOM).  I searched online and of course Stack Overflow, which lead to updating Node and Angular-cli, but of course this did not fix the problem.

I snacked. I napped.  Stared at screen.  Answered emails.  rebuilt again – just in case.  stared at screen.

Then I noticed the filenames in the angular-cli destination directory.  In angular development build, the files are called  for example, “inline.bundle.js”, but in the default production build, there is cache busting enabled – so the files are named “inline.ajdsfk2374sf.bundle.js”.   In addition, the development build outputs the css to a js file, but in production build the css is output to a css file.

This is not a problem if you use the generated index.html file, but I have a asp.net mvc default view – Index.cshtml file:

 

<app-root>Loading...</app-root>

@section scripts {
 http://~/angular_dist/inline.bundle.js
 http://~/angular_dist/scripts.bundle.js




http://~/angular_dist/styles.bundle.js

http://~/angular_dist/vendor.bundle.js
 http://~/angular_dist/main.bundle.js

}

 

Why was the error Uncaught SyntaxError: Unexpected token <“?

In any event, the solution is fairly simple:

ng build --prod --ec=false --oh=media
which keeps the script files and css file the same as in development.
Had the original error read – “file not found”, you would not be reading this.  Cryptic errors and a day distracted.
Advertisements
This entry was posted in Uncategorized. Bookmark the permalink.