导出Angular单页应用到Static HTML/CSS/JS

Question

I am looking for way to convert single page Angular Application to old style html-css-javascript static files, which runs on my pc without any set-up of complicated node.js or any npm

What I was looking for and came to Angular is, I was heavily looking for Bootstrap-sidebar with lightweight css and js but all the examples I could find had large, big size of Javascript files, so I saw Angular had some novel implementation of Sidebar.

I want to convert the Angular sidebar(Angular application) to old style HTML , css and js files so that I can run them without any complex node server.

Is there any way to get the javascript, css and html out of Angular application. I heard of WebPack but did not tried, so any suggestion would be appreciated.

If the above process can be done in React suggest me a solid way to do that.

Edit: What I want is, I want to access the file as file://path/to/index.html I do not want HTTP ( http://localhost/index.html )

Answer 1

Note

When compiling an angular project, the result is already a plain html/css/js website. You do not need nodejs to run angular, but, like for any website, you should use a http server. So your problem is rather that you cannot open an angular website from a file, without a webserver.

Explanation

Your problem is likely that you have errors in the console when opening the resulting index.html from your browser. They come from improved security stadards implemented by browsers (CORS, Strict mime type, access to local files,...). Since you did not provide any error details at all apart from stating that you only have a blank page, here is a basic solution

Solution

Try setting base href to . when building

ng build --prod --base-href=.

The website should work without further action on Firefox.

On chrome, you may get one of the following errors

Access to script at 'file://XXXXXXscripts.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

Or

Failed to load module script: The server responded with a non-JavaScript MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec

A possible solution is to remove the type="module" attribute from all script tags at the bottom of index.html if using angular 8+.

There are other options to solve CORS related issues on local files, but it involves disabling security on chrome, which is not a good idea.

Answer 2

It's really simple You can run npm run build / ng build command. The build process will transpile all the code into equivalent js code and you can find this transpiled code in "dist" folder of your root project directory. You can use see there index.html which will be your base html page and other js files or media files which are javascript files. You can use this content in dist folder to host your website which will be purely html css and js based. You can use nginx or any other server for hosting it.

Answer 3

in Angular you can build your angular application using ng build . This will generate a pure js equivalent of the.ts code you wrote.