XML Compatibility issue between NS-Angular and NS-Core #1121
Description
Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):
-
CLI: 6.3x
-
Cross-platform modules:
-
Android Runtime:6.3x
-
iOS Runtime: 6.3x
-
Plugin(s): Creating one 😀
-
Please, attach your package.json and webpack.config.js: STOCK -- just generated the demo apps with latest CLI.
Callstack
Error: Parsing XML at 3:5
JS: > Module 'null' not found for element '@nstudio/nativescript-camera-plus:CameraPlus'.
JS: > require's first parameter should be string Error: Parsing XML at 3:5
JS: > Module 'null' not found for element '@nstudio/nativescript-camera-plus:CameraPlus'.
JS: > require's first parameter should be string
JS: > require's first parameter should be string
JS: at require (<anonymous>:1:266)
JS: at _loop_1 (file:///node_modules/@nativescript/core/globals/register-module-helpers.js:83:0)
JS: at loadModule (file:///node_modules/@nativescript/core/globals/register-module-helpers.js:91:0)
JS: at file:///node_modules/@nativescript/core/ui/builder/component-builder/component-builder.js:30:0
JS: at Object.getComponentModule (file:///node_modules/@nativescript/core/ui/builder/component-builder/component-builder.js:116:0)
JS: at loadCustomComponent (file:///node_modules/@nativescript/core/ui/builder/builder.js:138:0)
JS: at ComponentParser.push.../node_modules/@nativescript/core/ui/builder/builder.js.ComponentParser.buildComponent (file:///data/data/org.nativescript.demong...
JS: Failed Error: Parsing XML at 3:5
JS: > Module 'null' not found for element '@nstudio/nativescript-camera-plus:CameraPlus'.
JS: > require's first parameter should be string Error: Parsing XML at 3:5
JS: > Module 'null' not found for element '@nstudio/nativescript-camera-plus:CameraPlus'.
JS: > require's first parameter should be string
JS: > require's first parameter should be string
JS: at require (<anonymous>:1:266)
JS: at _loop_1 (file:///node_modules/@nativescript/core/globals/register-module-helpers.js:83:0)
JS: at loadModule (file:///node_modules/@nativescript/core/globals/register-module-helpers.js:91:0)
JS: at file:///node_modules/@nativescript/core/ui/builder/component-builder/component-builder.js:30:0
JS: at Object.getComponentModule (file:///node_modules/@nativescript/core/ui/builder/component-builder/component-builder.js:116:0)
JS: at loadCustomComponent (file:///node_modules/@nativescript/core/ui/builder/builder.js:138:0)
JS: at ComponentParser.push.../node_modules/@nativescript/core/ui/builder/builder.js.ComponentParser.buildComponent (file:///data/data/org.nativescript...
Describe the bug
I have a plugin that has its own custom XML/JS that it uses when it loads a model (using showmodal) the plugin works great on NS-Core. Unfortunately on Angular the webpack config breaks loading and the parse of NS-Core xml files.
The issue is that XML is treated differently between Angular webpack config and the NS-Core; when I manually changed my angular webpack.config.js file to be:
{ test: /\.xml$/, use: "nativescript-dev-webpack/xml-namespace-loader" },
{ test: /\.html$/, use: "raw-loader" },
Instead of both XML and HTML being raw-loader; my plugin will then work properly on Angular.
To Reproduce
- Have a XML file that is written as a NS-Core XML file with a namespaced component -- In my case this is it:
<Page xmlns:Cam="@nstudio/nativescript-camera-plus" shownModally="shownModally" unloaded="unloaded">
<GridLayout backgroundColor="#00000000" rows="*,auto,auto" columns="*">
<Cam:CameraPlus id="camPlus"
loaded="camLoaded"
... more props ...
debug="false">
</Cam:CameraPlus>
<Button row="1" id="recordButton" text="Record" tap="handleRecording" visibility="collapsed"/>
<Button row="2" id="cancelButton" text="Cancel" tap="cancel" visibility="collapsed"/>
</GridLayout>
</Page>
- Use
builder.Builder.parse(require("./camera.xml"),...So the xml is pulled into the bundle/vendor - See error above...
Expected behavior
The plugin to work on all platforms equally well. 😀
Sample project
Need to check with client if I can share....
Workarounds
-
manually do this first:
global.registerModule("@nstudio/nativescript-camera-plus", () => require('@nstudio/nativescript-camera-plus'));
Before I call theBuilder.parsefunction -- apparently the difference between the two webpack building methods; is the registerModule / namespaces are NOT discovered/added under angular; but they are added under NS-Core. -
The other work around is to switch xml-loaders; but I can't expect clients to do that, and not sure the side effects it will cause for Angular apps using XML screens rather than html screens.