(Carbon LDP + Angular 7.1.1) ReferenceError: global is not defined

[Yahaire]

A simple application where Carbon is declared on the app.component.ts crashes the app. Next, is a preview of the code. A full copy of the project should be attached as well.

app.component.ts

import {Component} from '@angular/core';
import {CarbonLDP} from 'carbonldp/CarbonLDP';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'carbon-front';

  constructor(
    public carbon: CarbonLDP,
  ) {
    console.log('hola');
    carbon = new CarbonLDP('http://localhost:8083/
[carbon-front.zip](https://github.com/CarbonLDP/carbonldp/files/2635222/carbon-front.zip)
[carbon-front.zip](https://github.com/CarbonLDP/carbonldp/files/2635224/carbon-front.zip)

');
    console.log(carbon);
  }
}

Dependency in package.json

"carbonldp": "^5.0.0",

Output of localhost:8083/.system/platform/

<rdf:RDF>
    <rdf:Description rdf:about="http://localhost:8083/.system/platform/">
        <rdf:type rdf:resource="http://www.w3.org/ns/ldp#BasicContainer"/>
        <rdf:type rdf:resource="http://www.w3.org/ns/ldp#Container"/>
        <rdf:type rdf:resource="http://www.w3.org/ns/ldp#RDFSource"/>
        <rdf:type rdf:resource="http://www.w3.org/ns/ldp#Resource"/>
        <rdf:type rdf:resource="https://carbonldp.com/ns/v1/platform#Document"/>
        <rdf:type rdf:resource="https://carbonldp.com/ns/v1/platform#RequiredSystemDocument"/>
        <rdf:type rdf:resource="https://carbonldp.com/ns/v1/platform#Platform"/>
        <membershipResource rdf:resource="http://localhost:8083/.system/platform/"/>
        <created rdf:datatype="http://www.w3.org/2001/XMLSchema#dateTime">2018-11-30T21:44:23.760Z</created>
        <modified rdf:datatype="http://www.w3.org/2001/XMLSchema#dateTime">2018-11-30T21:44:23.760Z</modified>
    </rdf:Description>
    <rdf:Description rdf:nodeID="node1ctj98nk4x50">
        <rdf:type rdf:resource="https://carbonldp.com/ns/v1/platform#PlatformInstance"/>
        <rdf:type rdf:resource="https://carbonldp.com/ns/v1/platform#VolatileResource"/>
        <buildDate rdf:datatype="http://www.w3.org/2001/XMLSchema#dateTime">2018-09-22T08:50:52Z</buildDate>
        <version>5.0.0</version>
    </rdf:Description>
    <rdf:Description rdf:about="http://localhost:8083/.system/platform/">
        <instance rdf:nodeID="node1ctj98nk4x50"/>
    </rdf:Description>
</rdf:RDF>

[Yahaire]

This is the sample project
carbon-front.zip

It is ran along with a CarbonLDP instance on port 8083

[Yahaire]

Error that shows on screen when the instantiation of CarbonLDP is done (No other console.logs work before or after the instantiation).

ReferenceError: global is not defined[Learn More] browser-crypto.js:3
./node_modules/sockjs-client/lib/utils/browser-crypto.js
browser-crypto.js:3
__webpack_require__
bootstrap:78
./node_modules/sockjs-client/lib/utils/random.js
random.js:4:13
__webpack_require__
bootstrap:78
./node_modules/sockjs-client/lib/utils/event.js
event.js:3:13
__webpack_require__
bootstrap:78
./node_modules/sockjs-client/lib/transport/websocket.js
websocket.js:3:12
__webpack_require__
bootstrap:78
./node_modules/sockjs-client/lib/transport-list.js
transport-list.js:5:2
__webpack_require__
bootstrap:78
./node_modules/sockjs-client/lib/entry.js
entry.js:3:20
__webpack_require__
bootstrap:78
./node_modules/carbonldp/Messaging/MessagingService.js
MessagingService.js:21:38
__webpack_require__
bootstrap:78
./node_modules/carbonldp/Context/DocumentsContext.js
DocumentsContext.js:16:25
__webpack_require__
bootstrap:78
./node_modules/carbonldp/CarbonLDP.js
CarbonLDP.js:24:25
__webpack_require__
bootstrap:78
./src/app/app.component.ts
http://localhost:4200/main.js:127:77
__webpack_require__
bootstrap:78
./src/app/app.module.ts
http://localhost:4200/main.js:169:72
__webpack_require__
bootstrap:78
./src/main.ts
main.ts:1
__webpack_require__
bootstrap:78
0
http://localhost:4200/main.js:260:18
__webpack_require__
bootstrap:78
checkDeferredModules
bootstrap:45
webpackJsonpCallback
bootstrap:32
<anonymous>
http://localhost:4200/main.js:1:57

[alex-arriaga]

Just to confirm, I am receiving the same error in the browser console; I am using a fresh Angular installation with the Angular CLI.

[codyburleson]

Add the following line to polyfills.ts will fix the problem:

// Add global to window, assigning the value of window itself.
(window as any).global = window;

For more info about this fix, read: angular/angular-cli#8160

Dale and I just had this same issue and that fix worked for us.

[roddolf]

For reference,
There is an open issue in the exact dependency that throws this error: sockjs/sockjs-client#401

[Yahaire]

@codyburleson That seemed to do the trick! Thanks!

As an added note for anyone reading, the variable that will contain the CarbonLDP object should be declared outside of the component constructor like carbon: CarbonLDP;. The initialization of it may happen anywhere. I was getting some error messages such as ERROR Error: “StaticInjectorError(AppModule) for declaring the variable inside the parameters of the constructor of the component.

[alex-arriaga]

Add the following line to polyfills.ts will fix the problem:

// Add global to window, assigning the value of window itself.
(window as any).global = window;

For more info about this fix, read: angular/angular-cli#8160

Dale and I just had this same issue and that fix worked for us.

As @codyburleson mentioned; assigning the alias for the "global" object to the window, allowed me to compile my Angular app with no issues.

Thank you.