Error on upgrading to @nativescript/angular 9.0.0

[PhilippS93]

Which platform(s) does your issue occur on?

• Android
• tns-android: 6.5.1
• device: Samsung Galaxy S9

Please, tell us how to recreate the issue in as much detail as possible.

Upgrade to @nativescript/angular 9.0.0 and try to use nativescript-facebook 4.2.1. The following error occurs on tns run android

tns run android --bundle --env.uglify --env.aot --env.sourceMap --env.dev

Searching for devices...
Preparing project...
Warning: Entry point '@nativescript/angular' contains deep imports into 'C:/Users/Staud/WebstormProjects/nativescript-app2/node_modules/@nativescript/core/utils/types', 'C:/Users/S
taud/WebstormProjects/nativescript-app2/node_modules/@nativescript/core/ui/animation/keyframe-animation', 'C:/Users/Staud/WebstormProjects/nativescript-app2/node_modules/@nativescr
ipt/core/ui/styling/css-animation-parser', 'C:/Users/Staud/WebstormProjects/nativescript-app2/node_modules/@nativescript/core/ui/styling/converters', 'C:/Users/Staud/WebstormProjec
ts/nativescript-app2/node_modules/@nativescript/core/file-system/file-system', 'C:/Users/Staud/WebstormProjects/nativescript-app2/node_modules/@nativescript/core/ui/layouts/layout-
base'. This is probably not a problem, but may cause the compilation of entry points to be out of order.
Warning: Entry point 'apollo-angular-link-http' contains deep imports into 'C:/Users/Staud/WebstormProjects/nativescript-app2/node_modules/graphql/language/printer'. This is probab
ly not a problem, but may cause the compilation of entry points to be out of order.
Warning: Entry point 'nativescript-facebook' contains deep imports into 'C:/Users/Staud/WebstormProjects/nativescript-app2/node_modules/nativescript-angular/element-registry'. This
 is probably not a problem, but may cause the compilation of entry points to be out of order.
