Ionic 2 Build process breaks web.config

Ionic Framework ionic-v3
1

Hi,
I’m trying to deploy an app to an Azure app service to help talk about the idea of using Ionic for progressive web apps. I’ve got the automated build and release going on my build server but there is something in the ionic build process that is breaking my web.config file.

I’ve put it in the www folder and when I run ionic build browser, the file ends up the platforms\browser\www. All good so far. However, when I open it in visual studio, I see a stack of errors

image
WebConfigErrors.PNG1343×1089 77.2 KB

I might not be doing the right thing here in terms of where it is but could you advise on this.

I’ll try putting a temp fix in the build server to copy the good file in www over the top.

Thanks

2

Sounds like an encoding problem. Can you compare the encoding or the original and changed file? (e.g. Notepad++ shows that in the bottom right of the editor)

3

Both say UTF-8 (with CRLF). KDiff3 also shows them as “binary equal”. Would the build process set them to a certain encoding?

4

There were some bugs with the CLI that caused this and similar things in the past, and as I had multiple problems with it, this caused me to think of it. Sorry, doesn’t seem to be the case.

(Just to make sure: Are the files really identical? I don’t know how KDiff3 works, but some other diff tools ignore whitespace… To be 1000% sure could you upload both files somewhere?)

Are you sure the file is really broken and this is not only Visual Studio looking at it wrong?

5

I’ll do more digging and see if I can see the difference with this or another tool.

Fairly certain it was doing something to the file - when it was deployed to Azure the site threw a 500 - when I deleted the file the site worked. However, it wasn’t able to see the data.json file - the web.config allows me to configure the mime types and get that happening.

I’ve worked around it for the moment by copying the original file into platform/browser/www as a post build step but thought it might be useful for others to understand the problem and the work around - it took me a while to figure out what was going on.

6

Here what I did to make it work

  1. Create app service type Nodejs
  2. Disconnect deployment option for the default git hub.
  3. Create FTP credential for app.
  4. ionic build browser --prod.
  5. FTP using WinSCP https://winscp.net/ to upload build to site/wwwroot folder.
  6. update web.config as below

Hope it help


<?xml version="1.0"?>
 
<configuration>
  <system.webServer>
    <staticContent>
      <mimeMap fileExtension=".json" mimeType="application/json" />
      <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
      <mimeMap fileExtension=".ttf" mimeType="application/octet-stream" />
      <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
      <mimeMap fileExtension=".png" mimeType="image/png" />
      <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
      <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
        <mimeMap fileExtension=".js" mimeType="application/x-javascript" />
         <mimeMap fileExtension=".css" mimeType="text/css" />
    </staticContent>
    <rewrite>
      <rules>
        <clear />
        <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" />
            <add input="{REQUEST_URI}" pattern="^/(build)" negate="true" />
            <add input="{REQUEST_URI}" pattern="^/(assets)" negate="true" />
            <add input="{REQUEST_URI}" pattern="^/(build)*(.css)$" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>