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.

File Protocol Ajax Request

I have made a project whose structure is like this
When I run my index.html from firefox, it is working fine.
But I open it with my chrome it is giving CORS error.
Now my problem is that chrome doesnot support file:// protocol ajax request & as I have distribute to my project to others I don't want other to run on firefox only.
Internally I am using ajax call in project, to load the resources. Can Somebody suggest how to bypass that ajax call to load resources?? Is there some solution or any third party js which can help me.
Note: Please don't suggest to use XAMPP, apache etc where I can put my project and run as localhost for chrome as I don't want user to force to download these to run my project. Please give other useful solution where I can do some change in code & it works for everyone.
Here are the links from which you could understand my problem better.
Ajax in Jquery does not work from local file
AJAX code do not run locally
AJAX request using jQuery does not work

Embed the data directly into the JavaScript or HTML and read it from there.
The data isn't going to be changing based on user input or the contents of a database, so having it in a separate "http" resource doesn't bring huge benefits.
If you want to store the data in XML to make it easier to edit in your development environment, then write a build tool to bundle it up into an embedded format before distributing.

Cordova - Access device functionality from remote HTML

I have a Cordova application that waits for the deviceready event and, when that event fires, sets the window.location.href to a remote site, say, http://foo.bar.com/lander.html. From that page, I have several links to other pages - say page1.html and page2.html. I want to put a button in page1.html that calls Cordova's navigator.notification.vibrate function.
I have the above set up and everything appears to work, except that navigation.notification is undefined when I click the button in page1.html to try to get the device to vibrate. I have copied cordova.js onto foo.bar.com and am referencing it from page1.html. Do I have to include other javascript source files on foo.bar.com? Will this approach ever work?
Would it work if instead of changing the window location I were to get the content by AJAX and put the content in a div container in the index.html page that underlies the Cordova app?
This is all on iOS if that matters. I included the dialogs and vibration plugins only. I am receiving the deviceready event in the Cordova app and successfully redirecting to the remote site. Please let me know if there are other factors which I need to take into consideration. Thanks.
UPDATE 1: I got vibration working from the Cordova app's local index.html by using navigator.vibrate instead of navigator.notification.vibrate. Changing this on the remote site did not help. I also tried including copies of vibration.js, Cordova.js and cordova_plugins.js from the remote page - still no luck.
UPDATE 2: I found in the Cordova docs where what I'm asking about is discussed: Invoking Cordova JavaScript functions from a remotely-loaded HTML page (an HTML page not stored locally on the device) is an unsupported configuration. This is because Cordova was not designed for this, and the Apache Cordova community does no testing of this configuration. While it can work in some circumstances, it is not recommended nor supported. There are challenges with the same origin policy, keeping the JavaScript and native portions of Cordova synchronized at the same version (since they are coupled via private APIs which may change), the trustworthiness of remote content calling native local functions, and potential app store rejection.
The display of remotely-loaded HTML content in a webview should be done using Cordova's InAppBrowser. The InAppBrowser is designed so that JavaScript running there does not have access to the Cordova JavaScript APIs for the reasons listed above. Please refer to the Security Guide.
Based on this, it sounds possible but like we'd be out on our own. Still, if anybody is successfully doing this, we'd like to give it a try.

I thinhk what you are looking for is a push notification. There is a plugin for this.
http://ngcordova.com/docs/plugins/pushNotifications/
You need a task running on your app though.
Hope this is helpfull.

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.

Pure Javascript FlashPlayer: why can't I make it work?

There are some demos here:
http://paulirish.com/work/gordon/demos/
I downloaded blue.html as well as blue.swf on my local pc. But opening it I can't make it work.
Why ?

If you're using it on your local PC using file:// URL's, I'll bet a beer it's not working due to browser security restrictions. You should be getting warnings in Firefox's error console if that's the case.
You'd then need to test it on a web server, or set up a local web server accessible through http://localhost.

It may be that you are trying to play an incompatible .swf file. According to its gitHub page, the player can not render any .swfs over version 2.
A SWF Tag support table is on Github here,
http://wiki.github.com/tobeytailor/gordon/swf-tag-support-table/