#Vite adds script tags to html files which breaks angularjs

1 messages · Page 1 of 1 (latest)

vast hemlock
#

I am running into an issue with angularjs when angularjs tries to load a template html file from a provided path. Vite adds on a <script type="module" src="/@vite/client"></script> tag.
This breaks the angularjs template compilation because it needs to have only one root html element (and vite has added a second).

Is there any way to disable this behavior?

related to this post in #discussions
#discussions message

edit: Very sorry! I am brand new here and it appears I have broken the no cross posting rule 😞 - so I moved the discussion here instead

#

But I don't know how to conditionally turn it off

vast hemlock
#

A simple solution for my specific case

watch out for typos, this was retyped from another machine not copy-pasta

// vite.config.js
// add a custom plugin

/**
 * @type {import('vite').Plugin}
 */
const htmlPlugin = () => {
  return {
    name: 'html-transform'
    /**
     * @param {string} html
     * @param {Object} ctx
     * @return {{html: string}}
     *
     * @type {import('vite').IndexHtmlTransformHook
     */
    transformIndexHtml(html, ctx) {
      console.log(ctx.path)
      if (/^.*views\/.+\.html$/g.test(ctx.path)) {
        // remove the script tag injected by vite
        html = html.replace(/<script(.*vite.*)script>/g, '');
      }
      return html;
    }
  };
};


// then add to vite config.plugins
...
    htmlPlugin()
...
#

fyi @limber peak this got me one step closer to angularjs on vite

limber peak
#

@vast hemlock Hi, any improvements on your side?