javascript - Export Angular single page Application to Static HTMLCSSJS - Stack Overflow

admin管理员组

文章数量:1202044

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)

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)

• javascript
• angular

Share Improve this question Follow edited May 17, 2020 at 13:09 Sam Herrmann 6,96655 gold badges3232 silver badges6060 bronze badges asked May 17, 2020 at 2:17 user13246320user13246320 12

• 1 Just to be clear, there is no "complicated node.js" setup needed to RUN an Angular application. You can deploy an Angular app as a static site. Node.js is only needed for development. If you use the Angular CLI, then setting up a new project is quite simple. Once you build the app with the CLI (using ng build command), you will get an index.html and some JavaScript files. – Sam Herrmann Commented May 17, 2020 at 2:29
• This index.html file do not run or does not render anything just white or blank page in my browser – user13246320 Commented May 17, 2020 at 2:34
• 2 Are you saying you want to be able to run the app from your file system without any sort of HTTP server? If you access index.html over HTTP (http://localhost, not file://path/to/index.html), then the JavaScript code should populate index.html. Also, scully.io may be of interest to you. – Sam Herrmann Commented May 17, 2020 at 2:38
• Yes - that's what I am looking for - - I want to access file://path/to/index.html nothing HTTP (http://localhost) - is there any way to do that? – user13246320 Commented May 17, 2020 at 2:41
• 1 Does that help: stackoverflow.com/questions/43536647/… – David Commented May 17, 2020 at 5:20

 |  Show 7 more comments

3 Answers 3

Sorted by: Reset to default 16 +25

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.

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.

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

本文标签： javascriptExport Angular single page Application to Static HTMLCSSJSStack Overflow