Develop Reference

Export Angular single page Application to Static HTML/CSS/JS

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)

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.

Issue with PCI Scan Failing Because of Jquery

Hoping someone can help me here. Long story short I'm working with a client that is using Trustwave as their firewall provider and for their PCI scans. This particular location continues to fail their scans with the same two errors over and over for "jquery"
jQuery Core rquickExpr variable
with Cross-Site Scripting
Vulnerability, CVE-2012-6708
and
jQuery Cross-Domain
Asynchronous JavaScript and
Extensible Markup Language
Request Cross-site Scripting
Vulnerability, CVE-2015-9251
Now the issue here is that the network being scanned is a point of sale system. Why is this happening? Isn't this a script library for web content developers? the scans indicate that there is TCP communication over port 80 related to jquery but that's simply not true when I check using the command prompt. There is no program running that should be using this or anything java related. How can I find what is using this script library?
Another snippet from the scan indicated the following for the failures.
Evidence:
Match: '1.7.1' is less than '3.0.0'
Remediation:
Upgrade jquery to version 3.0.0 or higher.

Webpage create / edit file

I'm working on a webpage that has to work offline when it's finished. No XAMPP or other services available, so PHP is no option.
It has to create a new file, edit a filename (which would be the best solution) or move a file into another directory. This action has to be called from a function in jQuery.
I've read that Python could to this but as long as I read Python needs a web framework and a configured Apache as well, so if it's right Python is no possibility for me as well.
Is there any way to do this with JavaScript / jQuery or anything else which works offline?

No. It won't work by Design. Imagine, you visit a Website and it would install virus.exe into your Windows Directory (For example Autostart).
Html Pages are for Displaying Informationen to the User. Javascript is supporting it with dynamic Features. The Browser grant Rights for Loading other Information and nothing else. Everything which would affect the System, could not handled by Script.
If it should run from Web, you need a Plugin (Like Java). In your case (Offline Use) consider to write a Desktop Client (C#, VB.NET, Java, C++).

Client side includes on local machine

I obviously can't use server side languages, this is just a page on my desktop.
I tried using AJAX with jquery, but I get the following error message
Sorry but there was an error: 0 [Exception... "Access to restricted URI denied" code: "1012" nsresult: "0x805303f4 (NS_ERROR_DOM_BAD_URI)" location: "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js Line: 4"]
It has to do with the browser not loading scripts because it's hosted locally or something. So is there any way I can include files on a local machine without installing web server software?

This is an XSS error. You can't make http requests to third party sites (urls not on your domain). You would need to use a proxy to make requests to the page (or have the owner allow your site to make XSS requests).

Shameless plug of a library that I wrote the solve similar problem. We wanted to be able to splice HTML files for backend implementations without the overhead of a local HTTP server implementing server side includes. This library works on HTTP or local filesystem. But, as the repository README notes, you'll have to enable a --allow-file-access-from-files flag to your Chrome runtime. Other browsers work out of box.
https://github.com/LexmarkWeb/csi.js
<div data-include="/path/to/include.html"></div>
The above will take the contents of /path/to/include.html and replace the div with it.

In Firefox how to find out the code line that makes a request?

Is there an extension or Firebug feature that will tells me the exact line and file from which a HTTP request is made?
In Firebug, the Net tab shows the HTTP headers but not the line that triggered the request. The Console tab will report request with error codes and their expected URL but again without the line where the request is made from the CSS, JavaScript or HTML file.
Thanks in advance.
EDIT: A possible use case is to be able to quickly see in the browser image requests that return 404 - in which file (there might be several CSS files) the request was initiated and the line.

No Firebug feature (most likely no extension either)
Firebug doesn't display that and what's even more is that most production-level web applications use minified scripts so this info wouldn't be valuable anyway...
If you're developing an app, you don't use minified scripts but then you know which call initiated a request. But if you're looking at other running apps than minification will make it impossible to determine calling code.
Search in files
Many text editors nowadays support search/find in files feature which makes it possible to search several files at once so you don't have to do it manually yourself. Simple editors like Notepad++ support this as well as several IDEs (like Visual Studio). This makes it simple for you to find culprits that requested those missing files1.
1: But I agree... Such feature would be great if supported directly in Firebug.