Warning: Entry point 'nativescript-ng-ripple' contains deep imports into 'C:/Users/Staud/WebstormProjects/nativescript-app2/node_modules/tns-core-modules/ui/gestures/gestures', 'C:
/Users/Staud/WebstormProjects/nativescript-app2/node_modules/tns-core-modules/ui/styling/style-properties'. This is probably not a problem, but may cause the compilation of entry p
oints to be out of order.
Warning: Entry point 'autocomplete-directives' contains deep imports into 'C:/Users/Staud/WebstormProjects/nativescript-app2/node_modules/nativescript-angular/element-registry'. Th
is is probably not a problem, but may cause the compilation of entry points to be out of order.
Warning: Entry point 'calendar-directives' contains deep imports into 'C:/Users/Staud/WebstormProjects/nativescript-app2/node_modules/nativescript-angular/element-registry'. This i
s probably not a problem, but may cause the compilation of entry points to be out of order.
Warning: Entry point 'dataform-directives' contains deep imports into 'C:/Users/Staud/WebstormProjects/nativescript-app2/node_modules/nativescript-angular/element-registry'. This i
s probably not a problem, but may cause the compilation of entry points to be out of order.
Warning: Entry point 'listview-directives' contains deep imports into 'C:/Users/Staud/WebstormProjects/nativescript-app2/node_modules/nativescript-angular/element-registry', 'C:/Us
ers/Staud/WebstormProjects/nativescript-app2/node_modules/nativescript-angular/renderer', 'C:/Users/Staud/WebstormProjects/nativescript-app2/node_modules/tns-core-modules/ui/layout
s/layout-base'. This is probably not a problem, but may cause the compilation of entry points to be out of order.
Compiling nativescript-facebook : main as commonjs
Compiling nativescript-ng-ripple : main as commonjs
Error: Error on worker #1: Error: There is no typings path for FacebookShareButtonDirective in C:/Users/Staud/WebstormProjects/nativescript-app2/node_modules/nativescript-facebook/
angular/nativescript-facebook-directives.js.
We need to add an export for this class to a .d.ts typings file because Angular compiler needs to be able to reference this class in compiled code, such as templates.
The simplest fix for this is to ensure that this class is exported from the package's entry-point.
    at C:\Users\Staud\WebstormProjects\nativescript-app2\node_modules\@angular\compiler-cli\ngcc\src\rendering\dts_renderer.js:148:31
    at Array.forEach (<anonymous>)
    at DtsRenderer.getTypingsFilesToRender (C:\Users\Staud\WebstormProjects\nativescript-app2\node_modules\@angular\compiler-cli\ngcc\src\rendering\dts_renderer.js:146:45)
    at DtsRenderer.renderProgram (C:\Users\Staud\WebstormProjects\nativescript-app2\node_modules\@angular\compiler-cli\ngcc\src\rendering\dts_renderer.js:62:37)
    at Transformer.transform (C:\Users\Staud\WebstormProjects\nativescript-app2\node_modules\@angular\compiler-cli\ngcc\src\packages\transformer.js:87:52)
    at C:\Users\Staud\WebstormProjects\nativescript-app2\node_modules\@angular\compiler-cli\ngcc\src\execution\create_compile_function.js:48:42
    at C:\Users\Staud\WebstormProjects\nativescript-app2\node_modules\@angular\compiler-cli\ngcc\src\execution\cluster\worker.js:84:54
    at step (C:\Users\Staud\WebstormProjects\nativescript-app2\node_modules\tslib\tslib.js:139:27)
    at Object.next (C:\Users\Staud\WebstormProjects\nativescript-app2\node_modules\tslib\tslib.js:120:57)
    at C:\Users\Staud\WebstormProjects\nativescript-app2\node_modules\tslib\tslib.js:113:75
    at ClusterMaster.onWorkerMessage (C:\Users\Staud\WebstormProjects\nativescript-app2\node_modules\@angular\compiler-cli\ngcc\src\execution\cluster\master.js:194:27)
    at C:\Users\Staud\WebstormProjects\nativescript-app2\node_modules\@angular\compiler-cli\ngcc\src\execution\cluster\master.js:54:95
    at ClusterMaster.<anonymous> (C:\Users\Staud\WebstormProjects\nativescript-app2\node_modules\@angular\compiler-cli\ngcc\src\execution\cluster\master.js:292:57)
    at step (C:\Users\Staud\WebstormProjects\nativescript-app2\node_modules\tslib\tslib.js:139:27)
    at Object.next (C:\Users\Staud\WebstormProjects\nativescript-app2\node_modules\tslib\tslib.js:120:57)
    at C:\Users\Staud\WebstormProjects\nativescript-app2\node_modules\tslib\tslib.js:113:75
    at new Promise (<anonymous>)
    at Object.__awaiter (C:\Users\Staud\WebstormProjects\nativescript-app2\node_modules\tslib\tslib.js:109:16)
    at EventEmitter.<anonymous> (C:\Users\Staud\WebstormProjects\nativescript-app2\node_modules\@angular\compiler-cli\ngcc\src\execution\cluster\master.js:286:32)
    at EventEmitter.emit (events.js:189:13)
C:\Users\Staud\WebstormProjects\nativescript-app2\node_modules\webpack-cli\bin\cli.js:453
                                throw err;
                                ^

