No ext-locale package available in ExtJS 7.3 - extjs

For some weird reason, I'm getting this error:
Cannot satisfy requirements for "ext-locale"! [ERR] The following
versions cannot be satisfied: [ERR] App: ext-locale (No
matches!) [ERR] Cannot resolve package requirements
Per official instructions, I added the requires to app.json
"classic": {
"requires": [
"ext-locale"
]
},
I'm using the universal template:
"template": "universalclassicmodern"
I looked at #sencha/ext-classic/
but I can't see a locale directory there.
Do I have to manually install the package via npm?

If you use the Classic or Modern template:
Try to change the code like this.
Open app.json file, in global requires.
"requires": [
"font-awesome",
"locale"
],
"locale":"zh_CN", //!!!Your localization parameters
Configure specific build options
"production": {
"requires": [
"locale"
],
"locale":"zh_CN", //!!!Your localization parameters
...
},
"testing": {
"requires": [
"locale"
],
"locale":"zh_CN", //!!!Your localization parameters
...
},
"development": {
"requires": [
"locale"
],
"locale":"zh_CN", //!!!Your localization parameters
...
},
If you use the universal template,Try to change the code like this.Open app.json file, in global requires.
"requires": [
"font-awesome",
"locale"
],
"locale": "zh_CN", //!!!Your localization parameters
Then according to the official documentation, add "ext-locale" to the "requires" under the Classic and Modern nodes
"classic": {
"requires": [
"ext-locale"
],
"locale": "zh_CN", //!!!Your localization parameters
.....
},
"modern": {
"requires": [
"ext-locale"
],
"locale": "zh_CN", //!!!Your localization parameters
...
}

I finally found the solution:
If you install ExtJS via npm, like:
ext-gen app -a -t universalclassicmodern -n myApp
You'll need to install localization packages separately with:
npm i #sencha/ext-classic-locale
npm i #sencha/ext-modern-locale
And in app.json, you only need these settings regarding localization:
"locale": "es", // <-- Your locale here
"requires": [
"ext-locale"
],...
Seems that you don't need to specify the locale for each build/tookit.
This guide should be updated and explain it:
https://docs.sencha.com/extjs/7.4.0/guides/core_concepts/localization.html

Related

ExtJS Package toolkit/shared resources

I have an ExtJS package with the following structure:
PackageA/
classic/
resrouces/
file.json
classic_resource.json
resources/
file.json
resource.json
When I build the app in production mode requiring the packageA, in the build directory I see the following:
./build/production/MyApp/classic/resources/PackageA/file.json
./build/production/MyApp/classic/resources/PackageA/classic_resource.json
./build/production/MyApp/classic/resources/PackageA/resource.json
It looks like both the shared package resources and toolkit (classic) specific are copied to the same directory (./MyApp/classic/resources/PackageA/), and if the same file exists already, it will simply be overwritten (file.json).
However, in my case the classic/resources/file.json and resources/file.json have different content and I require to keep them both in the build.
How can I achieve this?
[EDIT]
app.json
"output": {
"base": "${workspace.build.dir}/${build.environment}/${app.name}",
"page": "index.html",
"manifest": "${build.id}.json",
"js": "${build.id}/app.js",
"appCache": {
"enable": false
},
"resources": {
"path": "${build.id}/resources",
"shared": "resources"
},
"framework": {
"path": "${build.id}/framework.js",
"enable": true
}
},
"resources": [
{
"path": "resources",
"output": "shared"
},
{
"path": "${toolkit.name}/resources"
},
{
"path": "${build.id}/resources"
}
],
package.json
"output": "${package.dir}/build",
"resource": {
"paths": [
"${package.dir}/resources",
"${package.dir}/${toolkit.name}/resources"
]
},
Its happen because you create resources directory on toolkit's directory which should not be there.
Readme.md in the newly generated package
This classic-specific directory can include any (if not all) of the following directories:
overrides: Any classes in this directory will be automatically required and included in the classic build.
In case any of these classes define an Ext JS override (using Ext.define with an "override" property),
that override will in fact only be included in the build if the target class specified
in the "override" property is also included.
sass: Any classic-specific style rules should reside in this package, following the same structure
as the directory in the package root (see package.json for more information).
src: The classic-specific classes of this package should reside in this directory.
If you need resources separated by toolkit do it on package's root resources directory.

