Webpack compatibility

[mrisek]

It seems that the nativescript-twilio-video plugin is not webpack compatible. Can you fix this?

[armackey]

Yeah, I can fix it!

What's the exact command you're using?

[mrisek]

tns run ios --bundle

[armackey]

@mrisek the plugin runs just fine with the command tns run ios --bundle for me. If you download the demo from github you may run into a typescript versioning error and a css error but it's bundling just fine.

Could you give more details?

[mrisek]

@armackey I am using your plugin in NativeScript Angular iOS application. It looks like Angular Package Format should be used for library package.

Here is error log:

ERROR in ../node_modules/nativescript-twilio-video/twilio-video.ts
Module build failed (from ../node_modules/@ngtools/webpack/src/index.js):
Error: /Users/fzadravec/UIDesignCOPY6/node_modules/nativescript-twilio-video/twilio-video.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
The missing file seems to be part of a third party library. TS files in published libraries are often a sign of a badly packaged library. Please open an issue in the library repository to alert its author and ask them to package the library using the Angular Package Format (https://goo.gl/jB3GVv).
    at AngularCompilerPlugin.getCompiledFile (/Users/fzadravec/UIDesignCOPY6/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:767:23)
    at plugin.done.then (/Users/fzadravec/UIDesignCOPY6/node_modules/@ngtools/webpack/src/loader.js:41:31)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
 @ ./views/PDIModules/calls/callScreen/callScreen.ts 7:0-83 8:47-57 9:47-58 40:33-46
 @ ./views/chatScreen/chatScreen.component.ts
 @ ./app.module.ts
 @ ./main.ts

* Fatal JavaScript exception - application has been terminated. *
Native stack trace:
1   0x108da9dbb NativeScript::reportFatalErrorBeforeShutdown(JSC::ExecState*, JSC::Exception*, bool, bool)
2   0x108de7407 -[TNSRuntime executeModule:referredBy:]
3   0x107e15e63 main
4   0x10fb0d575 start
5   0x1
JavaScript stack trace:
1   ../node_modules/nativescript-twilio-video/twilio-video.ts@file:///app/vendor.js:131342:953
2   __webpack_require__@file:///app/bundle.js:76:34
3   ./views/PDIModules/calls/callScreen/callScreen.ts@file:///app/bundle.js:6187:102
4   __webpack_require__@file:///app/bundle.js:76:34
5   ./views/PDIModules/PDITabRouting.component.ts@file:///app/bundle.js:5479:106
6   __webpack_require__@file:///app/bundle.js:76:34
7   ./app.routing.ts@file:///app/bundle.js:1292:119
8   __webpack_require__@file:///app/bundle.js:76:34
9   ./app.module.ts@file:///app/bundle.js:739:89
10  __webpack_require__@file:///app/bundle.js:76:34
11  ./main.ts@file:///app/bundle.js:2349:88
12  __webpack_require__@file:///app/bundle.js:76:34
13  checkDeferredModules@file:///app/bundle.js:45:42
14  @file:///app/bundle.js:149:38
15  anonymous@file:///app/bundle.js:150:12
16  evaluate@[native code]
17  moduleEvaluation@[native code]
18  promiseReactionJob@[native code]
19  require@[native code]
20  anonymous@file:///app/starter.js:2:8
2<…>
JavaScript error:
file:///app/vendor.js:131342:953: JS ERROR Error: Module build failed (from ../node_modules/@ngtools/webpack/src/index.js):
Error: /Users/fzadravec/UIDesignCOPY6/node_modules/nativescript-twilio-video/twilio-video.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
The missing file seems to be part of a third party library. TS files in published libraries are often a sign of a badly packaged library. Please open an issue in the library repository to alert its author and ask them to package the library using the Angular Package Format (https://goo.gl/jB3GVv).
at AngularCompilerPlugin.getCompiledFile (/Users/fzadravec/UIDesignCOPY6/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:767:23)
at plugin.done.then (/Users/fzadravec/UIDesignCOPY6/node_modules/@ngtools/webpack/src/loader.js:41:31)
at <anonymous>
at process._tickCallback (internal/process/next_tick.js:188:7)

[armackey]

@mrisek

Unfortunately, I have no plans in the near future to convert this plug-in to work with angular. Maybe one day, I just don't know when.

[armackey]

@mrisek here's a angular demo where tns run ios --bundle works. https://github.com/armackey/nativescript-twilio-video/tree/master/demo-ng

Good luck my friend.