we are using Spartacus version 4.2.1 and have an issue with the blinking translations when we start the application with the SSR. For example, we have custom SiteContextUrlSerializer, custom SiteContextConfigInitializer but it seems it is not the cause of the problem. Do you have any ideas where to investigate more? See blinking Filter button here
This is our Translation module config:
import { NgModule } from '#angular/core'
import { I18nConfig, I18nModule, provideConfig } from '#spartacus/core'
import { mbChunks } from './mb-chunks'
import { translations } from './translations'
#NgModule({
imports: [
I18nModule
],
providers: [
provideConfig({
i18n: {
resources: translations,
chunks: mbChunks,
fallbackLang: 'en'
}
} as I18nConfig)
],
exports: [
I18nModule
],
declarations: [],
})
export class MbI18nModule { }
Related
An example of the imports follows:
import { useAppDispatch, useAppSelector } from '~/redux/hooks'
import * as walletActions from '~/redux/wallet/actions'
import { actions, selectState as selectWalletState } from '~/redux/wallet/slice'
import { multichain } from '~/services/multichain'
import { config } from '~/settings/config'
In my tsconfig.json...
"compilerOptions": {
"baseUrl": ".",
"paths": {
"~/*":["./src/*"]
},
...
This all compiles, and typescript understands my imports; I can click around them in VSCode.
However, when I open the app in Expo, I get the error
Unable to resolve module ~/redux/hooks from ... ~/redux/hooks could not be found within the project or in these directories:
node_modules
Here is my babel.config.js
module.exports = function (api) {
api.cache(true)
return {
presets: ['babel-preset-expo'],
plugins: [
['react-native-reanimated/plugin'],
[
'module:react-native-dotenv',
{
envName: 'APP_ENV',
moduleName: '#env',
path: '.env',
},
],
[
'module-resolver',
{
alias: {
'~/': './src/',
},
},
],
],
}
}
I'd like to rename "Qty" into "Quantity"
Follow things I already tried:
In 'spartacus-configuration.module.ts'
i18n: {
resources: {
en: {
product: {
addToCart: {
quantity: 'Quantity'
}
}
}
}
}
in src/assets/i18n-assets/en/produkt
{
...
"addToCart": {
...
"quantity": "Quantity",
...
},
...
}
The easiest way to overwrite translation values is to provide a new resource in app.module.ts config.
Firstly, new object with specific translations should be defined:
export const translationOverwrites = {
en: {
product: {
addToCart: {
quantity: 'Quantity',
},
},
},
};
and then it should be provided after default Spartacus translations:
...
providers: [
provideConfig({
i18n: { resources: translations },
}),
provideConfig({
i18n: { resources: translationOverwrites },
}),
],
Example code can look like this:
import { translations } from '#spartacus/assets';
import { provideConfig } from '#spartacus/core';
import { HttpClientModule } from '#angular/common/http';
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { EffectsModule } from '#ngrx/effects';
import { StoreModule } from '#ngrx/store';
import { I18nModule } from '#spartacus/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { SpartacusModule } from './spartacus/spartacus.module';
export const translationOverwrites = {
en: {
product: {
addToCart: {
quantity: 'Quantity',
},
},
},
};
#NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
HttpClientModule,
AppRoutingModule,
StoreModule.forRoot({}),
EffectsModule.forRoot([]),
SpartacusModule,
I18nModule,
],
providers: [
provideConfig({
i18n: { resources: translations },
}),
provideConfig({
i18n: { resources: translationOverwrites },
}),
],
bootstrap: [AppComponent],
})
export class AppModule {}
For more information please look into Spartacus documentation: https://sap.github.io/spartacus-docs/i18n/#overwriting-individual-translations
The problem is that each time i fix my tabs they start working but if i restart my server i get the following error
RROR Error: Uncaught (in promise): Error: Cannot find module '../tab1/tab1.module'
Error: Cannot find module '../tab1/tab1.module'
I have done everything i know
This is my Tabs-routing.module.ts:
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { TabsPage } from './tabs.page';
const routes: Routes = [
{
path: '',
component: TabsPage,
children:[
{
path:'tab1',
children:[
{
path:'',
loadChildren:'../tab1/tab1.module#Tab1PageModule'
}
]
},
{
path:'tab2',
children:[
{
path:'',
loadChildren:'../tab2/tab2.module#Tab2PageModule'
}
]
},
{
path:'tab3',
children:[
{
path:'',
loadChildren:'../tab3/tab3.module#Tab3PageModule'
}
]
},
{
path:'tab4',
children:[
{
path:'',
loadChildren:'../tab4/tab4.module#Tab4PageModule'
}
]
},
{
path:'tab5',
children:[
{
path:'',
loadChildren:'../tab5/tab5.module#Tab5PageModule'
}
]
},{
path:'',
redirectTo: './tabs/tab1',
pathMatch:'full'
}
]
},{
path:'',
redirectTo: './tabs/tab1',
pathMatch:'full'
}
];
#NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class TabsPageRoutingModule {}
Try to change the loadChildren path:
children: [
{
path: 'tab1',
children: [
{
path: '',
loadChildren: () => import('../tab1/tab1.module').then(m => m.Tab1PageModule)
}
]
}]
Or
Try importing 'Tab1PageModule' in tabs.module.ts:
import { TabsPage } from './tabs.page';
import {Tab1PageModule} from '../tab1/tab1.module'; <-- Add this line
#NgModule({
imports: [
Tab1PageModule <-- Add this line
]
})
I'm wanted to add font-awesome in my universal NuxtJs app. so i used the vue-awesome package for that.
Now after istalling the package i got this error:
Unexpected identifier
After reading from nuxt repo on github (nuxt repo 1, nuxt repo 2), i realised that the issue comes when rendering it on the server. SSR.
So for dev sake i silenced it with :
in nuxt.config.js
plugins: [{ src: '~plugins/vue-awesome', ssr: false },]
After developing, i had to face it, and i got stuck at this error :
"Unexpected token <"
here is the code :
~/plugins/vue-awesome
import Vue from 'vue';
import Icon from 'vue-awesome/components/Icon.vue';
import './icons.js';
Vue.component('icon', Icon);
~/plugins/icons.js
import 'vue-awesome/icons/sign-in-alt'
import 'vue-awesome/icons/shopping-basket'
...
nuxt.config.js
module.exports = {
build: {
extend(config, ctx) {
if (ctx.isClient) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
})
} else {
config.externals = [ nodeExternals({
whitelist: ['vue-awesome']
})]
}
}
},
plugins: ['~plugins/vue-awesome.js']
}
Finanlly fixed it
nuxt.config.js
plugins: [
'~plugins/vue-awesome',
],
build: {
transpile: [/vue-awesome/]
},
I saw some tutorial, in ionic 2 to open the pdf which should not be downloadable to user. So i found this Git hub repo.
Now when I download the project and when I run the sample app.. the pdf is not opening in themeableBrowser..
It has all browser feature like :
inAppBrowser
themeableBrowser
AndroidPDF
But when I tried inAppBrowser it works fine. But I need to work with themeableBrowser becasue i need a pdf should not be a downloadable. if any one clear this issue of mine why this is not opening in android platform.
you can download the repo and you can use that.
please help me out. its a only source that i found to work..
Thanks
As stated on the ionic docs you can use this themeablebrowser which is same as the cordova themeablebrowser you are trying to use.
Here is the working code snippet:
In home.html file:
<ion-header>
<ion-navbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<button ion-button (click)="test()">Test browser</button>
</ion-content>
In home.ts file:
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { InAppBrowser } from '#ionic-native';
import { ThemeableBrowser, ThemeableBrowserOptions, ThemeableBrowserObject } from '#ionic-native/themeable-browser';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController, private themeableBrowser: ThemeableBrowser) {
}
test() {
const options: ThemeableBrowserOptions = {
statusbar: {
color: '#ffffffff'
},
toolbar: {
height: 44,
color: '#f0f0f0ff'
},
title: {
color: '#003264ff',
showPageTitle: true
},
backButton: {
image: 'back',
imagePressed: 'back_pressed',
align: 'left',
event: 'backPressed'
},
forwardButton: {
image: 'forward',
imagePressed: 'forward_pressed',
align: 'left',
event: 'forwardPressed'
},
closeButton: {
image: 'close',
imagePressed: 'close_pressed',
align: 'left',
event: 'closePressed'
},
customButtons: [
{
image: 'share',
imagePressed: 'share_pressed',
align: 'right',
event: 'sharePressed'
}
],
menu: {
image: 'menu',
imagePressed: 'menu_pressed',
title: 'Test',
cancel: 'Cancel',
align: 'right',
items: [
{
event: 'helloPressed',
label: 'Hello World!'
},
{
event: 'testPressed',
label: 'Test!'
}
]
},
backButtonCanClose: true
};
const browser: ThemeableBrowserObject = this.themeableBrowser.create('https://docs.google.com/viewerng/viewer?url=www.pdf995.com/samples/pdf.pdf', '_blank', options);
}
}
And in app.module.ts file add ThemeableBrowser from #ionic-native/themeable-browser to the providers.
After adding your app.module.ts file should look like:
import { BrowserModule } from '#angular/platform-browser';
import { ErrorHandler, NgModule } from '#angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '#ionic-native/splash-screen';
import { StatusBar } from '#ionic-native/status-bar';
import { ThemeableBrowser } from '#ionic-native/themeable-browser';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
#NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [
StatusBar,
SplashScreen,
ThemeableBrowser,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
Thats all the additions you need in your started ionic app for your themeable browser to work.
Tested it on android emulator.