title: Excel addin using Angular : dist/functions.json not found
body: <p>I have an Excel Addin built using Angular framework (Typescript).
  I am trying to configure it to use Shared Runtime in order to be able to use keyboard shortcuts and custom functions. I followed this link :
  <a href="https://docs.microsoft.com/en-us/office/dev/add-ins/develop/configure-your-add-in-to-use-a-shared-runtime" rel="nofollow noreferrer">https://docs.microsoft.com/en-us/office/dev/add-ins/develop/configure-your-add-in-to-use-a-shared-runtime</a>
  Once I try the last step, my addin does not show up, and I get an error in the console :
  &quot;dist/functions.json not found&quot;.
  I used webpack to build the project and I can say with certainty that functions.json does exist in the dist folder.
  Here's my manifest.xml
  <a href="https://i.stack.imgur.com/ak8II.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ak8II.png" alt="enter image description here" /></a></p>
  <p>Here's the webpack :</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>/* eslint-disable no-undef */
  
  const devCerts = require("office-addin-dev-certs");
  const CopyWebpackPlugin = require("copy-webpack-plugin");
  const CustomFunctionsMetadataPlugin = require("custom-functions-metadata-plugin");
  const HtmlWebpackPlugin = require("html-webpack-plugin");
  
  const urlDev = "https://localhost:3000/";
  const urlProd = "https://www.contoso.com/"; // CHANGE THIS TO YOUR PRODUCTION DEPLOYMENT LOCATION
  
  /* global require, module, process, __dirname */
  
  async function getHttpsOptions() {
      const httpsOptions = await devCerts.getHttpsServerOptions();
      return {cacert: httpsOptions.ca, key: httpsOptions.key, cert: httpsOptions.cert};
  }
  
  module.exports = async (env, options) =&gt; {
      const dev = options.mode === "development";
      const buildType = dev ? "dev" : "prod";
      const config = {
          devtool: "source-map",
          entry: {
              polyfill: ["core-js/stable", "regenerator-runtime/runtime"],
              functions: "./src/functions/functions.js",
              commands: "./src/commands/commands.js",
          },
          output: {
              devtoolModuleFilenameTemplate: "webpack:///[resource-path]?[loaders]",
              clean: true,
          },
          resolve: {
              extensions: [".ts", ".tsx", ".html", ".js"],
          },
          module: {
              rules: [
                  {
                      test: /\.js$/,
                      exclude: /node_modules/,
                      use: {
                          loader: "babel-loader",
                          options: {
                              presets: ["@babel/preset-env"],
                          },
                      },
                  },
                  {
                      test: /\.html$/,
                      exclude: /node_modules/,
                      use: "html-loader",
                  },
                  {
                      test: /\.(png|jpg|jpeg|gif|ico)$/,
                      type: "asset/resource",
                      generator: {
                          filename: "assets/[name][ext][query]",
                      },
                  },
              ],
          },
          plugins: [
              new CustomFunctionsMetadataPlugin({
                  output: "functions.json",
                  input: "./src/functions/functions.js",
              }),
              new HtmlWebpackPlugin({
                  filename: "index.html",
                  template: "./src/index.html",
                  chunks: ["polyfill", "commands", "functions"],
              }),
              new CopyWebpackPlugin({
                  patterns: [
                      {
                          from: "manifest*.xml",
                          to: "[name]." + buildType + "[ext]",
                          transform(content) {
                              if (dev) {
                                  return content;
                              } else {
                                  return content.toString().replace(new RegExp(urlDev, "g"), urlProd);
                              }
                          },
                      },
                  ],
              })
          ],
          devServer: {
              static: [__dirname],
              headers: {
                  "Access-Control-Allow-Origin": "*",
              },
              https: env.WEBPACK_BUILD || options.https !== undefined ? options.https : await getHttpsOptions(),
              port: process.env.npm_package_config_dev_server_port || 3000,
          },
      };
  
      return config;
  };</code></pre>
  </div>
  </div>
  </p>
  <p>If I paste the direct path into a browser I get this error
  <a href="https://i.stack.imgur.com/vqLJl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vqLJl.png" alt="enter image description here" /></a></p>