Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):
CLI: 7
Cross-platform modules:7.1.0
Android Runtime:7.0.1
iOS Runtime:
Plugin(s):
Node.js:14.15.0
[ ] Please, attach your package.json and webpack.config.js as these configurations are usually critical for investigating issues with webpack
module.exports = env => {
// Add your custom Activities, Services and other Android app components here.
const appComponents = [
"@nativescript/core/ui/frame", "@nativescript/core/ui/frame/activity"
];
const platform = env && ((env.android && 'android') || (env.ios && 'ios'));
if (!platform) {
throw new Error('You need to provide a target platform!');
}
const {
// The 'appPath' and 'appResourcesPath' values are fetched from
// the nsconfig.json configuration file
// when bundling with tns run android|ios --bundle.
appPath = 'src',
appResourcesPath = 'App_Resources',
// You can provide the following flags when running 'tns run android|ios'
snapshot, // --env.snapshot,
production, // --env.production
configuration, // --env.configuration (consistent with angular cli usage)
projectName, // --env.projectName (drive configuration through angular projects)
uglify, // --env.uglify
report, // --env.report
sourceMap, // --env.sourceMap
hiddenSourceMap, // --env.hiddenSourceMap
hmr, // --env.hmr,
unitTesting, // --env.unitTesting
testing, // --env.testing
verbose, // --env.verbose
ci, // --env.ci
snapshotInDocker, // --env.snapshotInDocker
skipSnapshotTools, // --env.skipSnapshotTools
compileSnapshot // --env.compileSnapshot
if (!production) {
// for development purposes only
// for example, include mock json folder
// copyTargets.push({ from: 'tools/mockdata', to: 'assets/mockdata' });
if (hmr) {
ngCompilerTransformers.push(nsSupportHmrNg);
}
}
// when "@angular/core" is external, it's not included in the bundles. In this way, it will be used
// directly from node_modules and the Angular modules loader won't be able to resolve the lazy routes
// fixes https://github.com/NativeScript/nativescript-cli/issues/4024
if (env.externals && env.externals.indexOf('@angular/core') > -1) {
const appModuleRelativePath = getMainModulePath(
resolve(appFullPath, entryModule),
tsConfigName
);
if (appModuleRelativePath) {
const appModuleFolderPath = dirname(
resolve(appFullPath, appModuleRelativePath)
);
// include the new lazy loader path in the allowed ones
additionalLazyModuleResources.push(appModuleFolderPath);
}
}
if (!production && hmr) {
config.plugins.push(new webpack.HotModuleReplacementPlugin());
}
return config;
};`
Describe the bug
When doing tns run android --env.uglify compiles correctly. When opening the app it generates this error: System.err: An uncaught Exception occurred on "main" thread. System.err: Calling js method onAnimationEnd failed System.err: TypeError: Cannot read property '_executingContext' of undefined System.err: System.err: StackTrace: System.err: M(file: node_modules/@nativescript/core/ui/frame/fragment.transitions.android.js:537:40) System.err: at n.onAnimationEnd(file: node_modules/@nativescript/core/ui/frame/fragment.transitions.android.js:177:8) System.err: at com.tns.Runtime.callJSMethodNative(Native Method) System.err: at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1302) System.err: at com.tns.Runtime.callJSMethodImpl(Runtime.java:1188) System.err: at com.tns.Runtime.callJSMethod(Runtime.java:1175) System.err: at com.tns.Runtime.callJSMethod(Runtime.java:1153) System.err: at com.tns.Runtime.callJSMethod(Runtime.java:1149) System.err: at java.lang.Object_vendor_23473_22_n.onAnimationEnd(Unknown Source:10) System.err: at android.animation.Animator$AnimatorListener.onAnimationEnd(Animator.java:552) System.err: at android.animation.AnimatorSet.endAnimation(AnimatorSet.java:1294) System.err: at android.animation.AnimatorSet.doAnimationFrame(AnimatorSet.java:1079) System.err: at android.animation.AnimationHandler.doAnimationFrame(AnimationHandler.java:146) System.err: at android.animation.AnimationHandler.access$100(AnimationHandler.java:37) System.err: at android.animation.AnimationHandler$1.doFrame(AnimationHandler.java:54) System.err: at android.view.Choreographer$CallbackRecord.run(Choreographer.java:1090) System.err: at android.view.Choreographer.doCallbacks(Choreographer.java:893) System.err: at android.view.Choreographer.doFrame(Choreographer.java:809) System.err: at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:1078) System.err: at android.os.Handler.handleCallback(Handler.java:907) System.err: at android.os.Handler.dispatchMessage(Handler.java:105) System.err: at android.os.Looper.loop(Looper.java:216) System.err: at android.app.ActivityThread.main(ActivityThread.java:7625) System.err: at java.lang.reflect.Method.invoke(Native Method) System.err: at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:524) System.err: at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:987)
To Reproduce
tns run android --env.uglify. Open app
Environment Provide version numbers for the following components (information can be retrieved by running
tns info
in your project folder or by inspecting thepackage.json
of the project):CLI: 7
Cross-platform modules:7.1.0
Android Runtime:7.0.1
iOS Runtime:
Plugin(s):
Node.js:14.15.0
[ ] Please, attach your package.json and webpack.config.js as these configurations are usually critical for investigating issues with webpack
Package.json
{ "name": "@nativescript/template-drawer-navigation-ng", "main": "main.js", "displayName": "Navigation Drawer", "templateType": "App template", "version": "7.0.6", "description": "NativeScript Application", "author": "NativeScript Team <oss@nativescript.org>", "license": "SEE LICENSE IN <your-license-filename>", "publishConfig": { "access": "public" }, "keywords": [ "nstudio", "nativescript", "mobile", "angular", "{N}", "tns", "template", "drawer", "navigation", "category-general" ], "repository": "<fill-your-repository-here>", "homepage": "https://github.com/NativeScript/nativescript-app-templates", "bugs": { "url": "https://github.com/NativeScript/NativeScript/issues" }, "scripts": { "lint": "tslint \"src/**/*.ts\"" }, "dependencies": { "@angular/animations": "~11.0.0", "@angular/common": "~11.0.0", "@angular/compiler": "~11.0.0", "@angular/core": "~11.0.0", "@angular/forms": "~11.0.0", "@angular/platform-browser": "~11.0.0", "@angular/platform-browser-dynamic": "~11.0.0", "@angular/router": "~11.0.0", "@nativescript-community/ui-material-bottomsheet": "^5.2.7", "@nativescript-community/ui-material-floatingactionbutton": "^5.2.8", "@nativescript-community/ui-material-snackbar": "^5.2.5", "@nativescript/angular": "~11.0.0", "@nativescript/background-http": "^5.0.0", "@nativescript/camera": "^5.0.8", "@nativescript/core": "~7.1.0", "@nativescript/datetimepicker": "^2.0.4", "@nativescript/imagepicker": "^1.0.3", "@nativescript/theme": "^2.3.4", "@nativescript/types": "^7.2.0", "@nstudio/nativescript-cardview": "^2.0.1", "@nstudio/nativescript-loading-indicator": "^4.0.0", "nativescript-geolocation": "^5.1.0", "nativescript-google-maps-sdk": "^3.0.2", "nativescript-ui-listview": "^9.1.0", "nativescript-ui-sidedrawer": "~9.0.0", "reflect-metadata": "~0.1.12", "rxjs": "^6.6.0", "zone.js": "~0.11.1" }, "devDependencies": { "@angular/cli": "^10.2.0", "@angular/compiler-cli": "~11.0.0", "@nativescript/android": "7.0.1", "@nativescript/schematics": "^11.0.0", "@nativescript/webpack": "~4.0.0", "@ngtools/webpack": "~11.0.0", "codelyzer": "~6.0.0", "node-sass": "^4.14.1", "tslint": "~6.1.3", "typescript": "~4.0.0" }, "private": "true", "readme": "NativeScript Application" }
webpack.config.js : `const { join, relative, resolve, sep, dirname } = require('path'); const fs = require('fs');
const webpack = require('webpack'); const nsWebpack = require('@nativescript/webpack'); const nativescriptTarget = require('@nativescript/webpack/nativescript-target'); const { nsSupportHmrNg } = require('@nativescript/webpack/transformers/ns-support-hmr-ng'); const { nsTransformNativeClassesNg } = require("@nativescript/webpack/transformers/ns-transform-native-classes-ng"); const { parseWorkspaceConfig, hasConfigurations } = require('@nativescript/webpack/helpers/angular-config-parser'); const { getMainModulePath } = require('@nativescript/webpack/utils/ast-utils'); const { getNoEmitOnErrorFromTSConfig, getCompilerOptionsFromTSConfig } = require("@nativescript/webpack/utils/tsconfig-utils"); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const CopyWebpackPlugin = require('copy-webpack-plugin'); const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer'); const { NativeScriptWorkerPlugin } = require('nativescript-worker-loader/NativeScriptWorkerPlugin'); const TerserPlugin = require('terser-webpack-plugin'); const { getAngularCompilerPlugin } = require('@nativescript/webpack/plugins/NativeScriptAngularCompilerPlugin'); const hashSalt = Date.now().toString();
module.exports = env => { // Add your custom Activities, Services and other Android app components here. const appComponents = [ "@nativescript/core/ui/frame", "@nativescript/core/ui/frame/activity" ];
const platform = env && ((env.android && 'android') || (env.ios && 'ios')); if (!platform) { throw new Error('You need to provide a target platform!'); }
const AngularCompilerPlugin = getAngularCompilerPlugin(platform); const projectRoot = __dirname;
// Default destination inside platforms//...
const dist = resolve(
projectRoot,
nsWebpack.getAppPath(platform, projectRoot)
);
const { // The 'appPath' and 'appResourcesPath' values are fetched from // the nsconfig.json configuration file // when bundling with
tns run android|ios --bundle
. appPath = 'src', appResourcesPath = 'App_Resources',} = env;
const { fileReplacements, copyReplacements } = parseWorkspaceConfig(platform, configuration, projectName);
const useLibs = compileSnapshot; const isAnySourceMapEnabled = !!sourceMap || !!hiddenSourceMap; const externals = nsWebpack.getConvertedExternals(env.externals); const appFullPath = resolve(projectRoot, appPath); const appResourcesFullPath = resolve(projectRoot, appResourcesPath); let tsConfigName = 'tsconfig.json'; let tsConfigPath = resolve(projectRoot, tsConfigName); const tsConfigTnsName = 'tsconfig.tns.json'; const tsConfigTnsPath = resolve(projectRoot, tsConfigTnsName); if (fs.existsSync(tsConfigTnsPath)) { // support shared angular app configurations tsConfigName = tsConfigTnsName; tsConfigPath = tsConfigTnsPath; } const tsConfigEnvName = 'tsconfig.env.json'; const tsConfigEnvPath = resolve(projectRoot, tsConfigEnvName); if (hasConfigurations(configuration) && fs.existsSync(tsConfigEnvPath)) { // when configurations are used, switch to environments supported config tsConfigName = tsConfigEnvName; tsConfigPath = tsConfigEnvPath; } const entryModule =
${nsWebpack.getEntryModule(appFullPath, platform)}.ts
; const entryPath =.${sep}${entryModule}
; const entries = { bundle: entryPath }; const areCoreModulesExternal = Array.isArray(env.externals) && env.externals.some(e => e.indexOf('@nativescript') > -1); if (platform === 'ios' && !areCoreModulesExternal && !testing) { entries['tns_modules/@nativescript/core/inspector_modules'] = 'inspector_modules'; }const compilerOptions = getCompilerOptionsFromTSConfig(tsConfigPath); nsWebpack.processTsPathsForScopedModules({ compilerOptions }); nsWebpack.processTsPathsForScopedAngular({ compilerOptions });
const ngCompilerTransformers = [nsTransformNativeClassesNg]; const additionalLazyModuleResources = [];
const copyIgnore = { ignore: [
${relative(appPath, appResourcesFullPath)}/**
] }; const copyTargets = [ { from: { glob: 'assets/', dot: false } }, { from: { glob: 'fonts/', dot: false } }, ...copyReplacements, ];if (!production) { // for development purposes only // for example, include mock json folder // copyTargets.push({ from: 'tools/mockdata', to: 'assets/mockdata' });
}
// when "@angular/core" is external, it's not included in the bundles. In this way, it will be used // directly from node_modules and the Angular modules loader won't be able to resolve the lazy routes // fixes https://github.com/NativeScript/nativescript-cli/issues/4024 if (env.externals && env.externals.indexOf('@angular/core') > -1) { const appModuleRelativePath = getMainModulePath( resolve(appFullPath, entryModule), tsConfigName ); if (appModuleRelativePath) { const appModuleFolderPath = dirname( resolve(appFullPath, appModuleRelativePath) ); // include the new lazy loader path in the allowed ones additionalLazyModuleResources.push(appModuleFolderPath); } }
const ngCompilerPlugin = new AngularCompilerPlugin({ hostReplacementPaths: nsWebpack.getResolver([platform, 'tns']), platformTransformers: ngCompilerTransformers.map(t => t(() => ngCompilerPlugin, resolve(appFullPath, entryModule), projectRoot) ), mainPath: join(appFullPath, entryModule), tsConfigPath, skipCodeGeneration: false, sourceMap: !!isAnySourceMapEnabled, additionalLazyModuleResources: additionalLazyModuleResources, compilerOptions: { paths: compilerOptions.paths } });
let sourceMapFilename = nsWebpack.getSourceMapFilename( hiddenSourceMap, __dirname, dist );
const itemsToClean = [
${dist}/**/*
]; if (platform === 'android') { itemsToClean.push(${join( projectRoot, 'platforms', 'android', 'app', 'src', 'main', 'assets', 'snapshots' )}
); itemsToClean.push(${join( projectRoot, 'platforms', 'android', 'app', 'build', 'configurations', 'nativescript-android-snapshot' )}
); }const noEmitOnErrorFromTSConfig = getNoEmitOnErrorFromTSConfig(tsConfigName);
nsWebpack.processAppComponents(appComponents, platform); const config = { mode: production ? 'production' : 'development', context: appFullPath, externals, watchOptions: { ignored: [ appResourcesFullPath, // Don't watch hidden files '*/.' ] }, target: nativescriptTarget, entry: entries, output: { pathinfo: false, path: dist, sourceMapFilename, libraryTarget: 'commonjs2', filename: '[name].js', globalObject: 'global', hashSalt }, resolve: { extensions: ['.ts', '.js', '.scss', '.css'], // Resolve {N} system modules from @nativescript/core modules: [ resolve(dirname, 'node_modules/@nativescript/core'), resolve(__dirname, 'node_modules'), 'node_modules/@nativescript/core', 'node_modules' ], alias: { '~/package.json': resolve(projectRoot, 'package.json'), '~': appFullPath, "tns-core-modules": "@nativescript/core", "nativescript-angular": "@nativescript/angular", ...fileReplacements }, symlinks: true }, resolveLoader: { symlinks: false }, node: { // Disable node shims that conflict with NativeScript http: false, timers: false, setImmediate: false, fs: 'empty', dirname: false }, devtool: hiddenSourceMap ? 'hidden-source-map' : sourceMap ? 'inline-source-map' : 'none', optimization: { runtimeChunk: 'single', noEmitOnErrors: noEmitOnErrorFromTSConfig, splitChunks: { cacheGroups: { vendor: { name: 'vendor', chunks: 'all', test: (module, chunks) => { const moduleName = module.nameForCondition ? module.nameForCondition() : ''; return ( /[\/]node_modules[\/]/.test(moduleName) || appComponents.some(comp => comp === moduleName) ); }, enforce: true } } }, minimize: !!uglify, minimizer: [ new TerserPlugin({ parallel: true, cache: !ci, sourceMap: isAnySourceMapEnabled, terserOptions: { output: { comments: false, semicolons: !isAnySourceMapEnabled }, compress: { // The Android SBG has problems parsing the output // when these options are enabled collapse_vars: platform !== 'android', sequences: platform !== 'android', // custom drop_console: true, drop_debugger: true, ecma: 6, keep_infinity: platform === 'android', // for Chrome/V8 reduce_funcs: platform !== 'android', // for Chrome/V8 global_defs: { UGLIFIED: true } }, // custom ecma: 6, safari10: platform !== 'android' } }) ] }, module: { rules: [ { include: join(appFullPath, entryPath), use: [ // Require all Android app components platform === 'android' && { loader: '@nativescript/webpack/helpers/android-app-components-loader', options: { modules: appComponents } },
};
if (report) { // Generate report files for bundles content config.plugins.push( new BundleAnalyzerPlugin({ analyzerMode: 'static', openAnalyzer: false, generateStatsFile: true, reportFilename: resolve(projectRoot, 'report',
report.html
), statsFilename: resolve(projectRoot, 'report',stats.json
) }) ); }if (snapshot) { config.plugins.push( new nsWebpack.NativeScriptSnapshotPlugin({ chunk: 'vendor', angular: true, requireModules: [ 'reflect-metadata', '@angular/platform-browser', '@angular/core', '@angular/common', '@angular/router', '@nativescript/angular' ], projectRoot, webpackConfig: config, snapshotInDocker, skipSnapshotTools, useLibs }) ); }
if (!production && hmr) { config.plugins.push(new webpack.HotModuleReplacementPlugin()); }
return config; };`
Describe the bug When doing tns run android --env.uglify compiles correctly. When opening the app it generates this
error: System.err: An uncaught Exception occurred on "main" thread. System.err: Calling js method onAnimationEnd failed System.err: TypeError: Cannot read property '_executingContext' of undefined System.err: System.err: StackTrace: System.err: M(file: node_modules/@nativescript/core/ui/frame/fragment.transitions.android.js:537:40) System.err: at n.onAnimationEnd(file: node_modules/@nativescript/core/ui/frame/fragment.transitions.android.js:177:8) System.err: at com.tns.Runtime.callJSMethodNative(Native Method) System.err: at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1302) System.err: at com.tns.Runtime.callJSMethodImpl(Runtime.java:1188) System.err: at com.tns.Runtime.callJSMethod(Runtime.java:1175) System.err: at com.tns.Runtime.callJSMethod(Runtime.java:1153) System.err: at com.tns.Runtime.callJSMethod(Runtime.java:1149) System.err: at java.lang.Object_vendor_23473_22_n.onAnimationEnd(Unknown Source:10) System.err: at android.animation.Animator$AnimatorListener.onAnimationEnd(Animator.java:552) System.err: at android.animation.AnimatorSet.endAnimation(AnimatorSet.java:1294) System.err: at android.animation.AnimatorSet.doAnimationFrame(AnimatorSet.java:1079) System.err: at android.animation.AnimationHandler.doAnimationFrame(AnimationHandler.java:146) System.err: at android.animation.AnimationHandler.access$100(AnimationHandler.java:37) System.err: at android.animation.AnimationHandler$1.doFrame(AnimationHandler.java:54) System.err: at android.view.Choreographer$CallbackRecord.run(Choreographer.java:1090) System.err: at android.view.Choreographer.doCallbacks(Choreographer.java:893) System.err: at android.view.Choreographer.doFrame(Choreographer.java:809) System.err: at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:1078) System.err: at android.os.Handler.handleCallback(Handler.java:907) System.err: at android.os.Handler.dispatchMessage(Handler.java:105) System.err: at android.os.Looper.loop(Looper.java:216) System.err: at android.app.ActivityThread.main(ActivityThread.java:7625) System.err: at java.lang.reflect.Method.invoke(Native Method) System.err: at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:524) System.err: at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:987)
To Reproduce tns run android --env.uglify. Open app