ExtJS Package toolkit/shared resources - extjs

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.

Related

No ext-locale package available in ExtJS 7.3

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

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 Monorepo yarn workspaces + typescript + absolute imports

I'm having issues setting up an React project with yarn workspaces and typescript.
My folder structure is:
-root
-package.json
-workspaces
-web
-common
and my package.json file is:
{
"name": "my-project-name",
"private": true,
"workspaces": [
"workspaces/web",
"workspaces/common"
],
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx",
"json",
"node"
]
}
My issue is: when I import files on web from the common project, it works fine if it's a .js file, but fails with TypeError: Object(...) is not a function when using .ts or .tsx files.
Any ideas on what I might be missing?
I recommend adopting the following file hierarchy:
- root
- package.json
- tsconfig.json
- packages
- common
- package.json
- tsconfig.json
- services
- web
- package.json
- tsconfig.json
Everything in the packages folder can be imported. Services are "leaf" projects that you don't want to import in other projects.
With that as a base, your root package.json should be setup like that:
{
"name": "my-project-name",
"private": true,
"workspaces": [
"packages": [
"packages/*",
"services/**/*"
],
],
}
Then, you also need to tell typescript how to resolve the imports.
In the root tsconfig.json, set the following:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"#myproject/*": ["packages/*/src"]
},
}
Make sure that every tsconfig extends this base with "extends": "../../tsconfig.json"
Inside web/package.json or any package that needs to import common, define common as a dependency:
{
[...]
"dependencies": {
"#myproject/common": "*",
}
}
Now if your common package.json has a name set to `"#myproject/common", you can import your code inside web with :
import { myUtilFunction } from "#myproject/common";
I would advise you to also use learn with a setup like this.
You will also need to modify a bit your build pipeline, since you're importing files inside /web that are outside the /web folder. For a more complete example, you can check out this repo: https://github.com/NiGhTTraX/ts-monorepo

How to configure index.jsp file with app.json in Extjs 6

Structure of my Application:
In my app.json file I did following configuration for pointing to index.jsp file
"indexHtmlPath": "../../iris_app.war/WEB-INF/views/jsp/app/index.jsp",
"output": {
"base": "${workspace.build.dir}/${build.environment}/${app.name}",
"page": {
"path": "index.jsp",
"enable": true
},
"manifest": "${build.id}.json",
"js": "${build.id}/app.js",
"appCache": {
"enable": false
},
"resources": {
"path": "${build.id}/resources",
"shared": "resources"
}
},
When I refresh my app using sencha app refresh it updates classic.json file
With following paths
{"paths":
{
"Dimension":"../../../../../iris_s.war/regshoapp/app/view/components/popups/SelectDimensionsWindow.js",
"Ext":"../../../../../iris_s.war/ext/classic/classic/src",
"Ext.AbstractManager":"../../../../../iris_s.war/ext/packages/core/src/AbstractManager.js",
"Ext.Ajax":"../../../../../iris_s.war/ext/packages/core/src/Ajax.js"
….etc.
When I deployed this application on server and run on browser then I use this
url
localhost:7001/iris_ops_app/
When I run application on browser it throws file not found error on console for each Ext File which is mentioned in “classic.json” file but these files exist under “http://localhost:7001/iris_ops_app/regshoapp” path.
Please let me know how can I resolve this path issue on browser. Actually “iris_s.war” should be replaced by “iris_ops_s/regshoapp” in “classic.json” file only then it will resolve all paths.

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