How to build an angular application in a single html file, and put all the scripts inline?

Question

Using angular 8, I am looking for a way to build my angular web application into a single html file, putting all the javascript and css files in an inline manner. I have to be able to send this html file by email, and the recipients should be able to see the app only by viewing this index.html file. Thanks everybody for your answers !! Thomas

javascript wont work on emails. You may redirect them using a button or link. please see this thread for further discussion [https://stackoverflow.com/questions/1088016/html-email-with-javascript](https://stackoverflow.com/questions/1088016/html-email-with-javascript) — nielcleo, Jul 16 '19 at 08:19
Hi Thomas, you should be asking questions instead of leave a quiz here. Maybe you may go to https://angular.io/start to kick start. — J.C. Fong, Jul 16 '19 at 08:22

Thomas rondepierre · Answer 1 · 2019-07-16T09:34:08.590

Thanks for your answers ! And sorry, my question was not that clear. Yes, I know the ng build --prod command. But then, my index.html file will look like :

<script src="runtime-es2015.js" type="module"></script><script src="polyfills-es2015.js" type="module">

etc etc.

I want all the javascript files to be put inline the index.html, then the index.html file is auto-sufficient to be viewed, without having to serve the css and javascript files

score 0 · Answer 2 · answered May 02 '23 at 21:49

I know the question is old, but I used 'gulp' to do this.

npm install --save-dev gulp
npm install gulp-inline

then in my angular project i added a gulpfile.js in the root folder

const gulp = require("gulp");
const inline = require("gulp-inline");

gulp.task("default", () => {
  return gulp
    .src("./dist/*/*.html")
    .pipe(inline())
    .pipe(gulp.dest("./single-dist"));
});

Finally, after i do my build, i can run this command to create a single distribution file

npx gulp

This particular configuration will stick an index.html file with all your js and css embedded in a "single-dist" folder (same level as your existing "dist" folder with your separate distribution files)

reference source: https://gist.github.com/jeroensmink98/8f2a9550b2b3df8c46ac40a70bf52eea

score -1 · Answer 3 · answered Jul 16 '19 at 08:48

open angular.json file and edit or add this pairs into projects.(your-project-name).architect.build.configurations

....
 "optimization": true,
 "outputHashing": "all",
 "sourceMap": false,
 "extractCss": true,
 "namedChunks": false,
 "aot": true,
 "extractLicenses": true,
 "vendorChunk": false,
 "buildOptimizer": true
....

Once you will make build for the app to the production it will do what u need :

  ng build --prod

the app will be minified and exported to one dist folder or the folder you specified it for your build ...

for sending the file to the email, what I understand that u need to share the application with some other users without hosing it somewhere..? if it's like that I recommend to you to use Electron its tool will make for you the output angular app into the desktop app with executable file to run it direct

Thanks for your answers ! And sorry, my question was not that clear. Yes, I know the ng build --prod command. But then, my index.html file will look like : — Thomas rondepierre, Jul 16 '19 at 09:34

How to build an angular application in a single html file, and put all the scripts inline?

3 Answers3