16

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)

Improve this question
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. 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 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. 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? Commented May 17, 2020 at 2:41
  • 1
    Does that help: stackoverflow.com/questions/43536647/… Commented May 17, 2020 at 5:20

3 Answers 3

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

This is the correct answer, albeit not being marked by OP!
I think OP meant SSR. That would be the way to have an "old-school" HTML/CSS/JS website from an angular app
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.

Improve this answer

1 Comment

I have an index.server.html. that is confusing
0

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

Improve this answer

1 Comment

Angular project can be built by ng build but the html file when opened in browser, have nothing, it's just blank. I am looking for something - like converting Sugarcane to Sugar that can be stored in normal sacks, not novel npm or node things

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.