title: 405 Method not allowed on express angular 5 app deployed using azure web app
body: <p>I deployed my angular + nodejs app using azure web app but i get 405 method not allowed error while trying to access my node api</p>
  
  <p>server.js static assets code</p>
  
  <pre><code>/*API routes*/
  const api = require("./server/routes/route");
  
  /*Enable cors origin*/
  var corsOptions = {
    "origin": "*",
    "methods": "GET,HEAD,PUT,PATCH,POST,DELETE",
    "preflightContinue": false,
    "optionsSuccessStatus": 204
  }
  app.use(cors(corsOptions));
  
  app.use(express.static(path.join(__dirname, "/dist")));
  
  app.use("/api", api);
  
  app.get("/", function(req, res) {
    res.sendfile(path.join(__dirname, "/dist/index.html"));
  });
  </code></pre>
  
  <p>since i am using iis i have added a web.config in root of dist folder as this gist </p>
  
  <blockquote>
    <p><a href="https://gist.github.com/iammelvin/62e2582796cbc3fa8b5fc9e242915788" rel="nofollow noreferrer">https://gist.github.com/iammelvin/62e2582796cbc3fa8b5fc9e242915788</a></p>
  </blockquote>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  
  &lt;configuration&gt;
    &lt;system.webServer&gt;
  
      &lt;webSocket enabled="false" /&gt;
  
      &lt;handlers&gt;
        &lt;add name="iisnode" path="server.js" verb="*" modules="iisnode"/&gt;
      &lt;/handlers&gt;
  
      &lt;rewrite&gt;
        &lt;rules&gt;
          &lt;rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true"&gt;
            &lt;match url="^server.js\/debug[\/]?" /&gt;
          &lt;/rule&gt;
  
          &lt;rule name="StaticContent"&gt;
            &lt;action type="Rewrite" url="public{REQUEST_URI}"/&gt;
          &lt;/rule&gt;
  
          &lt;rule name="DynamicContent"&gt;
            &lt;conditions&gt;
              &lt;add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True"/&gt;
            &lt;/conditions&gt;
            &lt;action type="Rewrite" url="server.js"/&gt;
          &lt;/rule&gt;
        &lt;/rules&gt;
      &lt;/rewrite&gt;
  
      &lt;security&gt;
        &lt;requestFiltering&gt;
          &lt;hiddenSegments&gt;
            &lt;remove segment="bin"/&gt;
          &lt;/hiddenSegments&gt;
        &lt;/requestFiltering&gt;
      &lt;/security&gt;
  
      &lt;httpErrors existingResponse="PassThrough" /&gt;
  
    &lt;/system.webServer&gt;
  &lt;/configuration&gt;
  </code></pre>
  
  <p>I build the project using build script</p>
  
  <pre><code> "scripts": {
      "ng": "ng",
      "start": "node server.js",
      "build": "npm run clean &amp;&amp; ng build --prod",
      "test": "ng test",
      "lint": "ng lint",
      "e2e": "ng e2e",
      "dev": "concurrently  \"nodemon --inspect-brk=3000 server.js --watch server\" \"ng serve --proxy-config proxy.config.json\""
    },
  </code></pre>
  
  <p>my angular cli json looks something like this</p>
  
  <pre><code>"apps": [
      {
        "root": "src",
        "outDir": "dist",
        "assets": ["assets", "favicon.ico"],
        "index": "index.html",
        "main": "main.ts",
        "polyfills": "polyfills.ts",
        "test": "test.ts",
        "tsconfig": "tsconfig.app.json",
        "testTsconfig": "tsconfig.spec.json",
        "prefix": "app"...}]
  </code></pre>
  
  <p>and finally my index base href is <code>&lt;base href="/"&gt;</code></p>