Plugin is not working with nativescript 4.1

[isaacfi]

After follow the next: Upgrading to NativeScript Webpack 0.12.0

This plugin doesn't work. You can use your example angular project to get the errors.

$tns build android --bundle

Regards.

[edusperoni]

I worked around it by copying the content of the few ts imports I had (mainly interfaces) to the worker file. Then it at least ran.

Aditionally, I'm getting some seemingly random syntax errors when some workers are created. My import inside sqlite.worker.ts:

const Sqlite = require("nativescript-sqlite");

the random error (SyntaxError changes from run to run):

 {
JS:   "message": "Uncaught SyntaxError: Unexpected string",
JS:   "stackTrace": "SyntaxError: Unexpected string\n    at require (<anonymous>:1:266)\n    at Object.<anonymous> (file:///data/data/org.nativescript.example/files/app/tns_modules/nativescript-sqlite/sqlite.js:12:17)\n    at require (<anonymous>:1:266)\n    at Object.<anonymous> (file:///data/data/org.nativescript.example/files/app/shared/sqlite/sqlite.worker.js:5:14)\n    at require (<anonymous>:1:266)",
JS:   "filename": "undefined",
JS:   "lineno": 1
JS: }

I usually instantiate about 3 Workers in a row, which is when the error occurs.

[isaacfi]

@edusperoni , you can change:

const Sqlite = require("nativescript-sqlite");

to:

import * as Sqlite from "nativescript-sqlite";

to avoid the error

I don't have error syntax, my issue is this:

ERROR in ./services/bluetooth-scanner/bluetooth-scanner.worker.ts (../node_modules/nativescript-dev-webpack/moduleid-compat-loader.js!../node_modules/@ngtools/webpack/src!./services/bluetooth-scanner/bluetooth-scanner.worker.ts) Module build failed: Error: The AngularCompilerPlugin was not found. The @ngtools/webpack loader requires the plugin. at Object.ngcLoader (C:\EasyStore\easy-store.easyfee\node_modules\@ngtools\webpack\src\packages\ngtools\webpack\src\loader.ts:32:11)

And my worker is:

import "globals";

const context: Worker = self as any;
import * as utils from 'utils/utils';

// NOTE(Dan): This is a fix for the type mismatch in the typescript lib definition vs nativescript
//declare function postMessage(message: any);
// (<any>global).mBTSocket;
// (<any>global).mBTInputStream;

context.onmessage = (data: any): void => {
    const manager = utils.ad.getApplicationContext().getSystemService((<any>(android.content.Context)).BLUETOOTH_SERVICE);
    const adapter = manager.getAdapter();
    const deviceId = data.data;
    const remoteDevice = adapter.getRemoteDevice(deviceId);
    let socket: android.bluetooth.BluetoothSocket;
    let inputStream: java.io.InputStream;
    try {
        socket = remoteDevice.createInsecureRfcommSocketToServiceRecord(java.util.UUID.fromString('00001101-0000-1000-8000-00805F9B34FB'));
        socket.connect();
        inputStream = socket.getInputStream();
    } catch (ex) {
        if (inputStream != undefined)
            inputStream.close();
        if (socket != undefined)
            socket.close();
        return;
    }

    while (true) {
        if (inputStream.available() > 0) {
            const result = [];

            while (inputStream.available() > 0) {
                result.push(inputStream.read());
            }

            let formattedResult = result.map<string>(value => {
                return String.fromCharCode(value);
            }).join('');

            formattedResult = formattedResult.replace(/\s+/g, ' ').trim();
            formattedResult = formattedResult.indexOf(String.fromCharCode(166)) > -1 ? null : formattedResult;
            console.log("Bluetooth Scanner: " + formattedResult);
            if (formattedResult == undefined) {
                if (inputStream != undefined)
                    inputStream.close();
                if (socket != undefined)
                    socket.close();
                return;
            }
            else {
                (<any>global).postMessage(formattedResult);
            }
        }
    }
}

context.onerror = (error: ErrorEvent): void => {
    console.log('Error in worker global: ', error.message);
}

As you see I don't have any interface or external class.

Regards

[isaacfi]

I forgot to apply the steps 6 and 7 of the README

[edusperoni]

That's weird, I was having the same problem even when applying step 6 and 7, I'll test it tomorrow

