search

NativeScript / nativescript-dev-webpack

A package to help with webpacking NativeScript apps.
Apache License 2.0
97 stars 49 forks source link

Snapshot Bundle failed with custom android activity #568

Closed RadouaneRoufid closed 6 years ago

RadouaneRoufid commented 6 years ago

Issue Checklist

Tell us about the problem

I'm using a custom android activity in my nativescript project. 

@JavaProxy("org.myApp.MainActivity")
class Activity extends android.support.v7.app.AppCompatActivity {
...
}

I declared this activity in my AndroidManifest.xml as below 

<application
            android:name="com.tns.NativeScriptApplication"
            android:allowBackup="true"
            android:icon="@drawable/icon"
            android:label="@string/app_name"
            android:theme="@style/AppTheme">

        <activity
                android:name="org.myApp.MainActivity"
                android:launchMode="singleTask"
                android:label="@string/title_activity_kimera"
                android:configChanges="keyboardHidden|orientation|screenSize"
                android:theme="@style/LaunchScreenTheme">
...

I added this activity in webpack.config.js 

    // Add your custom Activities, Services and other Android app components here.
    const appComponents = [
        "tns-core-modules/ui/frame",
        "tns-core-modules/ui/frame/activity",
        resolve(__dirname, "app/activity.android.ts"),
    ];

Building with: tns build android --bundle --env.aot --env.uglify --env.snapshot results with the following error: 

Warning: there already is an extend called org.myApp.MainActivity.
Warning: The static binding generator will generate extend from:vendor.js implementation
Exception in thread "main" java.io.IOException: File already exists. This may lead to undesired behavior.
Please change the name of one of the extended classes.
File:/home/ruser/IdeaProjects/deepan/deepan-parent/deepan-front/src/gui/nativescript/platforms/android/app/src/main/java/org/myApp/MainActivity.java Class: org.myApp.MainActivity
        at org.nativescript.staticbindinggenerator.Generator.writeBindings(Generator.java:78)
        at org.nativescript.staticbindinggenerator.Main.main(Main.java:48)

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:runSbg'.
> Process 'command '/usr/lib/jvm/java-8-oracle/bin/java'' finished with non-zero exit value 1

Local environment

Project data

const webpack = require("webpack"); const nsWebpack = require("nativescript-dev-webpack"); const nativescriptTarget = require("nativescript-dev-webpack/nativescript-target"); 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 UglifyJsPlugin = require("uglifyjs-webpack-plugin");

