build --prod on azure webapp CI

[estradamarkie]

Please provide us with the following information:

OS?

Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)
Azure Webapp

Versions.

Please run ng --version. If there's nothing outputted, please run in a Terminal: node --version and paste the result here:
angular-cli: 1.0.0-beta.19-3
node: 6.9.0

Repro steps.

Was this an app that wasn't created using the CLI? What change did you do on your code? etc.

The log given by the failure.

Normally this include a stack trace and some more information.

Mention any other details that might be useful.

I've tried building my app on azure CI, the build process is fine ng build --prod however when I start the app it only shows me the home page when I route to other page like site.com/login it gives me an error of The resource you are looking for has been removed, had its name changed, or is temporarily unavailable. It seems like the routes is not there at all.

The build checks my TFS repo then do the build --prod and copy the dist folder and upload it to the webapp.

Can someone shed a light on this issue?

I get this when building on my local machine

---

Thanks! We'll be in touch soon.

[clydin]

A typical SPA requires the server to have a redirect rule that sends all non resource requests to the index.

[estradamarkie]

So how can I fix this?

I put my route paths in routes/routes.ts, but I don't think that's the problem because it works fine locally. Just when building it to -prod and hosting the /dist folder to azure.

Do I need to change my base href as well to my webapp URL?

[elvirdolic]

Put this in your web.config

<system.webServer> <security> <requestFiltering allowDoubleEscaping="true"/> </security> <rewrite> <rules> <rule name="AngularJS Routes" stopProcessing="true"> <match url=".*" /> <conditions logicalGrouping="MatchAll"> <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /> <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /> <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" /> </conditions> <action type="Rewrite" url="/" /> </rule> </rules> </rewrite> </system.webServer>

[estradamarkie]

@elvirdolic

It's giving me 500 Internal Server Error.

[clydin]

A quick google search turned up this (it's pretty much what @elvirdolic wrote):
https://coderwall.com/p/mycbiq/deep-linking-angularjs-on-windows-azure-iis

[estradamarkie]

@clydin
Yeah, which is giving me an error of 500 the app isn't loading at all now.
Do I need to change my to my azure web url or leaving it as is fine?

[hansl]

This seems like it's not an Angular-CLI problem, but rather an Azure configuration issue. The link above should be a good starter, but you'll need to customize it to your projects and needs.

Stack Overflow might be a better tool for this kind of question. For now, closing this as the CLI doesn't do anything special for servers, be it Azure or AWS or Google Cloud or any other...

Cheers.

[juanmarin-co]

If your site is an static page this is an Azure configuration that you can use

https://gist.github.com/1a566a72d9ce49600dd2207b9b21f975

[alejorybak]

@juanpmarin-infocorp how that would that be added to the azure cloud service definition file?

[juanmarin-co]

@alejorybak put this on the .deployment file
[config] command = deploy.cmd

[aifex]

Add web.config file to your root directory and insert the code below in it.

<system.webServer>












</system.webServer>

[johndwood2017]

Although this has been closed, I found the issue YES with the web.config - but add in the "staticContent" element. I had the same issue with trying to read a JSON file on an Azure deployed instance... It was the mimeType that was missing.
My copy of the web.config...
<configuration> <system.webServer> <staticContent> <mimeMap fileExtension=".woff" mimeType="application/font-woff" /> <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" /> <mimeMap fileExtension=".json" mimeType="application/json" /> </staticContent> <rewrite> <rules> <rule name="Angular"> <match url=".*" /> <conditions logicalGrouping="MatchAll"> <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /> <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /> </conditions> <action type="Rewrite" url="/" /> </rule> </rules> </rewrite> </system.webServer> </configuration>

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}