[isaacfi]

@edusperoni put your webpack.config.js in a comment and I will help you

[edusperoni]

SyntaxError:

When I use import * as Sqlite from "nativescript-sqlite"; I get:

ERROR in app/shared/sqlite/sqlite.worker.ts(2,25): error TS2307: Cannot find module 'nativescript-sqlite'.

The original syntax error (using require) is completely random. Sometimes it'll run fine, while others will throw an error. I have yet to test it with webpack enabled.

Webpack + ts-loader:

When I try to import other ts files:

import { AsyncSqliteOptions, SqliteConstants } from "./sqlite.types";

sqlite.types.ts:

export enum SqliteConstants {
    RESULTSASOBJECT = "resultasobject",
    RESULTSASARRAY = "resultasarray",
    VALUESARENATIVE = "valuesarenative",
    VALUESARESTRINGS = "valuesarestring"
}

export interface AsyncSqliteOptions {
    resultType?: SqliteConstants.RESULTSASOBJECT | SqliteConstants.RESULTSASARRAY;
    valueType?: SqliteConstants.VALUESARENATIVE | SqliteConstants.VALUESARESTRINGS;
}

   ERROR in ./shared/sqlite/sqlite.types.ts
    Module build failed: Error: The AngularCompilerPlugin was not found. The @ngtools/webpack loader requires the plugin.
        at Object.ngcLoader (<snip>\node_modules\@ngtools\webpack\src\packages\ngtools\webpack\src\loader.ts:32:11)
     @ ../node_modules/ts-loader!./shared/sqlite/sqlite.worker.ts 4:21-46

If I remove the import and copy the content of sqlite.types.ts to the worker, it works, but it's very hacky.

The code works fine without webpack.

[isaacfi]

Register your file in references.d.ts to use it in your worker.

/// <reference path="./shared/sqlite/sqlite.types.ts" />

[edusperoni]

Those types are just so it's easier to send messages and help me with type completion as I'm using the free version.

The problem is the code worked fine with NS 4.0, and using workers with sqlite and shared imports are simply not working on 4.1+webpack 0.12.

I'm fine working around my custom types for now (it's already working in my test build), I'm mainly adding this info so it helps the dev team fix the regression

[Jmchemama]

Hello, I have the same problem as edusperoni, the import via reference.d.ts does not work I always have the error:

 ERROR in ./services/metier/soap.ts
> Module build failed: Error: The AngularCompilerPlugin was not found. The @ ngtools / webpack loader requires the plugin.
> [18-06-15 10: 55: 09.879] (CLI) at Object.ngcLoader (D: \ Projects \ NativeScript \ Itasq \ node_modules \ @ngtools \ webpack \ src \ packages \ ngtools \ webpack \ src \ loader.ts: 32:11)
> [18-06-15 10: 55: 09.879] (CLI) @ ../node_modules/ts-loader!./services/workers/worker-statut/worker-statut.worker.ts 3: 11-51

• the set works properly without webpack

• Importing all the code to remove the import in the worker would require a lot of time

[edusperoni]

It seems the AngularCompilerPlugin error was fixed in 0.13.0:

https://github.com/NativeScript/nativescript-dev-webpack/pull/539

I'll test it out. Still don't know why the syntax error occurs from time to time.

[edusperoni]

Nope, the problem still occurs.

I've narrowed it down to my enum. If I import my types without referencing them in code, no error occurs, but as soon as I reference my enum somewhere, webpack fails. Referencing interfaces only is fine.

[Jmchemama]

i used https://github.com/NativeScript/nativescript-dev-webpack/commit/e349fa82125d5edcc0ebbdb6cc27a9e060a6a5fa

but I still have the same mistake :

