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.
Related
We published our website and everything worked fine. After few days, something strange happened. we're getting "The file 'xxx.cshtml' has not been pre-compiled, and cannot be requested."
Resetting application pool, even restarting IIS didn’t help us to resolve the problem. Even resetting the Web server machine didn't fix the problem. but when we re-copying the published files again, web site starts working again.
We compared the problem website files with the new files, all are the same. nothing is missing. so every two-three days, we are getting the same error and the only way we can fix it is recopying the files again.
We even copied website when we got an error and then create another website based on those files and it works fine!
Any suggestion what can cause this problem?
Thanks in advance.
About the error
System.Web.HttpException: The file has not been pre-compiled, and cannot be requested
This error will come when a reference is specified in web.config and
deployment folder/site does not contain these dlls installed in the
system or bin folder does not contain them(if they are private
assemblies). For Example: (add assembly="Namespace1.NameSpace2,
Version=x.x.x.x, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/)
if your web.config contains any assemblies like this and deployed
server doesnot contain these assembiles in bin or GAC, then this error
will occur.
Scenarios:
Here are some possible scenarios that will generate this error:
When we publish the website with the "updateable" check OFF and then
copy some files on deployment location that has some markup or code in them. By
putting the "updateable" check OFF we instruct the asp.net compiler to compile all the markup and code into dll files so that further on asp.net would not consider runtime compilation of content. But if it needs to (due to the presence of such content) it will throw that error.
The second situation is when we have a web application configured in
VS.Net to run directly off IIS (the http project) and then we publish it to the same location again with the "updateable" checked OFF. There will be development files at same location which will cause similar errors.
Another situation is where we have a precompiled website and within the
root folder of it we have another folder that has content for another asp.net
application but isn¡¯t marked as application in IIS. ASP.Net tracks asp.net
applications when running on IIS by virtual directories in IIS marked as applications. A child folder having un-compiled content within a parent
application which is precompiled will again cause this error.
Source: Microsoft Support
Apparently, it is another scenario where the cause is related to missing ReportViewer .dll references
Solutions
Some people talks about adding manually the missing missing assembly files.
i found out one thing that while publishing the application it does
not copy all of the dependent assemblies in the bin folder.So i just
copied them manually to the server and now every thing is working
Other people, somehow fixed this installing "Microsoft Web Service Enhancements v3.0". Downlaod here. It probably provides missing required .dll
Here, somebody fixed it, enabling "Create a separate assembly for each page and control output" in the Deployment Options
I am working with a simple HTML test page. I am opening it with Chrome version 40.0.2214.115. In order to test the code, I am loading a js file from my workplace.
However, the file which I loaded tries to load other js files through script tags, but does not specify http:// . This causes an error in the console, as it defaults to the file:/// protocol and is unable to load file://the/restof/theurl.js
I downloaded the file locally, and loaded it from there, adding http:// to all url's, so it would ACTUALLY use the HTTP protocol.
This worked fine. However, those links load OTHER files that also do not specify http://
Is there any way I can have the browser imply http:// to unspecified script tags, and avoid downloading and editing EVERY file just to test a small HTML page?
I think the easiest way to prevent problems like this is to actually use a very small server (like something provided by node.js or the like or lighttpd).
Obviously your files are not supposed to be delivered via the plain file protocol, so you should just use a http server. That way you can be sure they work as intended and you don't have to fiddle around with your browser on a deeper level.
If you launch chrome with the below flags this should work. Obviously not possible for production environments, but for testing it should be okay.
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files
Consider using a simple local file server. If you are unsure how to, since you are developing in JavaScript, you can easily create a simple file server using Node.js which written in JS using simple middleware like node-static.
All my scripts are compressed and minified used uglifyJS:
The size of this file "app.min.js" is 982.1KB however when I tried to run the node server and open the app in the browser It's stopped in 502kB
and after some while
I don't know what happened there, Is there any limitation on Javascript file '502kB' ?
what I miss
I think this article may help you, it is all about nodejs server serving static content, so nginx is recommended to do this purpose.
If you have to use nodejs server then you should make all files smaller in terms of size, no need for example to minimize libraries files as jquery since it is already minimized, scripts should be minimized only, you can even minimize all libs files into one javascript file called libs.min.js as example and the rest of your scripts in another file called script.min.js.
How to access path of a folder instead of a file using Ext.form.field in extjs. Is it possible at all in extjs.
I can use the component above but its giving me only the file name without the path to the file.
Or should I use third party tools like jquery or maybe dynamic html/ plain js?
There's no way to get any information on the client's filesystem using a website, for security reasons. Nor Javascript, nor PHP...
Thus, you can't get the path of a client's file.
However, you can do it with a non-website application, installed on his computer.
You could use a java, flash, or activex control to do that.
You could also host extjs inside Sencha Desktop Packaging, ie in an installed executable with an embedded browser.
You might be able to get folder access with HTML5, but that would only be a folder local to your domain and heavily restricted.
Otherwise, browser file/folder security restrictions exist for good reason and you should consider files off limits other than upload/download.
I'm trying to get a simple web project running via PhoneGap. The site uses RequireJS to load modules asynchronously. It also has Handlebars templates which I'm loading via the RequireJS text plugin.
The site works fine when served from a local HTTP server. However on the device it fails to render. Debugging on PhoneGap is tricky (though can be done to some extent), but as far as I can tell, the issue is related to the loading of these templates using the RequireJS text plugin.
The weinre-based debugger provided by PhoneGap shows an error string in the console:
JSCallback Error: Request failed.
Can anyone recommend a solution?
the text plugin can create problems when, for example, the templates are hosted on a different domain from the one which is running the javascript. in that case, due to security restrictions in cross origin requests, the plugin will assume that you are downloading the compiled version of your templates, and append .js to the file locator.
if you have control of the server, you can check if the wrong path is requested.
Use safari to debug the site on your mobile device / simulator, and it should tell you exactly which request is failing in the network tab.
See http://webdesign.tutsplus.com/tutorials/workflow-tutorials/quick-tip-using-web-inspector-to-debug-mobile-safari/