LDF and Angular.io

[Mads Holten Rasmussen]

I am playing around with the LDF client and was hoping to get it to work with Angular, but I am facing some problems.

I have made a very simple test app that should just log the query results to the console: https://github.com/MadsHolten/angular-ldf

Essentially all the code is in src/app/app.component.ts for now (will be in a service later). I believe the problem occurs when I try to initialize the ldf.FragmentsClient.

I have no problems running it in a simple node app, so it might be that something is conflicting with angular.

[Ruben Taelman]

@MadsHolten What problem are you experiencing exactly? Is it crashing, if so, can you provide the crashlog? Or is it simply not doing anything?

[Mads Holten Rasmussen]

@rubensworks I get the following compile error, mentioning a critical dependency:

WARNING in ./node_modules/ldf-client/ldf-client.js
7:56-69 Critical dependency: the request of a dependency is an expression
    at CommonJsRequireContextDependency.getWarnings (C:\Users\MHRA\Development\LDF\angular-ldf\node_modules\webpack\lib\dependencies\ContextDependency.js:39:18)
    at Compilation.reportDependencyErrorsAndWarnings (C:\Users\MHRA\Development\LDF\angular-ldf\node_modules\webpack\lib\Compilation.js:703:24)
    at Compilation.finish (C:\Users\MHRA\Development\LDF\angular-ldf\node_modules\webpack\lib\Compilation.js:561:9)
    at applyPluginsParallel.err (C:\Users\MHRA\Development\LDF\angular-ldf\node_modules\webpack\lib\Compiler.js:506:17)
    at C:\Users\MHRA\Development\LDF\angular-ldf\node_modules\tapable\lib\Tapable.js:289:11
    at _addModuleChain (C:\Users\MHRA\Development\LDF\angular-ldf\node_modules\webpack\lib\Compilation.js:507:11)
    at processModuleDependencies.err (C:\Users\MHRA\Development\LDF\angular-ldf\node_modules\webpack\lib\Compilation.js:477:14)
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)

It still compiles, and when I view it in the browser, it writes the following error to the console:

Error: Cannot find module "."
    at webpackMissingModule (webpack-internal:///../../../../ldf-client/ldf-client.js:7:101)
    at eval (webpack-internal:///../../../../ldf-client/ldf-client.js:7:179)
    at Object.get (webpack-internal:///../../../../ldf-client/ldf-client.js:36:35)
    at AppComponent.ngOnInit (webpack-internal:///../../../../../src/app/app.component.ts:22:75)
    at checkAndUpdateDirectiveInline (webpack-internal:///../../../core/esm5/core.js:12596:19)
    at checkAndUpdateNodeInline (webpack-internal:///../../../core/esm5/core.js:14123:20)
    at checkAndUpdateNode (webpack-internal:///../../../core/esm5/core.js:14066:16)
    at debugCheckAndUpdateNode (webpack-internal:///../../../core/esm5/core.js:14959:76)
    at debugCheckDirectivesFn (webpack-internal:///../../../core/esm5/core.js:14900:13)
    at Object.eval [as updateDirectives] (ng:///AppModule/AppComponent_Host.ngfactory.js:8:5)

Happy new year BTW :)

[Ruben Taelman]

@MadsHolten Happy new year to you as well!

It seems to be a Webpack-related issue. I don't have any experience with either Angular or Webpack myself, so I'm not sure if I'll be able to help you resolve this issue.

In any case, we support Browserify. I'm not sure how Webpack would handle this, but you could try running this browserified version of the client.

[Mads Holten Rasmussen]

@rubensworks Okay. When building an Angular app with the CLI it uses webpack as default, so it would be great if you figure this out at some point. I believe Angular is quite widely used.

Since Angular uses Observables for data streams I will also have to figure out how it aligns with asynciterator.

Thanks for your help anyway, and great work with the LDF!

[Ruben Taelman]

For reference, comunica is the next iteration of Client.js, which is tested to work with Webpack.