Child worker:
[18-06-24 13:14:23.455] (CLI)      1 asset
[18-06-24 13:14:23.455] (CLI)     [51] ./package.json 141 bytes {0} [optional] [built]
[18-06-24 13:14:23.455] (CLI)     [94] ./services/metier/soap.ts 271 bytes {0} [built] [failed] [1 error]
[18-06-24 13:14:23.455] (CLI)     [95] ../node_modules/ts-loader!./services/workers/worker-statut/worker-statut.worker.ts 297 bytes {0} [built]
[18-06-24 13:14:23.455] (CLI)         + 93 hidden modules
[18-06-24 13:14:23.455] (CLI)     ERROR in ./services/metier/soap.ts
[18-06-24 13:14:23.455] (CLI)     Module build failed: Error: The AngularCompilerPlugin was not found. The @ngtools/webpack loader requires the plugin.
[18-06-24 13:14:23.455] (CLI)         at Object.ngcLoader (Z:\Projet\Doowit\node_modules\@ngtools\webpack\src\packages\ngtools\webpack\src\loader.ts:32:11)
[18-06-24 13:14:23.455] (CLI)      @ ../node_modules/ts-loader!./services/workers/worker-statut/worker-statut.worker.ts 3:13-41

my package.json :

"dependencies": {
    "@angular/animations": "~6.0.6",
    "@angular/common": "~6.0.6",
    "@angular/compiler": "~6.0.6",
    "@angular/core": "~6.0.6",
    "@angular/forms": "~6.0.6",
    "@angular/http": "~6.0.6",
    "@angular/platform-browser": "~6.0.6",
    "@angular/platform-browser-dynamic": "~6.0.6",
    "@angular/router": "~6.0.6",
    "ajv": "^6.0.0",
    "crypto-js": "^3.1.9-1",
    "nativescript-angular": "^6.0.6",
    "nativescript-appversion": "^1.4.1",
    "nativescript-camera": "^4.0.2",
    "nativescript-checkbox": "^3.0.3",
    "nativescript-drawingpad": "^3.0.3",
    "nativescript-drop-down": "^3.2.5",
    "nativescript-geolocation": "^4.2.6",
    "nativescript-google-maps-sdk": "^2.6.0",
    "nativescript-image-cache": "^1.1.6",
    "nativescript-loading-indicator": "^2.4.0",
    "nativescript-numeric-keyboard": "^3.0.5",
    "nativescript-permissions": "^1.2.3",
    "nativescript-phone": "^1.3.1",
    "nativescript-sqlite": "^2.2.0",
    "nativescript-theme-core": "~1.0.4",
    "nativescript-ui-sidedrawer": "~4.0.0",
    "nativescript-webworkers": "^1.0.4",
    "reflect-metadata": "0.1.12",
    "rxjs": "~6.0.0 || >=6.1.0",
    "tns-core-modules": "^4.1.0",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.7.0-rc.0",
    "@angular/compiler-cli": "~6.1.0-beta.1",
    "babel-traverse": "6.26.0",
    "babel-types": "6.26.0",
    "babylon": "6.18.0",
    "codelyzer": "4.4.1",
    "lazy": "1.0.11",
    "nativescript-dev-sass": "1.6.0",
    "nativescript-dev-typescript": "0.7.1",
    "nativescript-dev-webpack": "0.14.1",
    "nativescript-worker-loader": "^0.9.1",
    "ts-loader": "4.4.1",
    "tslint": "5.10.0",
    "typescript": "~2.7.2"
  }

my webpack.config.js :

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

const webpack = require("webpack");
const nsWebpack = require("nativescript-dev-webpack");
const nativescriptTarget = require("nativescript-dev-webpack/nativescript-target");
const { PlatformReplacementHost } = require("nativescript-dev-webpack/host/platform");
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");
const { AngularCompilerPlugin } = require("@ngtools/webpack");

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 extensions = ["tns", platform];
    const platformHost = new PlatformReplacementHost(extensions);

    const projectRoot = __dirname;

    // 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: {
                                angular: true,
                                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$/, exclude :/\.worker.ts$/, use: [
                        "nativescript-dev-webpack/moduleid-compat-loader",
                        "@ngtools/webpack",
                    ]
                },
                { test: /\.worker.ts$/, loader: "ts-loader" },
                // 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" },
            ], { 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(),

            new AngularCompilerPlugin({
                host: platformHost,
                entryModule: resolve(appPath, "app.module#AppModule"),
                tsConfigPath: join(__dirname, "tsconfig.esm.json"),
                skipCodeGeneration: !aot,
            }),
            // 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,
        }));
    }

    return config;
};

I just want to import my class soap into my worker import { Soap } from "../../metier/soap"; I even tried to import it via reference.d.ts /// <reference path="app/services/metier/soap.ts" />

[jeremypele]

