Search code examples
webpacknativescriptnativescript-angularnativescript-plugin

nativescript 6.0.1 can't run/prepare android application


I recently updated tns to version 6.0.1, which I have read always uses webpack to build projects.

I used tns migrate on my project, updated my local plugin to AndroidX (with Android Studio refactor option), generated my .aar file and used tns migrate on my plugin demo project. After that, when I try the demo project, it does work. My problem is on my main project: I added the new plugin to my project, removed and added android platform (tns-android version 6.0.0), but when I run tns prepare android or tns run android I get this error concerning my plugin:

ERROR in /workspace/workspace-nativescript/nativescript-my-plugin/src/my-plugin.ts
Module build failed (from ../node_modules/@ngtools/webpack/src/index.js):
Error: /workspace/workspace-nativescript/nativescript-my-plugin/src/my-plugin.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
    at NativeScriptAngularCompilerPlugin.getCompiledFile (/workspace/workspace-nativescript/my-project/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:844:23)
    at NativeScriptAngularCompilerPlugin.getCompiledFile (/workspace/workspace-nativescript/my-project/node_modules/nativescript-dev-webpack/plugins/NativeScriptAngularCompilerPlugin.js:28:26)
    at plugin.done.then (/workspace/workspace-nativescript/my-project/node_modules/@ngtools/webpack/src/loader.js:41:31)
    at process._tickCallback (internal/process/next_tick.js:68:7)

I was reading there were issues like this before regarding nativescript-dev-webpack, but I have version 1.0.1 from the tns migrate which is the last. Also here is my tnsconfig.json file (I also have a nsconfig.json file, but it's empty):

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true,
        "noEmitHelpers": true,
        "noEmitOnError": true,
        "lib": [
            "es6",
            "dom",
            "es2015.iterable"
        ],
        "baseUrl": ".",
        "paths": {
            "~/*": [
                "app/*"
            ],
            "*": [
                "./node_modules/tns-core-modules/*",
                "./node_modules/*"
            ]
        }
    },
    "exclude": [
        "node_modules",
        "platforms"
    ]
}

Solution

  • Most probably you've linked a TypeScript plugin in your main Angular app (instead of installing it from tgz).

    I suppose your plugin is already created from the official plugins seed and that's the reason the demo app is properly configured or you are running a TypeScript Demo, not an Angular one.

    When you want to link a plugin in your Angular app, you have to include it's TypeScript files (as far as I know, it's a limitation of the AngularCompilerPlugin). This is already configured in your demo apps if you start from the plugins seed (tns plugin create).

    In other words, open tsconfig.json in your main app (/workspace/workspace-nativescript/my-project/tsconfig.json) and replace its content with:

    {
        "compilerOptions": {
            "module": "commonjs",
            "target": "es5",
            "experimentalDecorators": true,
            "emitDecoratorMetadata": true,
            "noEmitHelpers": true,
            "noEmitOnError": true,
            "lib": [
                "es6",
                "dom",
                "es2015.iterable"
            ],
            "baseUrl": ".",
            "paths": {
                "~/*": [
                    "app/*"
                ],
                "*": [
                    "./node_modules/tns-core-modules/*",
                    "./node_modules/*"
                ]
            }
        },
        "include": [
            "../nativescript-my-plugin/src",
            "**/*"
        ],
        "exclude": [
            "../nativescript-my-plugin/src/node_modules",
            "node_modules",
            "platforms"
        ]
    }