LDF and Angular.io

[MadsHolten]

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.

[rubensworks]

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

[MadsHolten]

@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 :)

[rubensworks]

@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.

[MadsHolten]

@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!

[rubensworks]

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