module.exports = env => { // Add your custom Activities, Services and other Android app components here. const appComponents = [ "tns-core-modules/ui/frame", "tns-core-modules/ui/frame/activity", resolve(__dirname, "app/activity.android.ts"), ];

const platform = env && (env.android && "android" || env.ios && "ios");
if (!platform) {
    throw new Error("You need to provide a target platform!");
}

const platforms = ["ios", "android"];
const projectRoot = __dirname;
nsWebpack.loadAdditionalPlugins({ projectDir: projectRoot });

// Default destination inside platforms/<platform>/...
const dist = resolve(projectRoot, nsWebpack.getAppPath(platform, projectRoot));
const appResourcesPlatformDir = platform === "android" ? "Android" : "iOS";

const {
    // The 'appPath' and 'appResourcesPath' values are fetched from
    // the nsconfig.json configuration file
    // when bundling with `tns run android|ios --bundle`.
    appPath = "app",
    appResourcesPath = "app/App_Resources",

    // You can provide the following flags when running 'tns run android|ios'
    aot, // --env.aot
    snapshot, // --env.snapshot
    uglify, // --env.uglify
    report, // --env.report
} = env;

const appFullPath = resolve(projectRoot, appPath);
const appResourcesFullPath = resolve(projectRoot, appResourcesPath);

const entryModule = aot ?
    nsWebpack.getAotEntryModule(appFullPath) : 
    `${nsWebpack.getEntryModule(appFullPath)}.ts`;
const entryPath = `.${sep}${entryModule}`;

const config = {
    mode: uglify ? "production" : "development",
    context: appFullPath,
    watchOptions: {
        ignored: [
            appResourcesFullPath,
            // Don't watch hidden files
            "**/.*",
        ]
    },
    target: nativescriptTarget,
    entry: {
        bundle: entryPath,
    },
    output: {
        pathinfo: false,
        path: dist,
        libraryTarget: "commonjs2",
        filename: "[name].js",
        globalObject: "global",
    },
    resolve: {
        extensions: [".ts", ".js", ".scss", ".css"],
        // Resolve {N} system modules from tns-core-modules
        modules: [
            resolve(__dirname, "node_modules/tns-core-modules"),
            resolve(__dirname, "node_modules"),
            "node_modules/tns-core-modules",
            "node_modules",
        ],
        alias: {
            '~': appFullPath
        },
        symlinks: true
    },
    resolveLoader: {
        symlinks: false
    },
    node: {
        // Disable node shims that conflict with NativeScript
        "http": false,
        "timers": false,
        "setImmediate": false,
        "fs": "empty",
        "__dirname": false,
    },
    devtool: "none",
    optimization: {
        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 UglifyJsPlugin({
                uglifyOptions: {
                    parallel: true,
                    cache: true,
                    output: {
                        comments: false,
                    },
                    compress: {
                        // The Android SBG has problems parsing the output
                        // when these options are enabled
                        'collapse_vars': platform !== "android",
                        sequences: platform !== "android",
                    }
                }
            })
        ],
    },
    module: {
        rules: [
            {
                test: new RegExp(entryPath),
                use: [
                    // Require all Android app components
                    platform === "android" && {
                        loader: "nativescript-dev-webpack/android-app-components-loader",
                        options: { modules: appComponents }
                    },

                    {
                        loader: "nativescript-dev-webpack/bundle-config-loader",
                        options: {
                            registerPages: false,
                            loadCss: !snapshot, // load the application css if in debug mode
                        }
                    },
                ].filter(loader => !!loader)
            },

            { test: /\.html$|\.xml$/, use: "raw-loader" },

            // tns-core-modules reads the app.css and its imports using css-loader
            {
                test: /[\/|\\]app\.css$/,
                use: {
                    loader: "css-loader",
                    options: { minimize: false, url: false },
                }
            },
            {
                test: /[\/|\\]app\.scss$/,
                use: [
                    { loader: "css-loader", options: { minimize: false, url: false } },
                    "sass-loader"
                ]
            },

            // Angular components reference css files and their imports using raw-loader
            { test: /\.css$/, exclude: /[\/|\\]app\.css$/, use: "raw-loader" },
            { test: /\.scss$/, exclude: /[\/|\\]app\.scss$/, use: ["raw-loader", "resolve-url-loader", "sass-loader"] },

            // Compile TypeScript files with ahead-of-time compiler.
            {
                test: /.ts$/, use: [
                    "nativescript-dev-webpack/moduleid-compat-loader",
                    "@ngtools/webpack",
                ]
            },

            // Mark files inside `@angular/core` as using SystemJS style dynamic imports.
            // Removing this will cause deprecation warnings to appear.
            {
                test: /[\/\\]@angular[\/\\]core[\/\\].+\.js$/,
                parser: { system: true },
            },
        ],
    },
    plugins: [
        // Define useful constants like TNS_WEBPACK
        new webpack.DefinePlugin({
            "global.TNS_WEBPACK": "true",
        }),
        // Remove all files from the out dir.
        new CleanWebpackPlugin([ `${dist}/**/*` ]),
        // Copy native app resources to out dir.
        new CopyWebpackPlugin([
            {
                from: `${appResourcesFullPath}/${appResourcesPlatformDir}`,
                to: `${dist}/App_Resources/${appResourcesPlatformDir}`,
                context: projectRoot
            },
        ]),
        // Copy assets to out dir. Add your own globs as needed.
        new CopyWebpackPlugin([
            { from: "fonts/**" },
            { from: "**/*.jpg" },
            { from: "**/*.png" },
            { from: "assets/i18n/*.json" },
        ], { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] }),
        // Generate a bundle starter script and activate it in package.json
        new nsWebpack.GenerateBundleStarterPlugin([
            "./vendor",
            "./bundle",
        ]),
        // For instructions on how to set up workers with webpack
        // check out https://github.com/nativescript/worker-loader
        new NativeScriptWorkerPlugin(),
        // AngularCompilerPlugin with augmented NativeScript filesystem to handle platform specific resource resolution.
        new nsWebpack.NativeScriptAngularCompilerPlugin({
            entryModule: resolve(appPath, "app.module#AppModule"),
            tsConfigPath: join(__dirname, "tsconfig.esm.json"),
            skipCodeGeneration: !aot,
            platformOptions: {
                platform,
                platforms,
            },
        }),
        // Does IPC communication with the {N} CLI to notify events when running in watch mode.
        new nsWebpack.WatchStateLoggerPlugin(),
    ],
};

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",
        requireModules: [
            "reflect-metadata",
            "@angular/platform-browser",
            "@angular/core",
            "@angular/common",
            "@angular/router",
            "nativescript-angular/platform-static",
            "nativescript-angular/router",
        ],
        projectRoot,
        webpackConfig: config,
    }));
}

