I updated the source code of my app from Angular6 to Angular12 - yes, I missed it to update it more often.
Now the IU language is not changing anymore. I am using i18n. It seems like the html is not applying the translation. Because I can still load the XLF file from the API, but the translations are not shown in the UI.
In the Angular app I have to following code in my main.ts:
const httpClient: HttpClient = injector.get(HttpClient);
httpClient.get(localizationUrl, {responseType: "text"})
.subscribe(res => {
const translations = res;
let locale = "de-DE";
let respCulture = /(?:(?:target-language)="([\w-]+)")/i.exec(translations);
if (respCulture)
locale = respCulture[1];
platformBrowserDynamic().bootstrapModule(AppModule, {
// missingTranslation: MissingTranslationStrategy.Warning,
providers: [
{provide: LOCALE_ID, useValue: locale},
{provide: TRANSLATIONS, useValue: translations},
{provide: TRANSLATIONS_FORMAT, useValue: "xlf"}
]
});
},
error => console.log(error));
The locale was always "de", I also tried "de-DE" but it does not change the behavior.
In my html I am using the i18n like this:
<h3 i18n="##settings-tab-header">You will receive your incoming invoices automatically in PDF format.</h3>
I tried to find a problem, comparing my code to https://angular.io/guide/i18n , but I cant find anything.
Also I tried to comment the "provide: LOCALE_ID.." and "provide: TRANSLATIONS_FORMAT.." but it did not help me.
Does anyone have any ideas?
Thanks!
I solved it now by providing the translations in the app. Therefore I lost the benefit of changing the translations without app deployment.
Related
I am using Laravel+VueJs. I stuck on one thing. I am trying to load a new view using laravel route. I am using axios.
getRelatedChat(id) {
return axios.get('/chat/'+id).then(({ data }) => {
// document.write(data)
});
}
The code of whole view is coming in console as output, but i want to load it like window.url does for us. Have no idea how to do.
Vue has its own router. If you want to load a new page you can still use axios to get the data you want to show in the next page you want to open. Just try the Vue Router
I was making a nonsense. Actually there is no need to load the view. I can update some variable that are using on present component just like this:
axios.get('/chat/json/'+id).then(({ data }) => {
this.messages =data.messages;
this.withUser = data.user;
}
I am new to UI coding and started using react-admin for putting some simple pages. Everything went well and we are able to host pages correctly. But we have noticed random issues where the background image is filling up the entire screen or sometimes the whole page gets reduced to the hamburger menu. I have disabled the registerServiceWorker to stop having my pages in cache. Not sure if this is causing the weird UI behavior.
I don't know why you get those issues, the description is way too generic and it seems you don't have any idea what the problem can be, probably due to being new to the area. Either way the kind of problem you appear to have is probably related to CSS which is a way give style to your page. But React Admin doesn't use CSS directly, you can use it that way, but for more dynamic way to style the page the Material-ui library uses a thing called JSS to apply the styles.
There are many libraries that are being used together in order to produce React Admin, you should have an understanding of the most important ones in order to do something fancy. My advice to you since you are new, and you pretend to use React Admin, first use what React Admin offers and when you feel comfortable using that components and have a general grasp how the framework works, after that start implementing your own components that don't have a direct relation to React Admin but use some of the same libraries of React Admin.
Also check if you are creating a React Admin app using the <Admin> component or are embedding React Admin in another app since the second is more probable to produce bugs.
After some debugging, I think i figured out the cause of this issue. I had a custom button to duplicate a row (basically post a create and route to edit page on the new id). For some reason, the rendering of that button seems to have caused this issue inconsistently. The actual button works fine but causes this inconsistent behavior. Below is the code for that button. Is there any issue with the below?:
export default class DuplicateButton extends Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
this.state = ({ redirect: false });
var redirectPath = '';
}
handleClick = (props) => {
var
{
push, record, resourceName
} = this.props;
let tempRecord = record;
var result = '';
console.log(this.props);
var p = restDataProvider(CREATE, this.props.resource + "/" + tempRecord.id, { data: tempRecord }).then(resp => {
result = resp.data;
let routePath = '/' + this.props.resource + '/' + result.id;
console.log(routePath);
this.redirectPath = routePath;
this.setState({ redirect: true });
return result;
});
}
render() {
if (this.state.redirect) {
console.log('Redirect to Edit page');
return <Redirect push to={this.redirectPath} />;
}
return <Button variant="flat" color="primary" label="Duplicate Entry" onClick={this.handleClick}><DuplicateIcon /></Button>;
}
}
Ok so i am not looking for an example more of help with an approach i am primarily a java developer so please excuse (and correct) the terminology if it need be. This is also why i need help as i am still early on into my journey into angular.
So i am using angular 5, along with ui-router. I am trying to design a three tabbed page [view, html, css] where the html and css will be text areas where a user will enter said thing, then , the view will be the rendering of that. There will be data (can be fetched prior to or at the time of rendering the view) that will bind to that html. The user will basically be putting in angular templates.
I have been reading this example but not sure if that is the proper approach.
this article had the solution
https://blog.angularindepth.com/here-is-what-you-need-to-know-about-dynamic-components-in-angular-ac1e96167f9e
basically it looks like this
#ViewChild("ancc", { read: ViewContainerRef }) container;
#Input() property:Property = new Property();
constructor(private resolver: ComponentFactoryResolver,private _compiler: Compiler){
console.log("hit layout constructor");
}
view(){
// create the template
const template = '<span>generated on the fly: {{property.label}}</span>';
//clear out the old instance
this.container.clear();
const tmpCmp = Component({template: template})(class {
});
const tmpModule = NgModule({declarations: [tmpCmp]})(class {
});
this._compiler.compileModuleAndAllComponentsAsync(tmpModule)
.then((factories) => {
const f = factories.componentFactories[0];
//attach the component to the view
const cmpRef = this.container.createComponent(f);
//bind the data
cmpRef.instance.property = this.property;
})
}
hope this helps someone!
I want to have separate config for ckditor.
For example in page temp1.html i want to have 'links' and in page temp2.html i don't want to have links.
Whats the good config for this?
I think configuration in below code is proper place for do this.
//var editor_data = CKEDITOR.instances.editor1.getData();
$('textarea#editor').ckeditor(
function () {
/* callback code */
},
//configuration
{
toolbar: 'Basic',
language: 'en',
});
You can use config.removePlugins to control the presence of certain plugins, like link (also config.removeButtons). But please note that since CKEditor 4.1, by doing this you restrict the content of the editor associated with the plugin or button (no link plugin or button = no links in the content).
So if you want to share the same content between different templates which use a different sets of plugins you need to explicitly expand config.extraAllowedContent of some editors:
$('#editor-linkless').ckeditor( function() {}, {
removePlugins: 'link',
extraAllowedContent: 'a[href,name,id,target]'
} );
$('#editor-regular').ckeditor();
JSFiddle.
See the official guide about ACF. Also this answer to know more.
Because Sencha Touch lacks an official way doing internationalization I'm writing my own small set of utility methods. I don't won't to embed another lib like jQuery to use already existing i18n plugins. At the moment I'm in trouble figuring out the best way.
Currently I've a class implemented as a Singleton. In the constructor I determine the language and load the corresponding language file.
At the moment I'm using Sencha methods and define a model and load the data (json) into a store. I think it's kind of convenient. Here a snippet from the constructor where I load the data:
Ext.define('Translation', {
extend: 'Ext.data.Model',
idProperty: 'key',
fields: [
{name: 'key', type: 'string'},
{name: 'translation', type: 'string'}
],
proxy: {
type: 'ajax',
url: 'res/translation-'+lang+'.json',
//appendId: false,
reader: {
type: 'json',
}
}
});
_store = Ext.create('Ext.data.Store', {
model : 'Translation',
autoLoad: true
});
The problem here is that the load is async (no way doing a synchronous call with sencha?!) which means that the application may start to load before this stuff is finished. I need the data because the views rely on it.
Ext.Loader.setConfig({enabled:true});
Ext.application({
name: 'MyApp',
controllers: ['Ctr1', 'Ctr2'],
models: ['Model1', 'Model2],
init: function() {
},
launch: function() {
}
});
The only solutions I've found so far would be
use a callback and wrap the app initialization inside.
Don't use Sencha and do the ajax request stuff manually.
Don't use Ajax at all. Put translations for all languages into a javascript file, include it in index.html and make sure the utility class has access to the object.
There is already an i18N extension have a look here.
https://github.com/elmasse/Ext.i18n.Bundle-touch
There is no easy way to do this with Sencha Touch. Your best bet would be to make an synchronous Ajax request for a json file with translations, and then let your application launch after that.
See this post this could help : sencha touch i18n basics
And my answer,, maybe it could help you.
For your own strings (not talking about native touch component) you could do something like this.
1) In your index.html in the head section, load a LocaleManager.js file (whatever the name) before the
<script id="microloader" type="text/javascript" src="sdk/microloader/development.js"></script>
In your localeManager, depending on your browser's language load the resource file corresponding to your language (myStrings-fr.js | myStrings-en.js )
You can do something like this to get the language in the browser:
window.navigator.language || window.navigator.userLanguage || window.navigator.browserLanguage || window.navigator.systemLanguage
2) Create your resources files with your translated string
It should look like this for the english version (myStrings-en.js) :
var myStrings = {
MyPackage1: {
myString1: 'Seach...'
}};
It should look like this for the french version (myStrings-fr.js) for example :
var myStrings = {
MyPackage1: {
myString1: 'Recherchez...'
}};
3) In your sencha touch code, for example for a searchfield place holder value
xtype: 'searchfield',
id: 'searchToolbarItem',
placeHolder: myStrings.MyPackage1.myString1
Hope it will help.
Another solution could be to modify the build process of your sencha touch app and create localized versions of your app when building it. So there would be one version per language. Then depending on the brower language you would load the right version of your app when loading the app in the browser.