Error: NGCC failed.
    at NgccProcessor.process (C:\Users\Staud\WebstormProjects\nativescript-app2\node_modules\@ngtools\webpack\src\ngcc_processor.js:76:19)
    at compiler.hooks.environment.tap (C:\Users\Staud\WebstormProjects\nativescript-app2\node_modules\@ngtools\webpack\src\angular_compiler_plugin.js:579:31)
    at SyncHook.eval [as call] (eval at create (C:\Users\Staud\WebstormProjects\nativescript-app2\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:9:1)
    at SyncHook.lazyCompileHook (C:\Users\Staud\WebstormProjects\nativescript-app2\node_modules\tapable\lib\Hook.js:154:20)
    at webpack (C:\Users\Staud\WebstormProjects\nativescript-app2\node_modules\webpack\lib\webpack.js:51:30)
    at processOptions (C:\Users\Staud\WebstormProjects\nativescript-app2\node_modules\webpack-cli\bin\cli.js:441:16)
    at yargs.parse (C:\Users\Staud\WebstormProjects\nativescript-app2\node_modules\webpack-cli\bin\cli.js:536:3)
    at Object.parse (C:\Users\Staud\WebstormProjects\nativescript-app2\node_modules\webpack-cli\node_modules\yargs\yargs.js:567:18)
    at C:\Users\Staud\WebstormProjects\nativescript-app2\node_modules\webpack-cli\bin\cli.js:219:8
    at Object.<anonymous> (C:\Users\Staud\WebstormProjects\nativescript-app2\node_modules\webpack-cli\bin\cli.js:538:3)
    at Module._compile (internal/modules/cjs/loader.js:701:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object.<anonymous> (C:\Users\Staud\WebstormProjects\nativescript-app2\node_modules\webpack\bin\webpack.js:155:2)
    at Module._compile (internal/modules/cjs/loader.js:701:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:754:12)
    at startup (internal/bootstrap/node.js:283:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)
Executing webpack failed with exit code 1.
npm ERR! file C:\WINDOWS\system32\cmd.exe
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! @ run-android-dev: "tns run android --bundle --env.uglify --env.aot --env.sourceMap --env.dev"
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the @ run-android-dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Staud\AppData\Roaming\npm-cache\_logs\2020-06-28T12_19_45_041Z-debug.log

[PhilippS93]

The error seems related to the usage of the new Ivy compiler. Disabling it in tsconfig.json with "enableIvy": false solves the problem. But then, we can not use Ivy - so the bug is still open.

[StefanAleksik]

Try adding this param in your ngcc.config.js

"nativescript-facebook": {
    entryPoints: {
      "angular": {
        override: {
          main: "./index.js",
          typings: "./index.d.ts",
        },
        ignoreMissingDependencies: true,
      }
    },
    ignorableDeepImportMatchers: [
      /tns-core-modules\//,
      /@nativescript\/core\//,
      /@nativescript\/angular\//
    ]
  },

[PhilippS93]

Still getting

Compiling @angular/platform-browser : es2015 as esm2015
Compiling @angular/common/http : es2015 as esm2015
Compiling @angular/router : es2015 as esm2015
Compiling @angular/common/testing : es2015 as esm2015
Compiling @angular/forms : es2015 as esm2015
Compiling apollo-angular : es2015 as esm2015
Compiling @angular/animations/browser/testing : es2015 as esm2015
Compiling nativescript-facebook : main as commonjs
Compiling nativescript-localize : main as commonjs
Error: Error on worker #8: Error: There is no typings path for FacebookShareButtonDirective in C:/Users/Staud/WebstormProjects/nativescript-app/node_modules/nativescript-facebook/angular/nativescript-facebook-directives.js.
We need to add an export for this class to a .d.ts typings file because Angular compiler needs to be able to reference this class in compiled code, such as templates.
The simplest fix for this is to ensure that this class is exported from the package's entry-point.
    at C:\Users\Staud\WebstormProjects\nativescript-app\node_modules\@angular\compiler-cli\ngcc\src\rendering\dts_renderer.js:148:31
    at Array.forEach (<anonymous>)
    at DtsRenderer.getTypingsFilesToRender (C:\Users\Staud\WebstormProjects\nativescript-app\node_modules\@angular\compiler-cli\ngcc\src\rendering\dts_renderer.js:146:45)
    at DtsRenderer.renderProgram (C:\Users\Staud\WebstormProjects\nativescript-app\node_modules\@angular\compiler-cli\ngcc\src\rendering\dts_renderer.js:62:37)
    at Transformer.transform (C:\Users\Staud\WebstormProjects\nativescript-app\node_modules\@angular\compiler-cli\ngcc\src\packages\transformer.js:87:52)
    at C:\Users\Staud\WebstormProjects\nativescript-app\node_modules\@angular\compiler-cli\ngcc\src\execution\create_compile_function.js:48:42
    at C:\Users\Staud\WebstormProjects\nativescript-app\node_modules\@angular\compiler-cli\ngcc\src\execution\cluster\worker.js:84:54
    at step (C:\Users\Staud\WebstormProjects\nativescript-app\node_modules\tslib\tslib.js:141:27)
    at Object.next (C:\Users\Staud\WebstormProjects\nativescript-app\node_modules\tslib\tslib.js:122:57)
    at C:\Users\Staud\WebstormProjects\nativescript-app\node_modules\tslib\tslib.js:115:75
    at ClusterMaster.onWorkerMessage (C:\Users\Staud\WebstormProjects\nativescript-app\node_modules\@angular\compiler-cli\ngcc\src\execution\cluster\master.js:194:27)
    at C:\Users\Staud\WebstormProjects\nativescript-app\node_modules\@angular\compiler-cli\ngcc\src\execution\cluster\master.js:54:95
    at ClusterMaster.<anonymous> (C:\Users\Staud\WebstormProjects\nativescript-app\node_modules\@angular\compiler-cli\ngcc\src\execution\cluster\master.js:292:57)
    at step (C:\Users\Staud\WebstormProjects\nativescript-app\node_modules\tslib\tslib.js:141:27)
    at Object.next (C:\Users\Staud\WebstormProjects\nativescript-app\node_modules\tslib\tslib.js:122:57)
    at C:\Users\Staud\WebstormProjects\nativescript-app\node_modules\tslib\tslib.js:115:75
    at new Promise (<anonymous>)
    at Object.__awaiter (C:\Users\Staud\WebstormProjects\nativescript-app\node_modules\tslib\tslib.js:111:16)
    at EventEmitter.<anonymous> (C:\Users\Staud\WebstormProjects\nativescript-app\node_modules\@angular\compiler-cli\ngcc\src\execution\cluster\master.js:286:32)
    at EventEmitter.emit (events.js:189:13)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ ngcc: `ngcc --properties es2015 module main --first-only`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ ngcc script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Staud\AppData\Roaming\npm-cache\_logs\2020-07-13T12_40_43_899Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! undefined postinstall: `npm run ngcc`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the undefined postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Staud\AppData\Roaming\npm-cache\_logs\2020-07-13T12_40_43_978Z-debug.log

my ngcc.config.js looks like:

module.exports = {
    packages: {
        "@nativescript/angular": {
            entryPoints: {
                ".": {
                    override: {
                        main: "./index.js",
                        typings: "./index.d.ts",
                    },
                    ignoreMissingDependencies: true,
                }
            },
            ignorableDeepImportMatchers: [
                /tns-core-modules\//,
                /@nativescript\/core\//,
            ]
        },
        "nativescript-facebook": {
            entryPoints: {
                "angular": {
                    override: {
                        main: "./index.js",
                        typings: "./index.d.ts",
                    },
                    ignoreMissingDependencies: true,
                }
            },
            ignorableDeepImportMatchers: [
                /tns-core-modules\//,
                /@nativescript\/core\//,
                /@nativescript\/angular\//
            ]
        },
        "nativescript-ui-listview": {
            entryPoints: {
                "angular": {
                    override: {
                        main: "./listview-directives.js",
                        typings: "./listview-directives.d.ts",
                    },
                    ignoreMissingDependencies: true,
                }
            },
            ignorableDeepImportMatchers: [
                /tns-core-modules\//,
                /@nativescript\/core\//,
                /@nativescript\/angular\//
            ]
        },
        "nativescript-ui-dataform": {
            entryPoints: {
                "angular": {
                    override: {
                        main: "./dataform-directives.js",
                        typings: "./dataform-directives.d.ts",
                    },
                    ignoreMissingDependencies: true,
                }
            },
            ignorableDeepImportMatchers: [
                /tns-core-modules\//,
                /@nativescript\/core\//,
                /@nativescript\/angular\//
            ]
        },
        "nativescript-ui-calendar": {
            entryPoints: {
                "angular": {
                    override: {
                        main: "./calendar-directives.js",
                        typings: "./calendar-directives.d.ts",
                    },
                    ignoreMissingDependencies: true,
                }
            },
            ignorableDeepImportMatchers: [
                /tns-core-modules\//,
                /@nativescript\/core\//,
                /@nativescript\/angular\//
            ]
        },
        "nativescript-localize": {
            entryPoints: {
                ".": {
                    override: {
                        main: "./angular.js",
                        typings: "./angular.d.ts",
                    },
                    ignoreMissingDependencies: true,
                }
            },
            ignorableDeepImportMatchers: [
                /@nativescript\/core\//
            ]
        },
    },
};

[StefanAleksik]

Yes I had the same issue. I made it to work with a hack hope these days I will get the time to make a PR. In the meantime you can do the following:
Replace the content in node_modules\nativescript-facebook\angular\nativescript-facebook-directives.d.ts with:

export declare class FacebookLoginButtonDirective {
    constructor();
}
export declare class  FacebookShareButtonDirective {
    constructor() {}
}
export declare class FacebookSendButtonDirective {
    constructor() {}
}
export declare const DIRECTIVES: [] = [FacebookLoginButtonDirective, FacebookShareButtonDirective, FacebookSendButtonDirective];

Then in node_modules\nativescript-facebook\angular\nativescript-facebook-module.js replace with the following content:

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var core_1 = require("@angular/core");
var element_registry_1 = require("nativescript-angular/element-registry");
var nativescript_facebook_directives_1 = require("./nativescript-facebook-directives");
var NativeScriptFacebookModule = (function () {
    function NativeScriptFacebookModule() {
    }
    NativeScriptFacebookModule = __decorate([
        core_1.NgModule({
            declarations: [...nativescript_facebook_directives_1.DIRECTIVES],
            exports: [...nativescript_facebook_directives_1.DIRECTIVES],
        })
    ], NativeScriptFacebookModule);
    return NativeScriptFacebookModule;
}());
exports.NativeScriptFacebookModule = NativeScriptFacebookModule;
element_registry_1.registerElement("FacebookLoginButton", function () { return require("../").LoginButton; });
element_registry_1.registerElement('FacebookShareButton', function () { return require('../').ShareButton; });
element_registry_1.registerElement('FacebookSendButton', function () { return require('../').SendButton; });

I noticed that the git repo of the package is 2 commits ahead of the npm module.

Just in case this is my ngcc.config.js:

    "nativescript-facebook": {
      entryPoints: {
        ".": {
          override: {
            main: "./index.android.js",
            typings: "./index.d.ts",
          },
          ignoreMissingDependencies: true,
        },
        "angular": {
          override: {
            main: "./index.js",
            typings: "./index.d.ts",
          },
          ignoreMissingDependencies: true,
        }
      },
      ignorableDeepImportMatchers: [
        /tns-core-modules\//,
        /@nativescript\/core\//,
        /@nativescript\/angular\//
      ]
    }

I am not sure about using the index.android.js but it has the same exprots as .iOS so why not as I said this is a hack :D

[PhilippS93]

export declare class FacebookLoginButtonDirective {
constructor();
}
export declare class FacebookShareButtonDirective {
constructor() {}
}
export declare class FacebookSendButtonDirective {
constructor() {}
}
export declare const DIRECTIVES: [] = [FacebookLoginButtonDirective, FacebookShareButtonDirective, FacebookSendButtonDirective];

Did you manage to do the PR yet? Would be very cool to get this fixed!