Im trying to add translations to spartacus. I managed to change config and have the regular translation JSON on my local, but when I try to add new translations to my HTML i always get the same issue:
"ERROR Error: The pipe 'cxTranslate' could not be found!"
This is what I have in my code:
<label for="sortDocType">Type of document: {{ 'common.back' | cxTranslate }}</label>
And my config Module:
import { ConfigModule, I18nConfig } from '#spartacus/core';
import { NgModule } from '#angular/core';
import { translationChunksConfig } from '#spartacus/assets';
#NgModule({
declarations: [],
imports: [
ConfigModule.withConfig({
i18n: {
backend: {
loadPath: '../../assets/i18n-assets/{{lng}}/{{ns}}.json'
},
chunks: {
...translationChunksConfig,
},
fallbackLang: 'en'
},
} as I18nConfig)
],
})
Please import I18nModule in the same module that declares your custom component:
#NgModule({
imports: [
I18nModule,
/*...*/
],
declarations: [
MyComponent,
/*...*/
],
/*...*/
})
export class MyModule {}
Related
I am getting an error when starting a dev server:
Error: EPERM: operation not permitted, scandir '/var/www/html/rootfs/host_mnt/c
I have a Laravel - Inertia - Vue3 application that I am trying to build with Vite for development.
From vite.config.js
import {defineConfig} from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '#vitejs/plugin-vue';
export default defineConfig({
plugins: [
laravel({
input: 'resources/js/app.js',
refresh: true,
}),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
]
});
devcontainer.json
{
"name": "Mangrove Development Environment",
"dockerComposeFile": [
"../docker-compose.yml"
],
"service": "mangrove",
"workspaceFolder": "/var/`your text`www/html",
"settings": {},
"customizations": {
"vscode": {
"extensions": [
"felixfbecker.php-debug",
"ms-vsliveshare.vsliveshare",
"eamodio.gitlens",
"bmewburn.vscode-intelephense-client",
"mikestead.dotenv",
"amiralizadeh9480.laravel-extra-intellisense",
"ryannaddy.laravel-artisan",
"onecentlin.laravel5-snippets",
"onecentlin.laravel-blade",
"EditorConfig.EditorConfig",
"jcbuisson.vue",
"redhat.vscode-yaml"
]
}
},
"remoteUser": "sail",
//"postCreateCommand": "chown -R 1000:1000 /var/www/html"
"postCreateCommand": ""
// "forwardPorts": [],
// "runServices": [],
// "shutdownAction": "none",
}
I tried using "postCreateCommand": "chown -R 1000:1000 /var/www/html" in the devcontainer.json file, but this simply tries to turn over ownership of every single file on my Windows system's hard drive.
I have also tried inserting
server: {
watch: {
ignored: [
"rootfs/**/*",
],
}
}
Into the vite.config.js to perhaps ignore those files.
I'm implementing fullcalendar in my project that has Laravel 9 and Vue 3.
I think it is not loading the css as the on-screen calendar is looking like this: Calendar Image.
I have already made several settings. Even the Vue part is working because the calendar is working.
Below in the images are the settings that are today.
package.json
{
"private": true,
"scripts": {
"dev": "vite --host",
"build": "vite build"
},
"devDependencies": {
"axios": "^1.1.2",
"bootstrap": "^4.6.2",
"laravel-vite-plugin": "^0.6.0",
"lodash": "^4.17.19",
"postcss": "^8.1.14",
"sass": "^1.32.11",
"script-loader": "^0.7.2",
"vite": "^3.0.0"
},
"dependencies": {
"#fullcalendar/core": "^5.11.3",
"#fullcalendar/daygrid": "^5.11.3",
"#fullcalendar/interaction": "^5.11.3",
"#fullcalendar/list": "^5.11.3",
"#fullcalendar/timegrid": "^5.11.3",
"#fullcalendar/vue3": "^5.11.2",
"#popperjs/core": "^2.11.6",
"#vitejs/plugin-vue": "^3.1.2",
"laravel-echo": "^1.9.0",
"socket.io-client": "^2.3.0",
"vue": "^3.2.41",
"vue-toastification": "^2.0.0-rc.5"
}
}
vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '#vitejs/plugin-vue';
import fs from 'fs';
const host = 'site.com.br';
export default defineConfig({
plugins: [
laravel({
input: ['resources/sass/app.scss', 'resources/js/app.js'],
refresh: true,
}),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
}
}
})
],
server: {
host,
hmr: { host },
https: {
key: fs.readFileSync('C:\\laragon\\etc\\ssl\\privada25296.key'),
cert: fs.readFileSync('C:\\laragon\\etc\\ssl\\certificado25296.crt'),
},
},
});
index.vue
<script>
import { useToast } from "vue-toastification";
import '#fullcalendar/core/vdom' // solves problem with Vite
import FullCalendar from '#fullcalendar/vue3'
import dayGridPlugin from '#fullcalendar/daygrid'
import timeGridPlugin from '#fullcalendar/timegrid'
import interactionPlugin from '#fullcalendar/interaction'
import { INITIAL_EVENTS, createEventId } from './event-utils'
export default {
components: {
FullCalendar // make the <FullCalendar> tag available
},
data() {
return {
calendarOptions: {
plugins: [ dayGridPlugin, timeGridPlugin, interactionPlugin ],
initialView: 'dayGridMonth',
initialEvents: INITIAL_EVENTS, // alternatively, use the `events` setting to fetch from a feed
}
}
},
mounted() {
const toast = useToast();
this.loadUserCustomers();
Echo.channel('agendamentos_database_user_customer_created')
.listen('UserCustomerCreated', (e) => {
toast.success('Novo cliente vinculado!')
});
},
methods: {
loadUserCustomers() {
axios.get('/api/calendar')
.then(response => {
console.log( response.data.data );
//this.userCustomers = response.data
})
.catch(response => {
console.log('Erro')
})
}
},
}
In the fullcalendar documentation, the following is mentioned about CSS.
CSS: All of FullCalendar’s CSS will be automatically loaded as long as your build system is able to process .css file imports. See Initializing with an ES6 Build System for more information on configuring your build system. https://fullcalendar.io/docs/vue#:~:text=ticket%20%23152.-,CSS,-All%20of%20FullCalendar%E2%80%99s
When I access link about ES6 Build System, it is described that I need to use webpack, and in the Laravel application, vite is used.
Can anyone help me with this problem please?
I solved it by loading allocate the size of the calendar
hope this solve your problem and I did it with the cdn
calendar.render();
calendar.setOption('height', 700);
I'm using Laravel 9 application. Laravel latest version has replaced webpack to vite. I was able to successfully run the app into my local environment but, while deploying the compiled assets to the AWS S3 I'm getting CORS error in the browser console.
Steps I did after running in local environment.
added ASSET_URL=https://****.s3.ap-south-1.amazonaws.com in my .env file
run npm run build
run aws s3 sync public/ s3://****/ --delete --exclude index.php --acl public-read
I can see that my .css and other files are loaded perfectly, but I'm getting CORS error only in the compiled js file.
I also added policy in my s3 bucket:
{
"Version": "2012-10-17",
"Id": "Policy1617109982386",
"Statement": [
{
"Sid": "Stmt1617109981105",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::****/*"
}
]
}
But this isn't helping me out.
My Vite config file looks like:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '#vitejs/plugin-vue';
export default defineConfig({
plugins: [
laravel({
input: 'resources/js/app.js',
refresh: true,
}),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
],
});
I also tried declaring cors in vite.config.js file:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '#vitejs/plugin-vue';
export default defineConfig({
plugins: [
laravel({
input: 'resources/js/app.js',
refresh: true,
}),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
],
server: {
cors: true
}
});
I'm unable to find any solution. Help me out.
Thanks.
Hey Have a look at setting CORS in the s3 bucket.
https://docs.aws.amazon.com/AmazonS3/latest/userguide/ManageCorsUsing.html
I have a gatsbyjs app with client-only routes that works fine locally but in production I can only access those routes when following a link but when typing the url directly in the browser i get a 404.
I had expected following the answer in this thread, but issue persists. Any hints or suggestions?
// app.json
{
"name": "User Resource",
"repository": "https://github.com/guanacone/fullstack_app",
"stack": "container",
"buildpacks": [
{
"url": "heroku/nodejs"
},
{
"url": "https://github.com/heroku/heroku-buildpack-static"
}
]
}
//static.json
{
"root": "public/",
"clean_urls": true,
"routes": {
"/user/**": "user/index.html"
}
}
// gatsby-config.js
module.exports = {
/* Your site config here */
plugins: [
'gatsby-plugin-layout',
{
resolve: 'gatsby-plugin-create-client-paths',
options: { prefixes: ['/user/*'] },
},
'gatsby-plugin-styled-components',
'gatsby-plugin-use-query-params',
],
};
// src/pages/user.js
import React from 'react';
import { Router } from '#reach/router';
import UserIndex from '../components/UserIndex';
import UserProfile from '../components/UserProfile';
import UserNew from '../components/UserNew';
import UserEdit from '../components/UserEdit';
import UserActivation from '../components/UserActivation';
const User = () => (
<Router basepath='/user'>
<UserIndex path='/' />
<UserProfile path='/:id' />
<UserNew path='/new' />
<UserEdit path='/:id/edit' />
<UserActivation path='/activation' />
</Router>
);
export default User;
I solved it by removing the heroku-buildpack-static and adding the following code to my express.js server.
app.get('/user/**', (req, res) => {
res.sendFile(path.join(`${__dirname}/public/user/index.html`));
});
I have a problem on debugging typescript using VSCode. I use angular v2.4.4, typescript v2.1.5, npm v3.10.10, and node v6.9.4.
tsconfig.json:
{
"compileOnSave": true,
"compilerOptions": {
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"mapRoot": "./",
"module": "es6",
"moduleResolution": "node",
"noEmitOnError": true,
"noImplicitAny": false,
"sourceMap": true,
"target": "es6"
},
"exclude": [
"node_modules"
]
}
launch.json:
{
// Use IntelliSense to learn about possible Node.js debug attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceRoot}\\app\\main.js",
"cwd": "${workspaceRoot}"
},
{
"type": "node",
"request": "attach",
"name": "Attach to Process",
"port": 5858
}
]
}
main.js:
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
//# sourceMappingURL=c:/workspace/myapp/main.js.map
Debug Console:
node --debug-brk=10387 --nolazy app\main.js
Debugger listening on [::]:10387
c:\workspace\myapp\app\main.js:1
(function (exports, require, module, __filename, __dirname) { import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
^^^^^^
SyntaxError: Unexpected token import
at Object.exports.runInThisContext (vm.js:76:16)
at Module._compile (module.js:542:28)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Timeout.Module.runMain [as _onTimeout] (module.js:604:10)
at ontimeout (timers.js:365:14)
at tryOnTimeout (timers.js:237:5)
at Timer.listOnTimeout (timers.js:207:5)
The compilation is done without any error. What should I do to fix this debug error?
I added the following code to give the clearer picture on how my web app works.
system.config.js:
System.config({
transpiler: 'typescript',
typescriptOptions: {emitDecoratorMetadata: true,
target: "es6",
module: "commonjs"},
map: {
'#angular': 'node_modules/#angular',
'rxjs' : 'node_modules/rxjs'
},
paths: {
'node_modules/#angular/*': 'node_modules/#angular/*/bundles'
},
meta: {
'#angular/*': {'format': 'cjs'}
},
packages: {
'app' : {main: 'main', defaultExtension: 'ts'},
'rxjs' : {main: 'Rx'},
'#angular/core' : {main: 'core.umd.min.js'},
'#angular/common' : {main: 'common.umd.min.js'},
'#angular/compiler' : {main: 'compiler.umd.min.js'},
'#angular/router' : {main: 'router.umd.min.js'},
'#angular/platform-browser' : {main: 'platform-browser.umd.min.js'},
'#angular/platform-browser-dynamic': {main: 'platform-browser-dynamic.umd.min.js'}
}
});
app.module.ts:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { RouterModule } from '#angular/router';
import {LocationStrategy, HashLocationStrategy} from '#angular/common';
import ApplicationComponent from './components/application/application';
import CarouselComponent from "./components/carousel/carousel";
import FooterComponent from "./components/footer/footer";
import NavbarComponent from "./components/navbar/navbar";
import ProductItemComponent from "./components/product-item/product-item";
import SearchComponent from "./components/search/search";
import StarsComponent from "./components/stars/stars";
import {ProductService} from "./services/product-service";
import HomeComponent from "./components/home/home";
import ProductDetailComponent from "./components/product-detail/product-detail";
#NgModule({
imports: [ BrowserModule,
RouterModule.forRoot([
{path: '', component: HomeComponent},
{path: 'products/:prodTitle', component: ProductDetailComponent}
]) ],
declarations: [ ApplicationComponent,
CarouselComponent,
FooterComponent,
NavbarComponent,
HomeComponent,
ProductDetailComponent,
ProductItemComponent,
SearchComponent,
StarsComponent],
providers: [ProductService,
{provide: LocationStrategy, useClass: HashLocationStrategy}],
bootstrap: [ ApplicationComponent ]
})
export class AppModule { }