Nativescript angular - Githubissues

kriefsacha commented 3 years ago

Hi, little question.

I have a nativescript angular app where i need to decrypt cbor. The thing is when i put cbor-web i have an error about textDecoder not defined, and when i put cbor (which is node-cbor i guess) i have an error about 'env' not defined.

It's working with webpack and typescript/javascript.

How do you think can i do ?

Please help. Thanks

hildjj commented 3 years ago

TextDecoder is built in to the web platform and node.js since v12.
I think the only place I'm using process.env is in the tests, but if you can provide a backtrace I'll look into it more.

I've never used nativescript, can you make sure you have the latest version if possible?

kriefsacha commented 3 years ago

@hildjj thank you for your fast answer that is a very big problem for us.

My node js version is 12.14.0.

The thing is nativescript is not a web platform but it uses javascript typescript and html so i thought it would work.

That's in case of if i use cbor-web.

About the regular cbor thats very weird because i soon as i put: const cbor = require('cbor'); i get:

System.err: TypeError: Cannot read property 'env' of undefined
System.err:
System.err: StackTrace:
System.err: java.lang.RuntimeException: Unable to create application com.tns.NativeScriptApplication: com.tns.NativeScriptException: Error calling module function
System.err: TypeError: Cannot read property 'env' of undefined
System.err: File: (file:///data/user/0/org.nativescript.VisualyScan/files/app/vendor.js:184044:19)
System.err:
System.err: StackTrace:
System.err: ../node_modules/readable-stream/readable.js(file:///data/user/0/org.nativescript.VisualyScan/files/app/vendor.js:184044:20)
System.err:     at __webpack_require__(file:///data/user/0/org.nativescript.VisualyScan/files/app/runtime.js:751:30)
System.err:     at fn(file:///data/user/0/org.nativescript.VisualyScan/files/app/runtime.js:121:20)
System.err:     at ../node_modules/stream-browserify/index.js(file:///data/user/0/org.nativescript.VisualyScan/files/app/vendor.js:202617:19)
System.err:     at __webpack_require__(file:///data/user/0/org.nativescript.VisualyScan/files/app/runtime.js:751:30)
System.err:     at fn(file:///data/user/0/org.nativescript.VisualyScan/files/app/runtime.js:121:20)
System.err:     at ../node_modules/cbor/lib/commented.js(file:///data/user/0/org.nativescript.VisualyScan/files/app/vendor.js:137069:16)
System.err:     at __webpack_require__(file:///data/user/0/org.nativescript.VisualyScan/files/app/runtime.js:751:30)
System.err:     at fn(file:///data/user/0/org.nativescript.VisualyScan/files/app/runtime.js:121:20)
System.err:     at ../node_modules/cbor/lib/cbor.js(file:///data/user/0/org.nativescript.VisualyScan/files/app/vendor.js:136961:21)
System.err:     at __webpack_require__(file:///data/user/0/org.nativescript.VisualyScan/files/app/runtime.js:751:30)
System.err:     at fn(file:///data/user/0/org.nativescript.VisualyScan/files/app/runtime.js:121:20)
System.err:     at ./app/scan/scan.component.ts(file:///data/user/0/org.nativescript.VisualyScan/files/app/bundle.js:3597:12)
System.err:     at __webpack_require__(file:///data/user/0/org.nativescript.VisualyScan/files/app/runtime.js:751:30)
System.err:     at fn(file:///data/user/0/org.nativescript.VisualyScan/files/app/runtime.js:121:20)
System.err:     at ./app/app-routing.module.ts(file:///data/user/0/org.nativescript.VisualyScan/files/app/bundle.js:273:82)
System.err:     at __webpack_require__(file:///data/user/0/org.nativescript.VisualyScan/files/app/runtime.js:751:30)
System.err:     at fn(file:///data/user/0/org.nativescript.VisualyScan/files/app/runtime.js:121:20)
System.err:     at ./app/app.module.ts(file:///data/user/0/org.nativescript.VisualyScan/files/app/bundle.js:401:77)
System.err:     at __webpack_require__(file:///data/user/0/org.nativescript.VisualyScan/files/app/runtime.js:751:30)
System.err:     at fn(file:///data/user/0/org.nativescript.VisualyScan/files/app/runtime.js:121:20)
System.err:     at (file:///data/user/0/org.nativescript.VisualyScan/files/app/bundle.js:7437:73)
System.err:     at ./main.ts(file:///data/user/0/org.nativescript.VisualyScan/files/app/bundle.js:7499:30)
System.err:     at __webpack_require__(file:///data/user/0/org.nativescript.VisualyScan/files/app/runtime.js:751:30)
System.err:     at checkDeferredModules(file:///data/user/0/org.nativescript.VisualyScan/files/app/runtime.js:44:23)
System.err:     at webpackJsonpCallback(file:///data/user/0/org.nativescript.VisualyScan/files/app/runtime.js:31:19)
System.err:     at (file:///data/user/0/org.nativescript.VisualyScan/files/app/bundle.js:2:57)
System.err:     at require(:1:266)

hildjj commented 3 years ago

OK, this use of process.env is coming from readable-stream. See https://github.com/nodejs/readable-stream/issues/412 for people that are having similar issues. You might be able to mock it out to just be {}, but I'm no webpack expert.

What JS runtime is nativescript using? It's really odd that it doesn't have TextDecoder. You should be able to use util.TextDecoder which does the same thing, if you can get webpack to substitute it.

kriefsacha commented 3 years ago

@hildjj the thing is that i don't know where to mock the process.env or substitue the TextDecoder either because on the result i see that you get oncbor-web its a regular js where you do new TextDecoder so how am i able to change it toutil.TextDecoder :( I don't know a lot of webpack neither.. That's too bad :/

hildjj commented 3 years ago

Something like:

const webpack = require('webpack');

module.exports = {
 {...}
    resolve: {
        alias: {
            process: 'process/browser',
        }
    },
    plugins: [
        new webpack.ProvidePlugin({
            process: 'process/browser',
        }),
    ]
}

and add process as a dependency.

kriefsacha commented 3 years ago

@hildjj for now i tried to do as on the PR you sended to me, adding the

typeof process !== 'undefined'

into readable-stream and now i get the same error but from util/util

kriefsacha commented 3 years ago

I did what you told me on webpack didnt change a thing. im gonna try to to the same thing i did at redable-stream but on util. Hope it will not touch something else. My webpack file just in case:

const { join, relative, resolve, sep, dirname } = require("path");

const webpack = require("webpack");
const nsWebpack = require("nativescript-dev-webpack");
const nativescriptTarget = require("nativescript-dev-webpack/nativescript-target");
const { nsReplaceBootstrap } = require("nativescript-dev-webpack/transformers/ns-replace-bootstrap");
const { nsReplaceLazyLoader } = require("nativescript-dev-webpack/transformers/ns-replace-lazy-loader");
const { nsSupportHmrNg } = require("nativescript-dev-webpack/transformers/ns-support-hmr-ng");
const { getMainModulePath } = require("nativescript-dev-webpack/utils/ast-utils");
const { getNoEmitOnErrorFromTSConfig, getCompilerOptionsFromTSConfig } = require("nativescript-dev-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-dev-webpack/plugins/NativeScriptAngularCompilerPlugin");
const hashSalt = Date.now().toString();

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",
    ];

    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/<platform>/...
    const dist = resolve(projectRoot, nsWebpack.getAppPath(platform, projectRoot));

    const {
        // The 'appPath' and 'appResourcesPath' values are fetched from
        // the nsconfig.json configuration file.
        appPath = "src",
        appResourcesPath = "App_Resources",

        // You can provide the following flags when running 'tns run android|ios'
        aot, // --env.aot
        snapshot, // --env.snapshot,
        production, // --env.production
        uglify, // --env.uglify
        report, // --env.report
        sourceMap, // --env.sourceMap
        hiddenSourceMap, // --env.hiddenSourceMap
        hmr, // --env.hmr,
        unitTesting, // --env.unitTesting
        verbose, // --env.verbose
        snapshotInDocker, // --env.snapshotInDocker
        skipSnapshotTools, // --env.skipSnapshotTools
        compileSnapshot // --env.compileSnapshot
    } = env;

    const useLibs = compileSnapshot;
    const isAnySourceMapEnabled = !!sourceMap || !!hiddenSourceMap;
    const externals = nsWebpack.getConvertedExternals(env.externals);
    const appFullPath = resolve(projectRoot, appPath);
    const tsConfigName = "tsconfig.tns.json";
    const tsConfigPath = join(__dirname, tsConfigName);
    const hasRootLevelScopedModules = nsWebpack.hasRootLevelScopedModules({ projectDir: projectRoot });
    const hasRootLevelScopedAngular = nsWebpack.hasRootLevelScopedAngular({ projectDir: projectRoot });
    let coreModulesPackageName = "tns-core-modules";
    const alias = {
        '~': appFullPath
    };

    const compilerOptions = getCompilerOptionsFromTSConfig(tsConfigPath);
    if (hasRootLevelScopedModules) {
        coreModulesPackageName = "@nativescript/core";
        alias["tns-core-modules"] = coreModulesPackageName;
        nsWebpack.processTsPathsForScopedModules({ compilerOptions });
    }

    if (hasRootLevelScopedAngular) {
        alias["nativescript-angular"] = "@nativescript/angular";
        nsWebpack.processTsPathsForScopedAngular({ compilerOptions });
    }

    const appResourcesFullPath = resolve(projectRoot, appResourcesPath);
    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("tns-core-modules") > -1);
    if (platform === "ios" && !areCoreModulesExternal) {
        entries["tns_modules/tns-core-modules/inspector_modules"] = "inspector_modules";
    };

    const ngCompilerTransformers = [];
    const additionalLazyModuleResources = [];
    if (aot) {
        ngCompilerTransformers.push(nsReplaceBootstrap);
    }

    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 lazy loader inside app module
            ngCompilerTransformers.push(nsReplaceLazyLoader);
            // 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: !aot,
        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(join(projectRoot, 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 tns-core-modules
            modules: [
                resolve(__dirname, `node_modules/${coreModulesPackageName}`),
                resolve(__dirname, "node_modules"),
                `node_modules/${coreModulesPackageName}`,
                "node_modules",
            ],
            alias: {
                process: 'process/browser'
            },
            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: true,
                    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",
                        }
                    }
                })
            ],
        },
        module: {
            rules: [
                {
                    include: join(appFullPath, 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: {
                                angular: true,
                                loadCss: !snapshot, // load the application css if in debug mode
                                unitTesting,
                                appFullPath,
                                projectRoot,
                                ignoredFiles: nsWebpack.getUserDefinedEntries(entries, platform)
                            }
                        },
                    ].filter(loader => !!loader)
                },

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

                {
                    test: /[\/|\\]app\.css$/,
                    use: [
                        "nativescript-dev-webpack/style-hot-loader",
                        {
                            loader: "nativescript-dev-webpack/css2json-loader",
                            options: { useForImports: true }
                        }
                    ]
                },
                {
                    test: /[\/|\\]app\.scss$/,
                    use: [
                        "nativescript-dev-webpack/style-hot-loader",
                        {
                            loader: "nativescript-dev-webpack/css2json-loader",
                            options: { useForImports: true }
                        },
                        "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"] },

                {
                    test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
                    use: [
                        "nativescript-dev-webpack/moduleid-compat-loader",
                        "nativescript-dev-webpack/lazy-ngmodule-hot-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",
                "process": "global.process",
            }),
            new webpack.ProvidePlugin({
                process: 'process/browser',
            }),
            // Remove all files from the out dir.
            new CleanWebpackPlugin(itemsToClean, { verbose: !!verbose }),
            // Copy assets to out dir. Add your own globs as needed.
            new CopyWebpackPlugin([
                { from: { glob: "fonts/**" } },
                { from: { glob: "**/*.jpg" } },
                { from: { glob: "**/*.png" } },
                { from: { glob: "**/*.jpeg" } },
                { from: { glob: "**/*.wav" } }
            ], { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] }),
            new CopyWebpackPlugin([
                {
                    from: 'src/assets/i18n',
                    to: `${dist}/i18n`,
                    context: projectRoot
                },
            ]),
            new nsWebpack.GenerateNativeScriptEntryPointsPlugin("bundle"),
            // For instructions on how to set up workers with webpack
            // check out https://github.com/nativescript/worker-loader
            new NativeScriptWorkerPlugin(),
            ngCompilerPlugin,
            // 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",
            angular: true,
            requireModules: [
                "reflect-metadata",
                "@angular/platform-browser",
                "@angular/core",
                "@angular/common",
                "@angular/router",
                "nativescript-angular/platform-static",
                "nativescript-angular/router",
            ],
            projectRoot,
            webpackConfig: config,
            snapshotInDocker,
            skipSnapshotTools,
            useLibs
        }));
    }

    if (hmr) {
        config.plugins.push(new webpack.HotModuleReplacementPlugin());
    }

    return config;
};

kriefsacha commented 3 years ago

I changed in util and then it told be about a variable called "browser" and then in stream-readable/writable.. im gonna continue tomorrow its 9:31pm here. Will keep you posted. Thanks for your help @hildjj

kriefsacha commented 3 years ago

@hildjj so what i did at the end, i made a webview , with a page that i created and puted on my website, it interacts with it threw events. I send her the string , she decode it threw cbor-web and send me back the result. It works very good if someone has the same problem

hildjj / node-cbor

Nativescript angular #152