Is it possible to use Realm with Angular 2?

Question

I wanted to try out Realm Mobile Platform with an Angular 2 app but it looks like I'm not able to use the Javascript version of Realm in Angular 2. If I were able to include Realm in my Angular 2 app, how would I go about setting that up?

So far I've run npm install --save realm successfully and I've got my app module that attempts to import that package and initialize everything.

import * as Realm from 'realm';

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';

Realm.Sync.User.login('http://local:9080', 'someUser', 'somePass', (e, user) => {
  if(e) {
    console.log(e);
    return;
  }
});

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

I'm getting the following error and warnings:

WARNING in ./~/realm/lib/index.js
23:11-26 Critical dependency: the request of a dependency is an expression

WARNING in ./~/realm/lib/index.js
77:27-48 Critical dependency: the request of a dependency is an expression

WARNING in ./~/realm/lib/user-methods.js
24:11-26 Critical dependency: the request of a dependency is an expression

ERROR in ./~/realm/lib/browser/index.js
Module not found: Error: Can't resolve 'react-native' in '/vagrant/angular-realm-test/node_modules/realm/lib/browser'
 @ ./~/realm/lib/browser/index.js 21:0-45
 @ ./~/realm/lib/index.js
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts

I'm confused because I've included other third party libraries, such as Firebase, in Angular 2 apps without an issue. I'm not entirely sure what's going on here so a detailed explanation would be greatly appreciated.

I've learned that the sync option isn't available without the professional or enterprise versions. I've since tried to do the following in the component:

import * as Realm from 'realm';

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

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

    constructor() {
        const CarSchema = {
            name: 'Car',
            properties: {
                make:  'string',
                model: 'string',
                miles: {type: 'int', default: 0},
            }
        };
        const PersonSchema = {
            name: 'Person',
            properties: {
                name:     'string',
                birthday: 'date',
                cars:     {type: 'list', objectType: 'Car'},
                picture:  {type: 'data', optional: true}, // optional property
            }
        };

        // Initialize a Realm with Car and Person models
        let realm = new Realm.Realm({schema: [CarSchema, PersonSchema]});
    }
}

The above code gives me the same errors.

Answer 1

At the moment realm-js only works in a node environment. The only way to get realm working with front-end frameworks is with Node.JS, which is luckily available in electron!

You can try to clone my repo of realm working with electron here if you're curious on such an implementation: https://github.com/mbalex99/realm-electron

Note:

1. I've used it fine on MacOSX, Linux, and Windows
2. The sync feature only works on MacOSX. You can get it working on Linux if unless you have the professional or enterprise edition. You can download a trial of it here