Deploy angular 6 app and Web API in same Azure Web app

Question

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.

Itay Podhajcer · Accepted Answer · 2018-12-19 12:31:38Z

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!

edited Dec 19, 2018 at 12:31

answered Dec 17, 2018 at 8:10

Itay Podhajcer

2,6642 gold badges11 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Milan Over a year ago

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 Over a year ago

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.

Itay Podhajcer Over a year ago

I suggest you take a look at this 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.

Milan Over a year ago

Thanks a lot @itay, this is the answer!

Itay Podhajcer Over a year ago

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!

Collectives™ on Stack Overflow

Deploy angular 6 app and Web API in same Azure Web app

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related