Upgrading to an Angular/AngularJS hybrid application: getting typescript errors / AngularJS import errors

We are in the process of upgrading an AngularJS application to Angular with the incremental approach: we would like to be able to create new components in Angular and upgrade existing AngularJS components one by one, all this still with a functional application during the process.
We use the official documentation as well as several articles about hybrid Angular/AngularJS applications on real world applications.
Here are our attempts and the errors we get.
Context
AngularJS 1.7.3
Angular 6.1.7
Typescript 2.7.2
angular-cli
First steps
upgrade to AngularJS 1.7
remove Grunt and use angular-cli
use ngUpgrade (app.module.ts and app.module.ajs.ts)
Moving to Typscript: dealing with errors
That's the official process: rename .js files to .ts.
We then moved from Node require() to TypeScript module loading (var ... = require --> import ... = require)
Ideally, we should correct all the typing errors due to using the TypeScript compiler.
But the TypeScript doc states that's it's possible to do an incremental migration: being tolerant to TypeScript errors at the beginning in order to compile the js code without modifications (and stricter later on after fixing the code).
To achieve this, we used the awesome-typescript-loader instead of tsc to get theses options: transpileOnly, errorsAsWarnings (this requires the use of angular-builders/custom-webpack).
The options allow to pass the compilation, but it appears that the compilation is done twice: first without errors (warnings or not), but second with errors... so the build fails. How can we run only the first compilation?
Alternative attempt: keeping .js files, errors in importing and bootstrapping
We tried also an unofficial and unusual way to migrate the js code incrementally, that is keeping the original .js files alongside new .ts files.
We got some errors at compilation or application loading, related to importing AngularJS and to module management. Indeed the TypsScript module documentation states that:
Some libraries are designed to be used in many module loaders, or with no module loading (global variables). These are known as UMD modules. These libraries can be accessed through either an import or a global variable. ... can be used as a global variable, but only inside of a script. (A script is a file with no imports or exports.)
What we noticed:
in .js files: access to the AngularJS global angular (if we remove require("angular")) - script mode
in .ts files: we can't use import from angular, otherwise we get the error angular.module is undefined - module mode
With this in mind, we made the application compile and load in the browser without errors, but at the end:
this.upgrade.bootstrap(document.body, [App])
generates an error on AngularJS bootstrapping:
Angular 1.x not loaded !
How to fix this? It may be because we didn't import AngularJS in the TypeScript module way to avoid the previous error?
The official documentation mentions angular.IAngularStatic (still get an error)?
We can try also setAngularJSGlobal() ? Used when AngularJS is loaded lazily, and not available on window
By the way what is the difference between using [App] or ["App"] when calling bootstrap()?
... Since we are new to this upgrade process, we may be doing completely wrong things. Thank you for sharing your experience!
Configuration files
angular.json
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "acd-banner-multicanal",
"projects": {
"acd-banner-multicanal": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "target",
"index": "src/index.html",
"main": "src/main.ts",
"tsConfig": "./tsconfig.json",
"assets": [
"src/i18n",
"src/conf/conf.txt",
"src/conf/conf_DEFAULT.txt",
"src/systemjs.config.js",
{ "glob": "font-banner*", "input": "./node_modules/elq-font-icon/build/", "output": "/assets/fonts" },
"src/assets/images",
{ "glob": "system.js*", "input": "./node_modules/systemjs/dist/", "output": "/assets" },
"src/assets/images",
{ "glob": "**/*", "input": "./node_modules/tinymce/plugins", "output": "/assets/tinymce/plugins" },
{ "glob": "**/*", "input": "./node_modules/tinymce/skins", "output": "/assets/tinymce/skins" }
],
"styles": [
"src/assets/styles/style.less"
],
"scripts": [
"./node_modules/jquery/dist/jquery.js",
"./node_modules/jquery-ui-dist/jquery-ui.js"
]
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"aot": true,
"buildOptimizer": true
}
}
},
"test": {
"builder": "#angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "./karma.conf.js",
"scripts": [],
"styles": [
"src/assets/main.less"
],
"assets": [
"src/i18n",
"src/favicon.ico"
]
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"acd-ihm-angular-e2e": {
"root": "e2e/",
"sourceRoot": "e2e",
"projectType": "application",
}
},
"defaultProject": "acd-banner-multicanal",
"schematics": {
"#schematics/angular:component": {
"styleext": "less",
"lintFix": true
}
}
}
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"outDir": "./target",
"sourceMap": true,
"experimentalDecorators": true,
"allowJs": true,
"baseUrl": "./",
"lib": [
"es2017",
"dom"
],
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true,
"paths": {
"angular": ["node_modules/angular/angular"]
}
},
"include": [
"src/**/*"
],
"exclude": [
"src/**/*.spec.ts"
]
}
As for the angular 1.x not loaded error;
Did you install angularJS in the new application?
$ npm install --save angular#1.7.3 \
#types/angular
In the angular.json file you need to include the script:
"scripts": [
"../node_modules/angular/angular.js",
//etc...
],
Here's an example of upgrading an application that seem similar to what you have.
Alternatively you can bring in angular into the import chain by importing it in main.ts;
import * as angular from 'angular';
This might be a better option since it makes angular cli / webpack aware of angularJS and may prevent errors such as "WARNING: Tried to Load Angular More Than Once" that may arise if some other component (such as the hybrid router imports angular).
I confirm that the answer works, we've been able to run our application in hybrid mode. In fact, in AngularJs, we used grunt and browserify, and we had packaged some libraries using the package.json browser field. To do the same, we had to declare the libraries to load in the browser in angular.js / build.options.scripts:
"scripts": [
"./node_modules/jquery/dist/jquery.js",
"./node_modules/jquery-ui-dist/jquery-ui.js",
"./node_modules/moment/moment.js",
"./node_modules/bootstrap/dist/js/bootstrap.js",
"./node_modules/eonasdan-bootstrap-datetimepicker/src/js/bootstrap- datetimepicker.js",
"./node_modules/bootstrap-tour/build/js/bootstrap-tour.js",
"./node_modules/angular/angular.js",
"./node_modules/ng-table/bundles/ng-table.js"`
]
Thanks a lot.
That may be useful to add in the Angular documentation? Indeed, the examples given in https://angular.io/guide/upgrade#bootstrapping-hybrid-applications are based on SystemJS, whereas we just use Webpack (already used by Angular).
Indeed, there is an issue about the angular doc, the migration doc is not yet updated for angular-cli (that's why it is about SystemJS).

React-Native 0.57: 'Can't find variable: require' with metro-react-native-babel-preset

I started a multiplatform project with code sharing between react-native and react-js.
So I have a webpack setup for browser/Electron, and a react-native 0.57 setup for Android/iOS.
The problem I'm having right now is the following:
Can't find variable: require
It might be a very bald question, but do I need anything else? I read, that React-native should support require by itself, but couldn't find anything related to this setup yet.
.babelrc
{"presets": ["module:metro-react-native-babel-preset"]}
I'm also using #babel/polyfill and #babel/runtime on browser side, but I wonder if they would interfere.
Got the solution, my .babelrc was okay, but the packager cached the very first wrong one so I had to start the packager as:
react-native start --reset-cache
After looking at below github issue it looks like the issue is caused by corejs option #babel/plugin-transform-runtime, So replace it by #babel/polyfil
https://github.com/facebook/react-native/issues/21048
.babelrc config for ref
{
"presets": [
"module:metro-react-native-babel-preset",
],
"plugins": [
"react-require",
[
"module-resolver",
{
"root": [
"./src",
"./assets"
],
"alias": {
"app": "./src",
"assets": "./assets"
}
}
],
[
"babel-plugin-require-context-polyfill",
{
"alias": {
"app": "./src"
}
}
],
"#babel/plugin-proposal-export-default-from",
"#babel/plugin-proposal-export-namespace-from",
"#babel/plugin-transform-flow-strip-types",
[
"#babel/plugin-proposal-decorators",
{
"legacy": true
}
],
[
"#babel/plugin-proposal-class-properties",
{
"loose": false
}
],
[
"#babel/plugin-transform-runtime",
{
}
],
],
"sourceMaps": true
}
Install Babel polyfill 7 "#babel/polyfill": "^7.0.0"
And import that in App component
import '#babel/polyfill'
It seems that react-native start --reset-cache works.

Am I making some mistake with Chutzpah.json file?

I am trying to test Angular using jasmine:
My Folder structure:
My chutzpah.json file:
{
"Framework": "jasmine",
"TestHarnessLocationMode": "Custom",
"TestHarnessDirectory": "../AngularExample",
"TestHarnessLocationMode": "SettingsFileAdjacent",
"TestHarnessReferenceMode": "AMD",
"References": [
{"Path": "../AngularExample/Controller","Include": "app.js"} ],
"Tests": [
{ "Path": "/Tests/Specs" }
],
"AMDBasePath": "../AngularExample/Controller"
}
I am getting below error message:
My code files are referred from here(reffering example from https://gist.github.com/blesh/8846528
It doesn't look like you are referencing Angular.js library itself. Please take a look at the Angular samples with Chutzpah and see if that helps.

Extjs 6 - Custom theme package error

I'm having issues requiring a custom theme package in my extjs 6 application. I created a custom theme package that extends the Triton theme, built the package and added the .pkg to the local repository. I then added the package to the requires block in my app's app.json file and ran sencha app refresh -packages. I am then presented with the following error:
rook$ sencha app refresh -packages
Sencha Cmd v6.0.2.14
[INF] Processing Build Descriptor : classic
[INF] Refreshing packages for build : classic
[ERR] Cannot satisfy requirements for "theme-neptune"!
[ERR] The following versions cannot be satisfied:
[ERR] new-test-theme: theme-neptune (No matches!)
[ERR] Cannot resolve package requirements
Here is my package.json file for my custom theme package:
{
"name": "new-test-theme",
"namespace": "New.test.theme",
"type": "theme",
"extend": "theme-triton",
"toolkit": "classic",
"creator": "pr-repo",
"summary": "Short summary",
"detailedDescription": "Long description of package",
"version": "1.0.1",
"compatVersion": "1.0.0",
"format": "1",
"slicer": {
"js": [
{
"path": "${package.dir}/sass/example/custom.js",
"isWidgetManifest": true
}
]
},
"output": "${package.dir}/build",
"local": true,
"sass" : {
"namespace": "New.test.theme",
"etc": "${package.dir}/sass/etc/all.scss,${package.dir}/${toolkit.name}/sass/etc/all.scss",
"var": "${package.dir}/sass/var,${package.dir}/${toolkit.name}/sass/var",
"src": "${package.dir}/sass/src,${package.dir}/${toolkit.name}/sass/src"
},
"classpath": "${package.dir}/src,${package.dir}/${toolkit.name}/src",
"overrides": "${package.dir}/overrides,${package.dir}/${toolkit.name}/overrides",
"example": {
"path": [
"${package.dir}/examples"
]
},
"framework": "ext",
"requires": [
]
}
And then in my applications app.json file I am requiring the package:
"requires": [
"font-awesome",
"new-test-theme"
],
I am running:
Sencha Cmd v6.0.2.14
and
ext-6.0.1
Can anyone see whats causing this error?
I think you need to set the theme property instead of adding it to your requires property.
Should look like:
"builds": {
"classic": {
"toolkit": "classic",
"theme": "new-test-theme"
},
"modern": {
"toolkit": "modern",
"theme": "new-test-theme"
}
}

Resources