I have loader that retrieves translate file:
export function translateLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http, "/i18n/", ".json");
};
My structure project is:
/src/app/app.module.js
/src/i18n/en.json
When I launch application I get this message:
ERROR {
JS: "headers": {
JS: "normalizedNames": {},
JS: "lazyUpdate": null,
JS: "headers": {}
JS: },
JS: "status": 404,
JS: "statusText": "ERROR",
JS: "url": "/data/data/org.nativescript.App/files/app/i18n/en.json",
JS: "ok": false,
JS: "name": "HttpErrorResponse",
JS: "message": "Http failure response for /data/data/org.nativescript.App/files/app/i18n/en.json: 404 ERROR",
JS: "error": "Not Found"
JS: }
It can not find file by path /data/data/org.nativescript.App/files/app/i18n/en.json after compiling.
Where I should set path settings?
My tsConfig:
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"noEmitHelpers": true,
"noEmitOnError": true,
"lib": [
"es6",
"dom",
"es2015.iterable"
],
"baseUrl": ".",
"paths": {
"~/*": [
"src/*"
]
}
},
"exclude": [
"node_modules",
"platforms"
]
}
I have tried:
return new TranslateHttpLoader(http, "../i18n/", ".json");
return new TranslateHttpLoader(http, "./../i18n/", ".json");
return new TranslateHttpLoader(http, "i18n/", ".json");
Now I get this error:
Angular is running in the development mode. Call enableProdMode() to enable the production mode.
JS: ERROR {
JS: "headers": {
JS: "normalizedNames": {},
JS: "lazyUpdate": null,
JS: "headers": {}
JS: },
JS: "status": 0,
JS: "statusText": "Unknown Error",
JS: "url": "./assets/i18n/en.json",
JS: "ok": false,
JS: "name": "HttpErrorResponse",
JS: "message": "Http failure response for ./assets/i18n/en.json: 0 Unknown Error",
JS: "error": {
JS: "originalStack": "Error: java.net.MalformedURLException: no protocol: ./assets/i18n/en.json\n at new c (file:///data/data/org.nativescript.App/files/app/vendor.js:1:1700209)\n at file:///data/data/org.nativescript.App/files/app/vendor.js:1:1565607\n at Object.onComplete (file:///data/data/org.nativescript.App/files/app/vendor.js:1:1566741)",
JS: "zoneAwareStack": "Error: java.net.MalformedURLException: no protocol: ./assets/i18n/en.json\n at new c (file:///data/data/org.nativescript.App/files/app/vendor.js:1:1700209)\n at file:///data/data/org.nativescript.App/files/app/vendor.js:1:1565607\n at Object.onComplete (file:///data/data/org.nativescript.App/files/app/vendor.js:1:1...
You must configure CopyWebpackPlugin to include the files into bundle at compile time
webpack.config.js
// Copy assets to out dir. Add your own globs as needed.
new CopyWebpackPlugin(
[
{ from: { glob: "assets/**" } },
{ from: { glob: "fonts/**" } },
{ from: { glob: "i18n/*.json" } },
{ from: { glob: "**/*.jpg" } },
{ from: { glob: "**/*.png" } },
],
{ ignore: [`${relative(appPath, appResourcesFullPath)}/**`] },
),
This { from: { glob: "i18n/*.json" } }, makes sure all the i18n JSON files are copied to bundle.
Related
I am using this package - qrcode-vue3 in my Laravel Vue project.
I am creating a QR code in various places of the app, each of which contains an logo image supplied via the component options:
<template>
<QRCodeVue3
v-bind="qrOptions"
/>
</template>
<script>
import QRCodeVue3 from "qrcode-vue3";
import {computed} from "vue";
import {useStore} from "vuex";
export default {
name: "QrGenerator",
components: {
QRCodeVue3,
},
props: {
qrData: {
type: String,
default: undefined,
},
withSquareLogo: {
type: Boolean,
default: true,
},
width: {
type: Number,
default: 300,
},
height: {
type: Number,
default: 300,
},
download: {
type: Boolean,
default: true,
},
downloadFileName: {
type: String,
default: undefined,
},
},
setup(props) {
const store = useStore();
const colors = computed(() => store.getters['whiteLabel/colors']);
const logos = computed(() => store.getters['whiteLabel/logos']);
const qrOptions = computed( () => ({
"backgroundOptions": {
"color": "#ffffff"
},
"backgroundOptionsHelper": {
"colorType": {
"gradient": false,
"single": true
},
"gradient": {
"color1": "#ffffff",
"color2": "#ffffff",
"linear": true,
"radial": false,
"rotation": "0"
}
},
"cornersDotOptions": {
"color": "#000000",
"type": ""
},
"cornersDotOptionsHelper": {
"colorType": {
"gradient": false,
"single": true
},
"gradient": {
"color1": "#000000",
"color2": "#000000",
"linear": true,
"radial": false,
"rotation": "0"
}
},
"cornersSquareOptions": {
"color": "#000000",
"type": "extra-rounded"
},
"cornersSquareOptionsHelper": {
"colorType": {
"gradient": false,
"single": true
},
"gradient": {
"color1": "#000000",
"color2": "#000000",
"linear": true,
"radial": false,
"rotation": "0"
}
},
"value": props.qrData,
"dotsOptions": {
"color": colors.value.primary_color,
"type": "extra-rounded"
},
"dotsOptionsHelper": {
"colorType": {
"gradient": false,
"single": true
},
"gradient": {
"color1": colors.value.primary_color,
"color2": colors.value.primary_color,
"linear": true,
"radial": false,
"rotation": "0"
}
},
"image": logos.value.square,
"imageOptions": {
"hideBackgroundDots": true,
"imageSize": 0.4,
"margin": 0,
"crossOrigin": "Anonymous"
},
"margin": 0,
"qrOptions": {
"errorCorrectionLevel": "Q",
"mode": "Byte",
"typeNumber": "0"
},
"download": false,
"height": props.height,
"width": props.width
}));
return {
logos,
colors,
qrOptions,
}
}
};
This works OK for some of the time, with logo loading into the QR code. The logo is in a static assets S3 bucket, that is public access and allow-origins of "*". The domain to the static assets bucket (https://static.myapp.com.au) is being proxied via CloudFlare.
But for some of the time I get a CORS error as the component is mounting and generating the QR:
Access to image at 'https://static.myapp.com.au/logo_square.png' from origin 'https://lins.myapp.com.au' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. index.js?f95a:1
GET https://static.myapp.com.au/logo_square.png net::ERR_FAILED 200
It has wasted a bunch of time now but without luck in finding the solution. It will work consecutively for a number of tries (say 20 times), then try again some minutes later and Bang! CORS error.
Thanks
This is my nuxt.config.js file
env: {
baseUrl: process.env.BASE_URL || "http://localhost:3000"
},
// Axios module configuration: https://go.nuxtjs.dev/config-axios
axios: {
baseURL: process.env.baseUrl,
browserBaseURL: "http://localhost:3000"
},
Heroku logs
Listening on: http://localhost:21411/
Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch.
What's env variable I need to add to heroku admin for it to work, the port heroku is hosting on keeps changing each time I try to run it.
EDIT here is my Nuxt config:
export default {
// Global page headers: https://go.nuxtjs.dev/config-head
head: {
script: [
{
type: "text/javascript",
charset: "UTF-8",
src: "https://js.api.here.com/v3/3.1/mapsjs-core.js"
},
{
type: "text/javascript",
charset: "UTF-8",
src: "https://js.api.here.com/v3/3.1/mapsjs-service.js"
},
{
type: "text/javascript",
charset: "UTF-8",
src: "https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"
},
{
type: "text/javascript",
charset: "UTF-8",
src: "https://js.api.here.com/v3/3.1/mapsjs-ui.js"
},
{
type: "text/javascript",
charset: "UTF-8",
src: "https://js.api.here.com/v3/3.1/mapsjs-clustering.js"
},
{
type: "text/javascript",
charset: "UTF-8",
src: "https://js.api.here.com/v3/3.1/mapsjs-data.js"
}
],
title: "Restaurants-D-System",
htmlAttrs: {
lang: "en"
},
meta: [
{ charset: "utf-8" },
{ name: "viewport", content: "width=device-width, initial-scale=1" },
{ hid: "description", name: "description", content: "" }
],
link: [
{
rel: "stylesheet",
type: "text/css",
href: "https://js.api.here.com/v3/3.1/mapsjs-ui.css"
},
{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" },
{
rel: "preconnect",
href: "https://fonts.gstatic.com",
href: "https://fonts.googleapis.com/css2?family=Roboto&display=swap",
rel: "stylesheet"
},
{
rel: "preconnect",
href: "https://fonts.gstatic.com",
href: "https://fonts.googleapis.com/css2?family=Ribeye&display=swap",
rel: "stylesheet"
}
]
},
// Global CSS: https://go.nuxtjs.dev/config-css
CSS: ["~/assets/normalize.css"],
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [],
// Auto import components: https://go.nuxtjs.dev/config-components
components: true,
// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
buildModules: [],
// Modules: https://go.nuxtjs.dev/config-modules
modules: [
"#nuxtjs/style-resources",
// https://go.nuxtjs.dev/buefy
"nuxt-buefy",
// https://go.nuxtjs.dev/axios
"#nuxtjs/axios"
],
styleResources: {
scss: ["./assets/main.scss"],
CSS: ["./assets/normalize.css"]
},
axios: {
baseURL: "http://localhost:4000" // Used as fallback if no runtime config is provided
},
publicRuntimeConfig: {
axios: {
browserBaseURL: process.env.BROWSER_BASE_URL
}
},
privateRuntimeConfig: {
axios: {
baseURL: process.env.BASE_URL
}
},
serverMiddleware: [{ path: "/api", handler: "~/api/index.js" }],
// Build Configuration: https://go.nuxtjs.dev/config-build
build: {}
};
and here is my json:
{
"version": "1.0.0",
"engines": {
"node": "14.16.1"
},
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate"
},
"dependencies": {
"#nuxtjs/axios": "^5.13.1",
"#nuxtjs/style-resources": "^1.0.0",
"#vonage/server-sdk": "^2.10.8",
"core-js": "^3.9.1",
"express": "^4.17.1",
"firebase-admin": "^9.8.0",
"infobip-nodejs": "^0.1.0-alpha.1",
"lodash.debounce": "^4.0.8",
"normalize.css": "^8.0.1",
"nuxt": "^2.2.0",
"nuxt-buefy": "^0.4.4"
},
"devDependencies": {
"fibers": "^5.0.0",
"sass": "^1.34.0",
"sass-loader": "^10.2.0"
}
}
and here is my Express javascript file API:
const express = require("express");
const sms = require("./infoSms/index");
const router = require("../api/routes/routesIndex");
const { db, auth, timestamp } = require("./dataBase/index");
const app = express();
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
port = process.env.PORT || 3000;
app.use(router);
if (require.main === module) {
app.listen(port, () => {
console.log(`server is up ` + port);
});
} else {
console.log("server is up by Nuxtjs");
}
module.exports = app;
The setup is explained pretty well in the official #nuxtjs/axios documentation
export default {
modules: [
'#nuxtjs/axios'
],
axios: {
baseURL: 'http://localhost:4000', // Used as fallback if no runtime config is provided
},
publicRuntimeConfig: {
axios: {
browserBaseURL: process.env.BROWSER_BASE_URL
}
},
privateRuntimeConfig: {
axios: {
baseURL: process.env.BASE_URL
}
},
}
Also, as explained there
The use of runtime config is mandatory in case of using environment variables in production, otherwise, the values will be hard coded during build and won't change.
Usually, webservices are running on port 80 (https) or 443 (https), double-check that this is what you do have in your dashboard (https://dashboard.heroku.com/apps/<your-app>/settings). Even tho you probably don't even need to specify it.
Give a read to the deployment page to see the few steps required so far aka
heroku create myapp
heroku buildpacks:set heroku/nodejs
heroku config:set HOST=0.0.0.0
git push heroku master // git push heroku develop:master if working on develop and not master
Moreover, prefer using this approach for env variables in Nuxt: https://stackoverflow.com/a/67705541/8816585
Trying to send an ajax request in a chrome extension. I have confirmed the request returns a 200 response, it should just console.log to 'test'. I'm not sure if there's some async problems here? I have read chrome extension 'addListener' documentation.
content.js
chrome.runtime.sendMessage({greeting: "hello"}, function(response) {
console.log(response.farewell); //this is not working
return true;
});
background.js
require('./modules/communicate.js');
var communicate = new Communicate();
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
if (request.greeting === "hello") {
response = communicate.talk('http://127.0.0.1:5000/test', 'GET');
sendResponse({
farewell: response
});
return true; //doing this correctly?
}
});
communicate.js
Communicate = function() {
this.talk = function(url, method) {
$.ajax({
url: url,
method: method,
success: function(result) {
return result;
}
});
};
};
manifest.json
{
"manifest_version": 2,
"icons": { "128": "images/icon.png" },
"browser_action": {
"default_icon": "images/icon.png",
"default_popup": "html/popup.html"
},
"background": { "scripts": ["js/background.js"] },
"content_scripts": [{
"matches": [ "http://*/*", "https://*/*" ],
"js": [ "js/content.js" ]
}],
"permissions": [ "<all_urls>" ],
"web_accessible_resources": [ "js/*", "html/*", "css/*", "images/*" ],
"content_security_policy": "script-src 'self'; object-src 'self'"
}
I am new to browser-sync and I can't seem to figure out how to get live reload to work on a proxy server. In my current setup I don't have access to the files on my local machine so I have to use a proxy. I currently have a config file and here is the current setup.
module.exports = {
"ui": {
"port": 3001,
"weinre": {
"port": 8080
}
},
"files": ['Styles/bootstrap-custom-addons.css', '/Styles/*.css'],
"watchOptions": {},
"server": false,
"proxy": {
target: "http://example.com",
files: ['Styles/bootstrap-custom-addons.css', '/Styles/*.css'],
},
"port": 3000,
"middleware": false,
"ghostMode": {
"clicks": true,
"scroll": true,
"forms": {
"submit": true,
"inputs": true,
"toggles": true
}
},
"logLevel": "info",
"logPrefix": "BS",
"logConnections": false,
"logFileChanges": true,
"logSnippet": true,
"rewriteRules": false,
"open": "local",
"browser": "default",
"xip": false,
"hostnameSuffix": false,
"reloadOnRestart": true,
"notify": true,
"scrollProportionally": true,
"scrollThrottle": 0,
"reloadDelay": 0,
"reloadDebounce": 0,
"plugins": [],
"injectChanges": true,
"startPath": null,
"minify": true,
"host": null,
"codeSync": true,
"timestamps": true,
"clientEvents": [
"scroll",
"input:text",
"input:toggles",
"form:submit",
"form:reset",
"click"
],
"socket": {
"path": "/browser-sync/socket.io",
"clientPath": "/browser-sync",
"namespace": "/browser-sync",
"clients": {
"heartbeatTimeout": 5000
}
},
"tagNames": {
"less": "link",
"scss": "link",
"css": "link",
"jpg": "img",
"jpeg": "img",
"png": "img",
"svg": "img",
"gif": "img",
"js": "script"
}
};
Page Scroll and clicks work across browsers, but when I update a file on the server it does not automatically reload the page, am I not setting up the config file correctly? Also what is the difference between running browser-sync start --config bs-config.js and just running brower-sync start --proxy "http://www.example.com"?
I'm having a bit of difficulty with KendoUI Scheduler data(scheduler events or whatever you want to call them) display. The call is made amd the data comes in but it doesn't display it, nor does it cause any errors. I've pasted the code and responce, hoping that someone knows what I'm doing wrong.
And yes I've been switching between json/jsonp as the datatype and batch set to true and false in all possible combinations.
The Code:
var my_dataSource;
$("#calendar").kendoScheduler({
height: "650px",
timezone: "Etc/UTC",
views: [
"day",
"week",
{ type: "month", selected: true },
"agenda"
]
});
my_dataSource = new kendo.data.SchedulerDataSource({
transport: {
read: {
url: "ashx/Calendar/GetCalendarData.ashx",
cache: false,
data: {
dtFrom: convertDate($("#calendar").data("kendoScheduler").view().startDate()),
dtUntil: convertDate($("#calendar").data("kendoScheduler").view().endDate()),
DateInterval: "month",
dateIntervalSteps: "1",
Categories: ""
},
dataType: "jsonp"
},
batch: true,
parameterMap: function (options, operation) {
//console.log(JSON.stringify(options));
return options;
}
},
schema: {
data: "Data",
model: {
id: "taskID",
fields: {
taskID: { from: "id", type: "number" },
title: { from: "summary", defaultValue: "No title", validation: { required: false } },
start: { type: "date", from: "startTime" },
end: { type: "date", from: "endTime" },
//startTimezone: { from: "StartTimezone" },
//endTimezone: { from: "EndTimezone" },
//description: { from: "Description" },
//recurrenceId: { from: "RecurrenceID" },
//recurrenceRule: { from: "RecurrenceRule" },
//recurrenceException: { from: "RecurrenceException" },
ownerId: { from: "eOwnerId", defaultValue: 1 },
isAllDay: { type: "boolean", from: "allDay" }
}
}
}
});
var cal = $("#calendar").data("kendoScheduler");
cal.dataSource = my_dataSource;
The Response:
[
{
"id": 329837,
"summary": "Lorem Ipsum",
"startTime": "Date(1375862400)",
"endTime": "Date(1377273600)",
"allDay": true,
"calendar": "cat10001",
"eOwnerId": 1569,
"Title": "Project Meeting"
},
{
"id": 334664,
"summary": "Lorem Ipsum",
"startTime": "Date(1376985600)",
"endTime": "Date(1376989200)",
"allDay": false,
"calendar": "cat10002",
"eOwnerId": 130,
"Title": "Meeting"
},
{
"id": 334659,
"summary": "Lorem Ipsum",
"startTime": "Date(1377007200)",
"endTime": "Date(1377010800)",
"allDay": false,
"calendar": "cat10003",
"eOwnerId": 1810,
"Title": "Task"
}
]
I had a the same problem while getting no errors. What fixed it was (silly but) i was setting the start and end timezones ie. task.setEndTimezone(TimeZone.getTimeZone("UTC"));, just set them to null while timezone is still set in the returned start and end datetime of the task. Hope this helps.
I see "ReferenceError: convertDate is not defined" when using Firefox debugging...
dtFrom: convertDate($("#calendar").data("kendoScheduler").view().startDate()),
dtUntil: convertDate($("#calendar").data("kendoScheduler").view().endDate()),
You may want to make sure you are including all of the appropriate .js files