Hey guys, same issue here. Trying to import an static helper class into my worker but I get the Error: The AngularCompilerPlugin was not found. The @ngtools/webpack loader requires the plugin. error message too..

Had to duplicate logic for now :(

[NickIliev]

@jeremypele update your Angular, Webpack and webpack configuration following the upgrade instructions here

[YvesCandel]

We're having the same issue in our solution...

Everything is upgraded.

    "@angular/compiler-cli": "6.1.0",
    "@ngtools/webpack": "6.1.0",    
    "nativescript-dev-typescript": "0.7.1",
    "nativescript-dev-webpack": "0.15.0",
    "nativescript-worker-loader": "0.9.1",
    "tns-platform-declarations": "4.1.0",
    "typescript": "2.7.2"

...among other packages.

But still getting the same error:

Child worker:
     1 asset
    [0] ../node_modules/nativescript-dev-webpack/moduleid-compat-loader.js!../node_modules/@ngtools/webpack/src!./x-common/modules/services/service/http.worker.ts 255 bytes {0} [built] [failed] [1 error]

    ERROR in ./x-common/modules/services/service/http.worker.ts (../node_modules/nativescript-dev-webpack/moduleid-compat-loader.js!../node_modules/@ngtools/webpack/src!./x-common/modules/services/service/http.worker.ts)
    Module build failed: Error: The AngularCompilerPlugin was not found. The @ngtools/webpack loader requires the plugin.
        at Object.ngcLoader (/node_modules/@ngtools/webpack/src/loader.js:27:15)
Executing webpack failed with exit code 2.

Any solution to this issue? This is completely blocking our upgrade to Angular 6 right now.

[YvesCandel]

We have managed to fix the issue by converting our workers to javascript.

If you don't want to "allowJs" in your tsconfig, then create and compile the workers in a custom plugin and include that one as a dependency in your app.

Fingers crossed that using TypeScript workers inside your app will be fixed some day.

[jeremypele]

@YvesCandel Yup, did the very same thing for now 👍

[darxmac]

I'm running into the same issue. Still no better way than to re-write the worker to plan js ? (the problem is that I'm using quite a few ts classes that are shared between the worker and the rest of the app) so it would be a pain to manage going forward

[NickIliev]

@darxmac @jeremypele @YvesCandel you can now use TypeScript workers just as using plain JS workers.

For example:

let worker: any;

if ((<any>global).TNS_WEBPACK) {
    var TsWorker = require("nativescript-worker-loader!./workers/typescript.worker.js"); // note that here we are requiring the transpiled JS file
    worker = new TsWorker();
} else {
    worker = new Worker("./workers/typescript.worker.js");
}

return worker;

I've updated the demo via this PR which demonstrates the above logic. You can also use this POC app for reference.

[edusperoni]

It seems this was actually fixed in the latest nativescript-dev-webpack release, and not by changing the worker to js. I tried changing it to js and updating the webpack config file and it still failed when importing some other files. Updating nativescript-dev-webpack and updating dependencies+config fixed the error. I haven't tried changing it to a TS worker again, but this will only work on nativescript-dev-webpack >=0.16.0

Edit: Actually, scratch that. What I actually had to do was:

import { AsyncSqliteOptions, SqliteConstants } from "./sqlite.types.js";

instead of:

import { AsyncSqliteOptions, SqliteConstants } from "./sqlite.types";

Otherwise webpack will fail trying to load the .ts file.

I think this issue should probably be reopened.

[carrbrpoa]

So, upgraded everything (I guess), and even changed import statements in my worker:

var couchbaseModule = require("nativescript-couchbase");
import * as accentsUtil from "../../utils/accents-util";
// var accentsUtil = require("../../utils/accents-util");
// var hashUtil = require("../../utils/hash-util");
import * as hashUtil from "../../utils/hash-util";

(commented lines is from previous trial), but error persists:

Build:

