Is there a way to load only one language with the require.js i18n plugin?
With the default settings, the default language is always loaded, and then the language with the locale of your browser is also loaded.
I'm looking for a solution in which the default language will not be compiled in the app.js, but loaded after when require.js has checked the browser locale.
Ok I've got it. You have to set set root to false in the base i18n.js file:
define({
"root": false,
"de": true,
"en": true
});
In this case only the above json will be rendered in your optimized version. And after loading require.js decide which langauge to load. Note that you lost the default language and you have to make sure to set all properties in all your languages.
Related
I'm using latest version of nextjs with i18n config in next.config.js file:
module.exports = {
i18n: {
locales: ["en", "vi"],
defaultLocale: "vi",
},
};
This should make "vi" (Vietnamese) as default language but seem the routing keeps redirect to /en
The tag always has lang="en" as well
Is it because vi is not supported or I need to config something else? Thank you!
It's because of your Accept-Language header which sent by your browser. Check the browser's language setting and chaning it into Vietnamese and it would be fine.
I have a ExtJS application where the disabledCache is set to true by default. Now I want to allow caching via
Ext.Loader.setConfig({
enabled: true
,disableCaching: false
})
Now my application has a hole bunch of controllers, and as far as I understood Ext.Loader downloads these files via the framework. I try to figure out, how to set the headers for the requests which are downloading those files, because I want to define an expiration for those cached files like:
proxy:{
headers: { 'Cache-Control': 'max-age:86400, s-maxage=86400'},
noCache: false
}
Is it possible to define a max-age for the controllers, and if yes, where can I do that.
Or am I horribly wrong with this line of thoughts?
EDIT:
After further research I've seen, that Ext.Loader is not supposed to be used in production, but I fear that has already been done. It would still be neat to know how do edit the caching behaviour on Ext.Loader.
I am using angular2 for web development, and Jenkins for continuous integration, when i release code at the end of every sprint, it gets deployed on CI Server.
But, when users load the UI, they do not get the new UI changes by default, they have to clear the cache ( I do not want users to clear the cache or disable there cache just for this UI)
How can I handle programatically for the browser to not cache old files and reload the new changes by default (atleast in development)
Note:
I presently set:
import { enableProdMode } from '#angular/core';
enableProdMode();
None of the documentation states this to be the reason and removing it does not help either.
Two popular ways of accomplishing this "cache busting" are:
Using a query string on the end of your file request that gives a version number. For example, when you create a javascript file you would name it "my-file.js". Then in your HTML you would request it as:
<script type="text/javascript" src="my-file.js?v=1.0.0"></script>
When you make some changes to your file you update your request to:
<script type="text/javascript" src="my-file.js?v=1.0.1"></script>
You can use whatever query string you want as long as you change it. The browser sees it as a different file, but it should have no effect on what file your server sends as a response.
If you are using a bundler like webpack or systemJS they can automatically include a hash as part of the file name. This hash can change based on the file contents so that when the contents change the file name changes and thus the file is no longer cached. The caveat with this is that you need to update the file name you are requesting in your HTML. Again, most tools have a way to automatically do this for you.
A webpack example config to accomplish this is:
output: {
path: 'dist',
publicPath: '/',
filename: 'js/[name].[chunkhash].js'
},
and then use the HtmlWebpackPlugin to auto-generate your index.html with the correct file names injected (with inject: true):
plugins: [
new HtmlWebpackPlugin({
filename: '../index.html',
template: './index.html',
inject: true
}), ...
More info on webpack file naming:
https://github.com/webpack/docs/wiki/Configuration#output
More info on html webpack plugin:
https://github.com/ampedandwired/html-webpack-plugin#basic-usage
I fixed it using a special .htaccess file. Just uncomment the "BROWSER CACHING" part:
https://gist.github.com/julianpoemp/bcf277cb56d2420cc53ec630a04a3566
This is my first experience with AngularUI Router, so I guess I'm making a newbie error and hope somebody can guide me.
I've configured a single-page application to use Angular UI Router in HTML5 mode and it all seems to work as expected.
.config([
"$stateProvider", "$urlRouterProvider", "$locationProvider",
function ($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider.state("concept", {
url: "/concepts/:conceptKey",
templateUrl: "/templates/concept-view.html",
controller: "conceptViewController",
resolve: {
concept: [
"$stateParams", "conceptsApi",
function ($stateParams, conceptsApi) {
return conceptsApi.getConcept($stateParams.conceptKey);
}
]
}
});
$urlRouterProvider.otherwise("/");
$locationProvider.html5Mode(true);
}
])
However, the same page also contains some links to other static pages on the same site, using relative URLs. Prior to installing Angular routing, these links worked correctly, but now they are broken. Specifically, clicking any one of these links correctly changes the browser address bar, but does not trigger navigation to that destination page.
I assume I need to add something to tell the routing configuration to ignore certain URL patterns, but I haven't found any information that shows me how to do this. Any suggestions please?
Thanks,
Tim
After some investigation I discovered that this issue is not specifically related to Angular UI Router. The same behavior is also present in the native AngularJS routing mechanism and is caused by the link rewriting logic implemented by $location, as described in this documentation.
Further discussion of the problem is here.
I found two possible solutions, both of which seem to work well:
Explicitly target links to static pages: By including the attribute target="_self" in any links to static pages (i.e. pages that fall outside the defined Angular routing scheme) they will be ignored by AngularJS and thus rendered correctly.
Disable link re-writing: When configuring Angular routing in HTML5 mode, two syntax formats are supported. The simplest format ...
$locationProvider.html5Mode(true);
... enables HTML5 mode with the default configuration. However, the long-form syntax provides access to additional configuration properties, one of which solves the above problem by disabling Angular's default behavior of intercepting and re-writing link URLs:
$locationProvider.html5Mode({
enabled: true,
requireBase: false,
rewriteLinks: false
});
I used the 2nd solution and it appears to have no adverse effect on the behavior of URLs defined in the routing scheme. This solution appears to work equally well with Angular UI Router and with native AngularJS routing.
I'm using the jQuery .get() function to load in a template file and then display the loaded HTML into a part of the page by targeting a particular DOM element. It works well but I've recently realised for reasons that confound me that it is caching my template files and masking changes I have made.
Don't get me wrong ... I like caching as much as the next guy. I want it to cache when there's no timestamp difference between the client's cache and the file on the server. However, that's not what is happening. To make it even odder ... using the same function to load the templates ... some template files are loading the updates and others are not (preferring the cached version over recent changes).
Below is the loading function I use.
function LoadTemplateFile ( DOMlocation , templateFile , addEventsFlag ) {
$.get( templateFile , function (data) {
$( DOMlocation ).html(data);
});
}
Any help would be greatly appreciated.
NEW DETAILS:
I've been doing some debugging and now see that the "data" variable that comes back to the success function does have the newer information but for reasons that are not yet clear to me what's inserted into the DOM is an old version. How in heck this would happen has now become my question.
You can set caching to off in the jQuery.get() call. See the jQuery.ajax() doc for details with the cache: false option. The details of how caching works is browser specific so I don't think you can control how it works, just whether it's on or off for any given call.
FYI, when you turn caching off, jQuery bypasses the browser caching by appending a unique timestamp parameter to the end of the URL which makes it not match any previous URL, thus there is no cache hit.
You can probably also control cache lifetime and several other caching parameters on your server which will set various HTTP headers that instruct the browser what types of caching to allow. When developing your app, you probably want caching off entirely. For deployment, I would suggest that you want it on and then when you rev your app, the safest way to deal with caching is to change your URLs slightly so the new versions of your URLs are different. That way, you always get max caching, but also users get new versions immediately.
$get will always cache by default, especially on IE. You will need to manually append a querystring, or use the ajaxSetup method to bust the cache.
As an alternative, I found in the jQuery docs that you can just override the default caching. For me I didn't have to convert all of my $.get over to $.ajax calls. Note that this also overrides default behavior for all other types of calls, like $.getScript which has the opposite default behavior of cache: false from $.get.
https://api.jquery.com/jquery.getscript/
$.ajaxSetup({
cache: false
});