2

I'm following this strategy to deploy angular app and web api in the same Azure Web app.

I have Angular app development with VSCode and Web Api in VS 2017. So it's not a complete app as in Angular App template from VS 2017

I deployed web api with 

services.AddSpaStaticFiles(configuration =>
{
    configuration.RootPath = "ClientApp/dist";
});

and

app.UseSpa(spa =>
{
    spa.Options.SourcePath = "ClientApp";
});

Copied built version of angular app to ClientApp/dist folder on Azure Web App. Set azure app's WEBSITE_NODE_DEFAULT_VERSION to 10.14.1 which available there.

But when I browse the website, I get errors in browser console - 

SyntaxError: expected expression, got '<'[Learn More] runtime.js:1
SyntaxError: expected expression, got '<'[Learn More] polyfills.js:1
SyntaxError: expected expression, got '<'[Learn More] styles.js:1
SyntaxError: expected expression, got '<'[Learn More] scripts.js:1
SyntaxError: expected expression, got '<'[Learn More] vendor.js:1
SyntaxError: expected expression, got '<'[Learn More] main.js:1

I see that, all the requests are getting index.html and not actual .js file.

It seems that angular app with node is not getting fired up.

Milan
  • 119
  • 2
  • 12

1 Answers1

4

I suggest you move your Angular app to the Azure Storage Static Website service. It'll be much simple to deploy and also should be lower in resource usage (I/O, CPU, Memory, etc.). See:

Update

Take a look at Separating production and development HTTP URLs using environment.ts file in Angular on how to pass the URL of your API and also manage different URLs for different environments.

Update 2

You can also follow this guide and check if you are missing anything in your startup code.

Hope it helps!

Itay Podhajcer
  • 2,616
  • 2
  • 9
  • 14
  • Yes, that's sounds reasonable. But I'm not sure how to connect that static app to my web api as proxy.conf.js is not available in production and my api endpoint will be different than angular one. – Milan Dec 17 '18 at 08:31
  • That works but again it comes with it's own issues. I was wondering why angular is not getting served from ClientApp/dist. If I create a sample Angular app with VS template and deploy, it does the same thing and works. I'm not able to identify why it does not work if do the same thing. – Milan Dec 19 '18 at 09:37
  • 1
    I suggest you take a look at [this guide](https://neelbhatt.com/2018/06/02/create-an-application-with-angular-6-and-net-core-step-by-step-guide/), which describes how to create the above combination without using the build-in VS template and see if you are missing something in your startup code. – Itay Podhajcer Dec 19 '18 at 09:44
  • Thanks a lot @itay, this is the answer! – Milan Dec 19 '18 at 12:06
  • Updated my answer to include the content of the above comment. please mark it as the answer for this question. Thanks! and happy to help! – Itay Podhajcer Dec 19 '18 at 12:32