Child worker:
                             Asset      Size  Chunks             Chunk Names
    074e18a6e90564779fd3.worker.js  1000 KiB    main  [emitted]  main
    Entrypoint main = 074e18a6e90564779fd3.worker.js
    [./app/shared/common/database.worker.js] 22.1 KiB {main} [built]
    [./app/utils/accents-util.ts] 291 bytes {main} [built] [failed] [1 error]
    [./app/utils/hash-util.ts] 291 bytes {main} [built] [failed] [1 error]
    [./package.json] 123 bytes {main} [optional] [built]
        + 94 hidden modules

    ERROR in ./app/utils/accents-util.ts
    Module build failed (from ../node_modules/@ngtools/webpack/src/index.js):
    Error: The AngularCompilerPlugin was not found. The @ngtools/webpack loader requires the plugin.
        at Object.ngcLoader (c:\git\OSPOAApp\node_modules\@ngtools\webpack\src\loader.js:27:15)
     @ ./app/shared/common/database.worker.js 4:0-56 279:23-51 279:76-104 279:134-162 279:187-215 287:23-51 287:76-104 287:134-162 287:187-215

    ERROR in ./app/utils/hash-util.ts
    Module build failed (from ../node_modules/@ngtools/webpack/src/index.js):
    Error: The AngularCompilerPlugin was not found. The @ngtools/webpack loader requires the plugin.
        at Object.ngcLoader (c:\git\OSPOAApp\node_modules\@ngtools\webpack\src\loader.js:27:15)
     @ ./app/shared/common/database.worker.js 7:0-50 299:26-47
Webpack compilation complete.
Executing webpack failed with exit code 2.
# tns build android

package.json:

"dependencies": {
    "@angular/animations": "~6.1.0",
    "@angular/common": "~6.1.0",
    "@angular/compiler": "~6.1.0",
    "@angular/core": "~6.1.0",
    "@angular/forms": "~6.1.0",
    "@angular/http": "~6.1.0",
    "@angular/platform-browser": "~6.1.0",
    "@angular/platform-browser-dynamic": "~6.1.0",
    "@angular/router": "~6.1.0",
    "@nstudio/nativescript-camera-plus": "^1.1.1",
    "base-64": "^0.1.0",
    "core-js": "^2.5.4",
    "nativescript-angular": "^6.2.0",
    "nativescript-appversion": "^1.4.1",
    "nativescript-couchbase": "^1.0.18",
    "nativescript-drop-down": "^3.1.0",
    "nativescript-floatingactionbutton": "^4.1.3",
    "nativescript-geolocation": "^3.0.1",
    "nativescript-gif": "^3.1.1",
    "nativescript-image-filters": "2.2.0",
    "nativescript-imagepicker": "^6.0.2",
    "nativescript-loading-indicator": "^2.3.2",
    "nativescript-ngx-fonticon": "^4.0.0",
    "nativescript-plugin-firebase": "^7.3.0",
    "nativescript-powerinfo": "^1.0.7",
    "nativescript-pro-ui": "next",
    "nativescript-ripple": "^2.0.0",
    "nativescript-theme-core": "~1.0.4",
    "nativescript-toast": "^1.4.6",
    "nativescript-webview-interface": "^1.4.1",
    "reflect-metadata": "~0.1.8",
    "rxjs": "^6.0.0",
    "tns-core-modules": "~4.2.0",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.8.0",
    "@angular/cli": "^6.2.0",
    "@angular/compiler-cli": "~6.1.0",
    "@nativescript/schematics": "~0.3.0",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "nativescript-dev-typescript": "^0.7.4",
    "nativescript-dev-webpack": "^0.17.0",
    "tns-platform-declarations": "^5.0.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1",
    "typescript": "~2.7.2"
  }

[joshcomley]

It seems this was actually fixed in the latest nativescript-dev-webpack release, and not by changing the worker to js. I tried changing it to js and updating the webpack config file and it still failed when importing some other files. Updating nativescript-dev-webpack and updating dependencies+config fixed the error. I haven't tried changing it to a TS worker again, but this will only work on nativescript-dev-webpack >=0.16.0

Edit: Actually, scratch that. What I actually had to do was:

import { AsyncSqliteOptions, SqliteConstants } from "./sqlite.types.js";

instead of:

import { AsyncSqliteOptions, SqliteConstants } from "./sqlite.types";

Otherwise webpack will fail trying to load the .ts file.

I think this issue should probably be reopened.

I agree this should be reopened. The sample projects do not give an example of using shared, internal code within the webworker.

What I had to do (based on your suggestion) was in my internal "engine" that I want the webworker to use, I changed all imports to end in .js, which fixed the issue.

It might be possible to tweak webpack.config.js to include the folder I need in the worker compilation. I'll have a look at that shortly.