I added a new layer in dojo build config as below:
releaseDir: "./my-build",
layers: {
"myLib": {
include: [
"myFile1",
"myFile2"
]
}
}
After build, nls created under my-build folder, and include all locale files
my-build/
-myLib.js
-nls
--myLib_en-us.js
In the html file, my dojoConfig is:
var dojoConfig = {
async: true,
cacheBust: false,
paths: {
"ah": "/hm-webapp/resources/scripts/ah",
"i18n": '/hm-webapp/resources/i18n'
},
baseUrl: "/hm-webapp/resources/scripts/dojo/",
locale: ""
};
and I am including my layer via a script tag:
<script src="/my-build/myLib.js">
</script>
But there is a
404 error for myLib_en-us.js
It seems that dojo automatically load nls files, but the request path is like this
--/nls/myLib_en-us.js
There is no subpath "my-build" for the nls request.
My question is how to change the nls path to the build path.
Thanks.
Related
I have a project where I'm using Angular 1.6 and I'm using angular-translate to internationalize the project.
Angular-translate is installed, configured and working, If I add some text like:
{{'Test' | translate}}
<span translate>Test</span>
and manually add the key "Test" into the files es.json and en.json, Angular translate the keys without problems.
Now I'm trying to automatize the process of extracting all the translated keys from the HTML and JS files.
I've been digging around and found this 2 packages:
gulp-angular-translate-extract
gulp-angular-translate-extractor
My gulpfile.js has a task called "watch", this task is watching the JS & HTML files for changes. My idea is to have another task "translation" that is called within the watch task.
I tried to create the task "translation" with the 2 libraries mentioned above. I tried several configurations with those libraries but none of those libraries extracted the translations and added them into en.json & es.json.
This are small examples of what I tried:
gulp-angular-translate-extract
var angularTranslate = require('gulp-angular-translate-extract');
gulp.task('translate', function () {
return gulp.src(['./src/app/**/*.html', './src/app/**/*.js'])
.pipe(angularTranslate({
lang: ['en', 'es'],
dest: 'src/app/locale/',
suffix: '.json',
prefix: '',
}))
});
gulp-angular-translate-extractor
var extractTranslate = require('gulp-angular-translate-extractor');
gulp.task('taskName', function () {
var i18nsrc = ['./src/app/**/*.html', './src/app/**/*.js']; // your source files
var i18ndest = './src/app/locale'; //destination directory
return gulp.src(i18nsrc)
.pipe(extractTranslate({
defaultLang: 'en',
lang: ['en', 'es'],
dest: i18ndest,
prefix: '',
suffix: '.json',
safeMode: false,
stringifyOptions: true,
}))
.pipe(gulp.dest(i18ndest));
});
With the above configuration the translation task is called every time I modified an HTML or JS file, but the translation keys are not extracted, I mean the keys of the translations are not automatically added to the es.json and en.json
What am I missing here ? Am I missing some extra gulp configuration ?
Solved ! I manage to make it works using the package gulp-angular-translate-extractor
It seems the main issue there was the relative paths:
# Source paths
./src/app/**/*.html
./src/app/**/*.js
# Dest paths
./src/app/locale
I update the configuration to use the next paths and the translations are extracted without problems:
var extractTranslate = require('gulp-angular-translate-extractor');
gulp.task('translate', function () {
var i18nsrc = [path.join(conf.paths.src, '/app/**/*.html'), path.join(conf.paths.src, '/app/**/*.js')]; // your source files
var i18ndest = path.join(conf.paths.src, '/app/locale/')
return gulp.src(i18nsrc)
.pipe(extractTranslate({
defaultLang: 'en',
lang: ['en', 'es'],
dest: i18ndest,
prefix: '',
suffix: '.json',
safeMode: false,
stringifyOptions: true,
}))
.pipe(gulp.dest(i18ndest));
});
The main difference with the code of my question is that I used the next paths:
# Source paths
path.join(conf.paths.src, '/app/**/*.html')
path.join(conf.paths.src, '/app/**/*.js')
# Dest paths
path.join(conf.paths.src, './src/app/locale')
Being the variable conf.paths.src like:
conf.js
exports.paths = {
src: 'src',
dist: 'release',
devDist: 'dev-release',
tmp: '.tmp',
e2e: 'e2e'
};
I want to use the nconf module to retriever configuration data from a file(s) according to a policy and export the properties in the JSON configuration files as a module like so:
import * as config from 'ConfigData'
console.log(config.MyProperty)
The ConfigData module is just wrapping nconf defining the policy of the naming scheme of the config files and what order to load the files.
var myconfig = new nconf.Provider({
env: true,
argv: true,
stores: [
{ type: 'file', file: path.join(__dirname, 'config.json')},
{ type: 'file', file: path.join(__dirname, 'default-config.json')}
]
});
How do I export the config properties in the JSON file and how does the client code use it?
I am hosting ArcGIS JS API 4.1 locally in my project, so I have build the esri componenet and I have added the path in my requireJS config file. I also wanted to build the dojo folder, so basically build it to a single output file. But when I add the dojo modules using requireJS bundles I get an error in the esri file that e is not a function(…). The line of code that it appears on is:
define("dojo/_base/config", ["../has", "require"], function(e, t) {
var r = {};
if (e("dojo-config-api")) { ... } //e is undefined.
I get that the error means dojo/has is undefined but I don't understand why. I tried using dojo/has in my project and it is not undefined but in the esri file it says its undefined. Does anybody know how I can fix this.
This is requireJS config file:
requirejs.config({
paths: {
"jquery": 'https://code.jquery.com/jquery-3.1.0.min',
'esri/moment': 'https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment',
"esri": "../lib/arcgis-js-api-4/main",
"dojo": "../lib/arcgis-js-api-4/dojo-lib",
"dojox": 'http://js.arcgis.com/4.1/dojox',
"dijit": 'http://js.arcgis.com/4.1/dijit'
},
bundles: {
"esri": ["esri/Color",...],
'dojo': ['dojo/has', 'dojo/domReady',...]
},shim: {
"esri": {
deps: ["esri/moment", "dojo", "dojox", "dijit"]
}
}
});
This is the config for the dojo build:
var profile=(function(){
return {
basePath: "./",
releaseDir: "./",
releaseName: "dojoLib",
action: "release",
cssOptimize: 'comments',
layerOptimize: false,
packages:[{
name: "dojo",
location: "src/dojo"
}],
layers:{
"dojo/dojoLib": {
include: ["dojo/dojo", "dojo/i18n", "dojo/domReady", 'dojo/has', 'dojo/request', 'dojo/request/xhr',
'dojo/request/util', 'dojo/request/watch', 'dojo/io/script', 'dojo/io/iframe', 'dojo/query'],
customBase: true,
boot: false
}
}
};
})();
I'm using requireJs with uderscore and tpl , I've changed the default file ending from .html to .tpl .
Now if I try to optimize my app i got the following error
Tracing dependencies for: app
Error: Error: Loader plugin did not call the load callback in the build:
tpl:
tpl!module/home/template/home_unnormalized2
tpl!module/home/template/home
/*
more templates
*/
Module loading did not complete for: app, /* failed for all modules */
at Function.build.checkForErrors (/usr/local/lib/node_modules/requirejs/bin/r.js:28424:19)
it seems like that r.js can't handle the .tpl or !tpl ending/beginning.
my build js
({
baseUrl: "js/lib",
appDir: "..",
dir: "dist",
tpl: {
extension: '.tpl' // default = '.html'
},
modules: [
{ name: "app" }
],
paths: {
app: '../app',
underscore: 'underscore',
text: 'text',
tpl: 'tpl',
//Module
home : '../module/home/home',
},
shim : {
}
})
I am using Esri's ArcGis CDN and I want to have some custom modules. My directory structure is as follows
Scripts
app
basemap.js
test.js
Views
Maps
General.cshtml
In General.html I have this for my dojo config
<script data-dojo-config="async: 1, dojoBlankHtmlUrl: '/blank.html',
packages: [ {
name: 'app',
//Can't configure location correctly
location: location.pathname.replace(/\/[^/]+$/, '') + ''
} ]"
src="//js.arcgis.com/3.7/"></script>
Testing usage in test.js
require([
"dojo/ready",
"app/basemap"
], function (ready, basemap) {
basemap.test();
}
If I use an absolute path location: 'http://localhost:53862/Scripts/app' then it works fine.
I've tried a few other things for '' but I can't seem to navigate from the Maps folder across to my app folder. All the examples I looked at either specify a subdirectory for the location or an absolute path. Is there I way I can do something like ../Scripts/app?
I recommend you read "Configuring Dojo with dojoConfig" and "Using Custom Modules with a CDN".
Eg Google CDN.
dojo config, look at property baseUrl
<script data-dojo-config="async: 1,
dojoBlankHtmlUrl: '/blank.html',
baseUrl: '/Scripts',
packages:[
{ name:'dojo',location:'//ajax.googleapis.com/ajax/libs/dojo/1.9.2/dojo/'},
{ name:'app',location:location.pathname.replace(/\/[^/]+$/, '') + 'app'}]"
src="//ajax.googleapis.com/ajax/libs/dojo/1.9.2/dojo/dojo.js">
</script>
after, test your custom module
require([
"dojo/ready",
"app/basemap"
], function (ready, basemap) {
basemap.test();
}
I changed my dojoconfig to the following
<script data-dojo-config="
packages: [ {
name: 'app',
location: '//' + window.location.host + '/Scripts/app'
} ]"
src="//js.arcgis.com/3.7/"></script>
Which set my app package to http://localhost:53862/Scripts/app