Any time, I make code changes in .hmtl file or the .js file, the browser still renders the old code and my new code changes don't show up in the browser result.
For example, I add the following 2 lines of code in .html file.
<div class="control-group">
<label class="control-label">First Name</label>
<div class="controls readonly">
{{profile.FirstName}}
</div>
</div>
<div class="control-group">
<label class="control-label">Last Name</label>
<div class="controls readonly">
{{profile.LastName}}
</div>
</div>
Then I do the following:
In VS2013, right click on my project and view in browser (IE or Chrome).
Login to my application.
Go the respective page and I see the rendering of the old html file. I do not see the newly added 2 div elements rendered at all.
I even hit f5 to refresh the browser but still no luck.
What am I doing wrong?
Hit F12 in your browser to bring up the Developer Tools. Disable the Cache. Reload your page.
Besides using Dev Tools to make sure the cache is disabled, you can edit your Web.config file and tell IIS to not cache your Angular files:
<configuration>
<!-- Disable IIS caching for directories containing Angular templates and scripts -->
<location path="app">
<system.webServer>
<staticContent>
<clientCache cacheControlMode="DisableCache"/>
</staticContent>
</system.webServer>
</location>
...
</configuration>
My Angular root directory is app/. You may need to modify according to your file structure.
TypeScript only!
In tsconfig.json add…
"compileOnSave": true,
Try disabling your cache with Dev Tools:
https://developer.chrome.com/devtools/docs/settings#general
Open devTools in chrome and select Network tab, In Network tab Un-check the Disable cache and reload the page.
For me, none of the previous answers worked. I was using Chrome, and the only way I was able to view the update was by opening an incognito window. My regular browser window, for some reason, just will not get the latest assets.
I have tried clearing my cache, disabling cache on devtools, and hard refresh, to no avail. The only way I was able to fix it was by clearing the DNS cache. Here's a link with more details:
How to Clear the DNS Cache on Computers and Web Browsers
Using command line, here's how you go about doing it:
Windows 7 & Earlier
ipconfig /flushdns
Windows 8
ipconfig /flushdns
OSX (Yosemite, El Capitain, and Sierra)
sudo dscacheutil -flushcache
sudo killall -HUP mDNSResponder
You need to change the aspnetcore enviroment variable from production to development. From the official website:
... set an environment variable to tell ASP.NET to run in development mode:
If you’re using PowerShell in Windows, execute $Env:ASPNETCORE_ENVIRONMENT = "Development"
If you’re using cmd.exe in Windows, execute setx ASPNETCORE_ENVIRONMENT "Development", and then restart your command prompt to make the change take effect
If you’re using Mac/Linux, execute export ASPNETCORE_ENVIRONMENT=Development
If you are in linux, you might have to do it as a superuser. i.e.
sudo export ASPNETCORE_ENVIRONMENT=Development
The value of the variable may revert back to Production after re-booting. If you want to work with several environments, I suggest you define them in the launchSettings.json file:
{
"iisSettings": {
"windowsAuthentication": false,
"anonymousAuthentication": true,
"iisExpress": {
"applicationUrl": "http://localhost:40088/",
"sslPort": 0
}
},
"profiles": {
"IIS Express": {
"commandName": "IISExpress",
"launchBrowser": true,
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development"
}
},
"IIS Express (Staging)": {
"commandName": "IISExpress",
"launchBrowser": true,
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Staging"
}
}
}
}
Read about environments here:
In chrome press F12>go to network tab> disable cache
deleting the dist folder from clientApp folder from source resolve my issue and it started auto refresh again
Or you can use Browserlink in Visual Studio 2013 to automatically reload the page
http://www.asp.net/visual-studio/overview/2013/using-browser-link
You need to run command yarn webpack:build to recompile your client code. Otherwise modifications/updates in .HTML, .json, .ts files will not be reflected.
I simply deleted the dist folder in Visual Studio and it auto refreshed again.
**** this was for Angular 7 ***
Just right click on the page reload button on the browser and choose "Empty cache and Hard Reload"
In my case issue inside Angular.json file "deployUrl": should be relative path Like "/support/yourpagenam/bundle/dist/"
Hence any changes made in Angular files are not reflecting to Browser.
Problem
Client-side (Browser) caching of static files in dev enviornment
Server-side (IIS Express) caching of static files in dev enviornment
Solutions
For Client-side (Browser) caching of static files in dev enviornment
Web.Config/ApplicationHost.config Approch: Web.config Approach
suggested by #NateBarbettini above. Please note that this approach is
also can be applied to 'Applicationhost.config' instead of web.config
file.
"Always Refresh From Server" in IE as suggested above by #Phil Degenhardt. Please find screenshot below.
Navigate to source file location in browser address bar: Try to navigate to the JavaScript file in question by typing the address. It will show you JavaScript file contents. Once you do this, file gets updated.So you can again go back and try to navigate to proper landing page of your application. This time, you will see you get latest JavaScript code getting executed.
e.g. If you have problem with not updating 'app/home/home-account.js'. Then in browser navigate to 'http://[your-host/localhost]:[specified port of your application]/app/home/home-account.js. This will show you the contents. Then again navigate to your application's home page i.e. in this case 'http://[your-host/localhost]:[specified port of your application]/'
For Server-side (IIS-Express) caching of static files in dev enviornment
visit IIS Express appcmd commandline utility. In my case, appcmd is located in "C:\Program Files(x86)\IIS Express\appcmd.exe" this path. Then use SITE list and SITE delete command to remove temporary files cached in iisexpress.
There is also one solution which is specific to IE mentioned here:
Visual Studio 2013 caching older version of .js file
This happens because of cache stored by the browser. Before running your application you can delete cache and cookies stored by your browser.
Set HTTP Response headers to expire content through IIS manager.
Open HTTP Response Headers module for you web application
Click Set Common headers in the Actions pane
https://www.iis.net/configreference/system.webserver/staticcontent/clientcache
I opened link in Incognito mode since in that mode cache is disabled and Voila it worked.
Related
I understand that the normal workflow with hugo is to generate a static site using the "hugo" command, and then deploy your site by copying the public/ directory to your production web server. I don't want to do that: I just want the html files in the public/ directory to display correctly, and have links that work, when I open them in my web browser. I do not want to run the "hugo server" command.
Specifically, the links that are generated are all missing "index.html" at the end.
For example, a link to the About page will be:
file:///C:/Users/myusername/Documents/HugoTesting/quickstart/public/about/ which will open a view of that directory when I click on it. But it will display the web page properly if I can change the link to: .../public/about/index.html
How can I make that change throughout my site? I already set "relativeUrl" to true in my config file, as it says to do here:
https://gohugo.io/content-management/urls/ as it was necessary to get my index page to display properly. The documentation there says this helps to " make your site browsable from a local file system" so I know it must be possible.
I've tried using permalinks and using frontmatter to try and add "index.html" to all of my links, but hugo is adding an extra '/' to whatever I specify using permalinks, and while the "url" tag in the frontmatter works, it's not feasible for me to do for every url in every page.
I think ugly URLs configuration in Hugo might help you with this, (e.g., example.com/urls.html).
Set uglyurls = true or uglyurls: true in your site’s config.toml or config.yaml, respectively.
I have a react app which works perfectly fine.
However we are pushing code after NPM BUILD and deploying the code manually via SFTP
We can see the JS and CSS files have different names.
However the browser keeps downloading css and js files form cache, even if I disable cache in the browser.
I tried deleting all files in FTP, and magically the website keeps working? so it looks all the files are retrieved from the browser cache even if nothing exists in the server
I tried stopping and starting the azure website, but didnt make any difference
I tried cleaning the browser, cache, history, etc, no difference.
I wonder if I need to setup something in web.config, or in Azure website settings to make this works
This seems to be not an issue with Azure app service (Web app), you need to remove the caching of the react app with the following steps
Step 1: adding the following to in index.html
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
Step 2: inserting the following to the js
import { unregister } from './registerServiceWorker';
and call
unregister()
Reference Answer
It depends on how your app is configured, but I would not recommend disabling cache on the JS & CSS. Instead, it's best to add some version-dependent information to the file name so every time the JS or CSS update the file name changes.
Last time I worked on a web project we had it such that our JS & CSS had a content hash at the end. Something along the lines of main.205199ab45963f6a62ec.js instead of just main.js. Also note that you don't even have to manage that hash yourself, as there are ways to get ASP.NET or webpack (etc...) to update the reference in the HTML/JSX for you.
Here's webpack's page about it: https://webpack.js.org/guides/caching/
I have checked and it seems to be keyed in correctly:
<div class="container" ng-app="app" ng-controller="evPotDataCtrl">
When I run my SPA locally it works fine. However, upload it to my web-server and it fails to locate the file. I have also set up a bundle:
bundles.Add(new ScriptBundle("~/bundles/AngularCustom").IncludeDirectory
("~/app", "*.js", true));
The file is located in a folder called app, which is located in the root directory. I have checked the server folder and all the files have successfully uploaded and I have also checked the permissions on the folder.
I have sent a request to the server administrator, however if I have missed something out, I would appreciate if one of you could tell me. Thank you.
When you use bundles in published webSite (without debug mode) it combine all the files into one.
Try to had BundleTable.EnableOptimizations = true; and debug localy, you may have an error in this process.
I'm trying to push my Angular.js SPA to an IIS7 server but having issues. The application appears to load halfway (as my views and templates are loaded fine), but then stops functioning like so:
As you can see there is no errors in the console...and just for good measure I checked Fiddler which also is having no problems:
The SPA works completely fine on my local web server and only seems to have issues when pushed to IIS. Any thoughts would be greatly appreciated!
EDIT:
Looks like the problem was with angular-csp.css not being properly included when running grunt build -- this was resolved by adding the following to my project's bower.json file:
"overrides": {
"angular": {
"main": [
"angular.js",
"angular-csp.css"
]
}
}
Have you checked the Mime Types on your IIS server? If IIS doesn't know about a particular file type it will often just ignore it.
Also check that you have CORS enabled if you are requesting data from a host other than the one you are deploying to.
Finally, check that you have correctly configured IIS to work with HTML5mode (if you have it enabled. See How to: Configure your server to work with html5Mode
Alright after coming at this with a fresh mind it appears you are correct--everything is working proplery--except my ng-show directives.
Obviously this is because angular-csp.css was not included when running "grunt build."
Since it's not in the angular bower.json main section, I needed to add the following to my projects bower.json:
"overrides": { "angular": { "main": ["angular.js", angular-csp.css"] } }
which fixed the problem.
I am using IntelliJ IDEA to develop AngularJS app with Java back-end. HTML/JS is server from Tomcat.
Whenever I changed HTML/JS file, I hit CMD+F10 and select Update resources, then refresh my browser and everything is OK.
I'd like to ask if there is a way that IntelliJ would do this automatically for me. I know that I can check 'Don't ask again', but sometimes I really want to Redeploy or Restart server as well ...
If you go into your Server Run Configuration, on the Server tab there is an option named "On frame deactivation". Set that to "Update resources" and then whenever IDEA loses focus, it will update the resources of the server.
Relevant docs from Intellij http://www.jetbrains.com/idea/webhelp10.5/updating-a-running-java-ee-application.html#update_on_frame_deactivation
Edit 8/19/2020
Thanks to Adi Gerber for providing an updated link, which is https://www.jetbrains.com/help/idea/2016.2/updating-applications-on-application-servers.html#update (the previous one doesn't work anymore)
And here is a link to the current docs as of 8/19/2020: https://www.jetbrains.com/help/idea/updating-applications-on-application-servers.html#update
Another TRUE AUTOMATED APPROACH that works very well is :
Having an imported Maven project
Option: Build Tools > Maven > Importing > Import Maven Project Automatically to keep in sync IDE compiler options specified in POM ( for example maven-compiler-plugin options)
Plugin: File Watcher to watch for resources' updates
Option: Tools > File Watcher > Custom watches to copy updated files via mvn war:exploded ( in our case Javascript and HTML )
Option: Build > Compiler Build Project Automatically to update .class
In our case we deploy on Google Cloud App Engine Devserver which reloads files everytime they are updated