I am attempting to use i18next with Expo, with multiple translation files however I keep getting the following errors:
i18next::translator: missingKey en Common NextSteps NextSteps
i18next::backendConnector: loading namespace Common for language en failed, [TypeError: Network request failed]
My config file is:
import i18n from 'i18next';
import Backend from 'i18next-http-backend';
import { initReactI18next } from 'react-i18next';
i18n
.use(Backend)
.use(initReactI18next)
.init({
backend: {
loadPath: './translations/en/{{ns}}.json',
},
debug: true,
fallbackLng: 'en',
ns: ['Common'],
defaultNS: 'Common',
});
export default i18n;
In my app screen i am using the hook:
const [t] = useTranslation(['Common'])
and accessing this with:
<Text>{t('Common:NextSteps')}</Text>
The translation files are in the top level at:
I can't find any clear examples of using multiple JSON files with Expo. Thanks
I suspect expo, like react-native is not hosting the translations so they could be fetched via i18next-http-backend. So I would suggest you load the translations without i18next-http-backend. As resources on init: https://www.i18next.com/how-to/add-or-load-translations#add-on-init or with the help of i18next-resources-to-backend: https://www.i18next.com/how-to/add-or-load-translations#lazy-load-in-memory-translations
Related
I am running a React native app with react-i18next and the backend addon. The app works and loads translations perfectly well on Android and Web, but on iOS it fails to load the translations at all.
When i18n is initializing it gives the following error. I am not certain whether the illegal operation error is the cause, but it seems pretty likely.
i18next::backendConnector: loading namespace translation for language en failed, [TypeError: Network request failed]
. . .
Error: EISDIR: illegal operation on a directory, read
at Object.readSync (fs.js:614:3)
at tryReadSync (fs.js:383:20)
at Object.readFileSync (fs.js:420:19)
Is there a configuration somewhere for react-native to let iOS read from the public folder?
My i18n.js:
import * as Localization from 'expo-localization'
import i18n from 'i18next'
import Backend from 'i18next-http-backend'
import { initReactI18next } from 'react-i18next'
i18n
.use(Backend)
.use(initReactI18next)
.init({
compatibilityJSON: 'v3',
debug: true,
fallbackLng: 'en-US',
interpolation: { escapeValue: false },
})
i18n.changeLanguage(Localization.locale)
export default i18n
and my translation file, located at public/locales/en-US/translation.json
{
"outOfStock": "Out of Stock"
}
I suspect expo, like react-native is not hosting the translations so they could be fetched via i18next-http-backend.
So I would suggest you load the translations without i18next-http-backend.
As resources on init: https://www.i18next.com/how-to/add-or-load-translations#add-on-init
or with the help of i18next-resources-to-backend: https://www.i18next.com/how-to/add-or-load-translations#lazy-load-in-memory-translations
I'm building a sveltekit project. One thing I've done is created a custom type of file which is converted to a *.svelte file upon building or running the development server. By default, sveltekit includes the rollup extension rollup-plugin-dynamic-import-variables which is trying to parse my custom file (who knows why?) and throwing an "unexpected token" error. I'm trying to configure that extension to ignore my custom files, but so far without success. Here is my attempted svelte.config.js file:
// #type {import('#sveltejs/kit').Config}
var config;
import adapter from '#sveltejs/adapter-static';
import dynamicImportVariables from 'rollup-plugin-dynamic-import-variables';
config = {
kit: {
// --- hydrate the <div id="svelte"> element in src/app.html
target: '#svelte',
adapter: adapter({
pages: 'build',
assets: 'build',
fallback: null
}),
vite: {
plugins: [
dynamicImportVariables({
warnOnError: true,
exclude: '**'
})
]
}
}
};
export default config;
To be honest about it, I don't use dynamic imports anywhere and therefore would accept as a solution the complete disabling of the extension. But anything that would get it to ignore my custom files would also work.
UPDATE: SvelteKit 1.0.0-beta now requires pages/endpoints to follow a specific naming pattern, so explicit file exclusion should no longer be needed.
SvelteKit specially handles files in the routes/ directory with the following filenames (note the leading + in each filename):
+page.svelte
+page.js
+page.server.js
+error.js
+layout.svelte
+layout.js
+layout.server.js
+server.js
All other files are ignored and can be colocated in the routes/ directory.
If, for some reason, you need to have a file that has a special name shown above, it's currently not possible to exclude that file from special processing.
Original outdated answer:
The rollup-plugin-dynamic-import-variables is actually included by Vite. To configure Vite's plugin, set the build.dynamicImportVarsOptions property:
// svelte.config.js
/** #type {import('#sveltejs/kit').Config} */
const config = {
kit: {
// hydrate the <div id="svelte"> element in src/app.html
target: "#svelte",
vite: {
build: {
dynamicImportVarsOptions: {
exclude: [/node_modules/, /\.starbucks$/],
},
},
},
},
}
export default config
But that's not going to fix the problem...
SvelteKit processes all files under src/routes/ so that they're automatically imported in the output application (in .svelte-kit/build/app.js), which will result in the same error.
Option 1: Private modules
You could exclude a src/routes/*.starbucks file by making it a private module, which has a leading underscore in the filename:
src/routes/_home.starbucks 👈
src/routes/_index.starbucks 👈
src/routes/index.svelte
Option 2: Move files outside src/routes
Alternatively, move those *.starbucks files outside of src/routes/ (e.g., into src/starbucks/ or src/lib/):
src/routes/index.svelte
src/starbucks/home.starbucks 👈
src/starbucks/index.starbucks 👈
src/lib/home.starbucks 👈
src/lib/index.starbucks 👈
I am trying to add a custom favicon to my NestJs documentation. However, I am a bit lost on how the path file gets resolved and not sure how to achieve this.
I am using nestjs/swagger module version 3.1.0 and trying to pass the path file like so when initializing the Swagger Module.
My main.ts file
SwaggerModule.setup('/v1/docs', app, document, {
customCss: CUSTOM_STYLE,
customSiteTitle: 'My API Documentation',
customfavIcon: './public/favicon.jpg'
});
Searched on the github issues and didn't find anything useful. And as you can see from the code I was able to modify the CSS styles, but I cannot figure out how to make the favicon custom.
Appreciate any help
I have added the custom favicon to my swagger docs using following:
The first thing you make sure is, in your main.ts, the app is initialized with the following:
const app: NestExpressApplication = await NestFactory.create(...)
To serve static content you must initialize your app with NestExpressApplication.
The next thing is to allow the Nest application to look for public content using the following in your main.ts after initialization:
app.useStaticAssets(join(__dirname, '..', 'public'));
Also, create a public directory in your root of the application and paste your favicon.jpg file in it.
Now its time to initialize the Swagger in main.ts
SwaggerModule.setup('/v1/docs', app, document, {
customCss: CUSTOM_STYLE,
customSiteTitle: 'My API Documentation',
customfavIcon: '../favicon.jpg'
});
You must give a relative path to the root of the application like ../favicon.jpg in case our main.ts is in src folder in root of the application.
Alternative solution, just host your favicon and reference it with external url
SwaggerModule.setup('api', app, getSwaggerDocument(app), {
...
customfavIcon:
'https://[your-bucket-url].com/.../anything.png',
});
To iterate on pravindot17's answer, now there's the #nestjs/serve-static package for hosting static files. Which avoid us from type-casting the Nest.js client and relying on our implicit assumption that we're running an Express-backed Nest.js server.
After installing the package, you hook it into your src/app.module.ts. This configuration expects that the root of your project has a /public/ folder where you store your static assets.
import { Module } from '#nestjs/common';
import { ServeStaticModule } from '#nestjs/serve-static';
import { join } from 'path';
#Module({
imports: [
// Host static files in ../public under the /static path.
ServeStaticModule.forRoot({
/**
* Config options are documented:
* https://github.com/nestjs/serve-static/blob/master/lib/interfaces/serve-static-options.interface.ts
*/
rootPath: join(__dirname, '..', '..', 'public'),
serveRoot: '/static',
}),
// ...
})
export class AppModule {}
Now my own preference is using an absolute path rather than relative, as it makes it independent from the path we picked to host our API documentation under.
SwaggerModule.setup('/v1/docs', app, document, {
customfavIcon: '/static/favicon.jpg'
});
One last note is that this configuration hosts static files from /static/*, this is done to prevent that API calls to non-existing endpoints show an error message to the end-user that the static file cannot be found.
Otherwise, all 404's on non-existing endpoints will look something like:
{"statusCode":404,"message":"ENOENT: no such file or directory, stat '/Users/me/my-project/public/index.html'"}
Question
What do I need to do to get my Angular application to allow me to use the templateUrl property of the Component decorator? When you create a new Rails 5.1 application and use the flag --webpack=angular, it gives you a proof of concept Angular application, but as soon as I started creating more components, I began to recognize that I don't know how to refer to the correct path that the templates are being served. I'm not even sure if they are being served, to be honest.
What I've tried
Tried many different variations of the path, from just the file name all the way to the root of the application, one folder at a time.
Googling for someone else running into the same problem.
include the CommonModule in my imports in app.module.ts.
Background
I'm really used to using the Angular CLI and I don't remember ever having an issue using the templateUrl property. What is different about an Angular CLI project to what's given to you in a Rails 5.1 app in terms of configuration affecting templates? Would I be able to use Angular CLI in a Rails 5.1 app without having to change much of the Rails app itself?
Can be done. But this needs a different webpack loader setup and several minor tweaks.
But first: shopping!
$ yarn add \
html-loader \
awesome-typescript-loader \
angular2-template-loader \
#types/node \
--dev
With all required packages installed replace config/webpack/loaders/angular.js with this:
const {env} = require('../configuration.js');
isProd = env.NODE_ENV === 'production';
module.exports = {
test: /\.ts$/,
use: [
{
loader: 'awesome-typescript-loader',
options: { useCache: !isProd }
},
'angular2-template-loader'
]
};
angular2-template-loader scans your Component decorators for the templateUrl argument and replaces it with something like template: require('...')'. The require() call is the reason for installing #types/node by the way.
awesome-typescript-loader is a bit more optimized than the default ts-loader (which will probably work here as well, but I didn't test it).
So far so good. Next we need to tell webpack how to actually load HTML files. Add config/webpack/loaders/html.js with the following content:
module.exports = {
test: /\.html$/,
loader: 'html-loader',
};
Nothing obscure here. Moving on.
In your Javascript app add type informations for *.html files to app/javascript/hello_angular/html.d.ts:
declare module "*.html" {
const content: string
export default content
}
This tells the TypeScript compiler that require('template.html') returns a string.
Last but not least you have add .html to the recognized extensions in config/webpacker.yml:
default: &default
# ...
extensions:
# ...
- .html
# ...
Now you should be good to go:
import { Component } from '#angular/core';
#Component({
selector: 'hello-angular',
templateUrl: './template.html'
})
export class AppComponent {
name = 'Angular!';
}
Don't forget to restart bin/webpack-dev-server.
Theoretically you could do the same for styleUrls. But this is more tangled with rails/webpacker and you would loose some of it's features.
I've been trying to set routing to my ionic2 app which is still under development. I'm completely new to the concept of routing.So far whatever I've done is based on NavCtrl.push() or NavCtrl.setRoot().I want to know if routing is possible in ionic2.
But on following the code from official website:https://angular.io/docs/ts/latest/guide/router.html. I got a few errors while running the app. Here is my app.routing.ts file which I created for routing.
import { Routes, RouterModule } from '#angular/router';
import { Contest } from '../pages/contest/contest';
export const appRoute: Routes = [
{ path: '', redirectTo: 'Contest', pathMatch: 'full' },
{ path: 'Contest', component: Contest}
]
export const appRouting = [
RouterModule.forRoot(appRoute)
];
I imported this statement into app.component.ts and injected it into the constructor.
import { Router } from '#angular/router';
constructor(public platform: Platform,protected _router: Router) {
this.initializeApp();
In the app.module.ts I imported the following statements and also set them in the imports inside #ngModule
import { RouterModule, Routes } from '#angular/router';
import {appRouting} from './app.routing';
imports: [appRouting,
IonicModule.forRoot(MyApp)
]
I put the <router-outlet></router-outlet>
in my app.html file.On doing all this when I try to run I get the following errors.
Runtime Error:
WEBPACK_IMPORTED_MODULE_0__angular_core.Version is not a constructor
Typescript Error:
Module '"C:/Users/Impromptu_coder/dem/node_modules/#angular/core/index"' has no exported member 'NgProbeToken
Typescript Error:
Module '"C:/Users/Impromptu_coder/dem/node_modules/#angular/core/index"' has no exported member 'Version'.
I have gone through many sources on the internet about routing in ionic2 and angular2 but most of them seem to be deprecated. Here are the current versions
I'm using:
Ionic2 : v2.2.1
npm: 3.10.10
cordova : 6.5.0
Angular2: Final Release rc5
Kindly tell me what is the exact procedure to set up routing in my app. Do i need to install any dependencies?
Make sure you're dependencies are set according to what's specified in ionic change log:
https://github.com/driftyco/ionic/blob/master/CHANGELOG.md
Is there a reason you want to use angular routing in your ionic 2 app? The ionic 2 navigation system is very intuitive and completely different from that of angular. I would suggest sticking with the built in ionic navigation unless you can define a very real need to do otherwise. Unless you're just trying to use angular navigation out of curiosity. In that case, get your dependencies up to date and give it another try.