Webpack/Angular CLI - how to embed scripts in HTML instead of referencing them?

Question

I'm building a lean Angular app that should be ran locally through file:// URL. The index.html file will be attached and deployed through a headless browser and I cannot use a HTTP server as a solution. Running the file locally would bring up Cross Origin errors as described here.

The solution I came up with, which works (!) is to replace all <script src="..."/> resources (which are bundled with ng build --prod) with <script>...</script>. At the moment, I'm doing it manually.

With the output index.html from my ng build being:

<script src="runtime-es2015.1eba213af0b233498d9d.js" type="module"></script><script src="runtime-es5.1eba213af0b233498d9d.js" nomodule defer></script><script src="polyfills-es5.9e286f6d9247438cbb02.js" nomodule defer></script><script src="polyfills-es2015.690002c25ea8557bb4b0.js" type="module"></script><script src="main-es2015.3bdd714db04c3d863447.js" type="module"></script><script src="main-es5.3bdd714db04c3d863447.js" nomodule defer></script>

I'm changing it to:

<script type="module">//content of runtime-es2015.1eba213af0b233498d9d.js//</script><script nomodule defer>//content of runtime-es5.1eba213af0b233498d9d.js//</script><script nomodule defer>//content of polyfills-es5.9e286f6d9247438cbb02.js//</script><script type="module">//content of polyfills-es2015.690002c25ea8557bb4b0.js//</script><script type="module">//content of main-es2015.3bdd714db04c3d863447.js//</script><script nomodule defer>//content of main-es5.3bdd714db04c3d863447.js//</script>

I'm looking for a way to automate it through the build script.

Thanks.

Did you consider creating a custom script that parse index.html and looks for Angular generated bundles and delete them, then go to dist folder and then read the content of only those generates scripts and pushes its content script tags to index.html? all this process will be done in Build time, you could add package script: ng build && node customScript.js — Raz Ronen
– Raz Ronen, Commented May 4, 2020 at 12:43
@RazRonen yes, I'm currently trying to make it with a gulp script, I'll answer my on question in the end if no other solutions offered. — noamyg
– noamyg, Commented May 4, 2020 at 13:02

noamyg · Accepted Answer · 2020-05-04 15:26:04Z

This is the solution I eventually came up with with gulp:

I've ran npm install --save-dev to packages gulp, gulp-inline and del.

After creating a gulpfile.js to the root directory, I've wrote the following code:

let gulp = require('gulp');
let inline = require('gulp-inline');
let del = require('del');

gulp.task('inline', function (done) {
    gulp.src('dist/index.html')
    .pipe(inline({
        base: 'dist/',
        disabledTypes: 'css, svg, img'
    }))
    .pipe(gulp.dest('dist/').on('finish', function(){
        done()
    }));
});

gulp.task('clean', function (done) {
    del(['dist/*.js'])
    done()
});

gulp.task('bundle-for-local', gulp.series('inline', 'clean'))

The task inline will replace all <script src="..."></script> with the corresponding file content. clean would then delete all of the .js files.

Finally, I've updated my package.json with a new build script:

"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "build-for-local": "ng build --prod --aot && gulp bundle-for-local",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },

Now npm run build-for-local will do the work.

Collectives™ on Stack Overflow

Webpack/Angular CLI - how to embed scripts in HTML instead of referencing them?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related