return config;

};



[NativeScript Forum]: http://forum.nativescript.org
[issues]: https://github.com/nativescript/nativescript-dev-webpack/issues?utf8=✓&q=is%3Aissue
[demo apps]: ../demo
[documentation]: https://docs.nativescript.org/best-practices/bundling-with-webpack
vchimev commented 6 years ago

Hey @RadouaneRoufid,

I've tried to reproduce this issue with my android-extend-ng sample app, but to no avail. Are you able to replicate the problem with this project at your end?

RadouaneRoufid commented 6 years ago

Hi @vchimev

I changed resolve(__dirname, "app/activity.android.ts"), to "./activity.android.ts" in my webpack.config.js and build is done correctly now with a warning. 

Warning: there already is an extend called org.myApp.MainActivity.
Warning: The static binding generator will generate extend from:bundle.js implementation

I'm using nativescript-dev-webpack 0.12.0. I will migrate to 0.13.0 as in android-extend-ng.

Thank you for your reactivity !

RadouaneRoufid commented 6 years ago

I have a little question @vchimev. I need to import my custoMActivity in my app.component. The problem is in dev mode, I need to import from import {whatever} from "./activity.android"; and in bundle mode // import {whatever} from "./activity";

How can i handle this scenario ?

vchimev commented 6 years ago

Hey @RadouaneRoufid,

The right way is to add a common d.ts file for the platform-specific file. I gave it a try in this commit. Also, here is a descriptive comment on this topic.

vchimev commented 6 years ago

Hey @RadouaneRoufid,

Let me follow up that adding a custom android app component to the array on the top of the webpack.config.js file should be resolved to an absolute path, i.e. resolve(__dirname, "app/activity.android.ts") in order to be included in the common vendor.js chunk. Adding it by a relative path is only a workaround for this issue on Windows, which fix is on a pull request.

In regard to the original problem with build failed, you reported, I updated all the demos in the branch for the fix above to extend android activity and application, and managed to execute them successfully, not reproducing the problem.

Do you still experience it?

RadouaneRoufid commented 6 years ago

I'm still using "nativescript-dev-webpack": "^0.12.0" which requires a relative path to activity.android.ts on linux platform.

const appComponents = [
        "tns-core-modules/ui/frame",
        "tns-core-modules/ui/frame/activity",
        "./activity.android.ts",
    ];