F3L1X79 F3L1X79 - 10 days ago 14
reST (reStructuredText) Question

Angular2 (typescript) - can't load ng2-restangular

I actually struggle to load ng2-restangular (from https://github.com/2muchcoffeecom/ng2-restangular) in a new project.

Here is my config:

(function (global) {
System.config({
paths: {
'npm:': 'node_modules/'
},
map: {
app: 'app',
// angular bundles
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
'@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
'ng2-restangular': 'npm:ng2-restangular/dist/umd/ng2-restangular.js',
'lodash':'npm:lodash'
},
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
},
lodash: {
main: './index.js',
defaultExtension: 'js'
}
}
});
})(this);


app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { RestangularModule } from 'ng2-restangular';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
// Importing RestangularModule and making default configs for restanglar
RestangularModule.forRoot((RestangularProvider) => {
RestangularProvider.setBaseUrl('http://0.0.0.0:3011/api/');
// RestangularProvider.setRestangularFields({
// id: "_id"
// });
}
)
],
bootstrap: [AppComponent]
})
export class AppModule { }


And app.component.ts:

import { Component, OnInit, AfterViewInit } from '@angular/core';
import { Restangular } from 'ng2-restangular';

@Component({
selector: 'my-app',
template: '<h1>hello world</h1>'
})
export class AppComponent implements OnInit, AfterViewInit {

// If I remove this line...
constructor(private restangular: Restangular) {
}

ngOnInit(): void {
//...and this one, everything works fine.
this.restangular.all('Annotations').getList().toPromise().then(function(annotations) {
console.log(annotations);
});
}

ngAfterViewInit(): void {

}

}


When I add the constructor I got this error:

Error: Permission denied to access property "rejection"


in

zone.js (ligne 386, col. 13)

Any idea?

Answer

In my case, I had to import HttpModule in app.module.ts ex:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { RestangularModule } from 'ng2-restangular';
import { HttpModule } from '@angular/http';
@NgModule({
    declarations: [AppComponent],
    imports: [
        BrowserModule,
        HttpModule,
        // Importing RestangularModule and making default configs for restanglar   
        RestangularModule.forRoot((RestangularProvider) => {
            RestangularProvider.setBaseUrl('http://0.0.0.0:3011/api/');
        }
        )
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

and use the typescript compiler in systemjs.config.js:

(function (global) {
    System.config({
        //use typescript for compilation
        transpiler: 'typescript',
        //typescript compiler options
        typescriptOptions: {
            emitDecoratorMetadata: true
        },
        paths: {
            'npm:': 'node_modules/',
            'ng2-restangular': 'node_modules/ng2-restangular/dist/esm/src'
        },
        map: {
            app: 'app',
            // angular bundles
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
            '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
            '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',
            // other libraries
            'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
            'typescript': 'npm:typescript/lib/typescript.js',
            'ng2-restangular': 'ng2-restangular',
            'rxjs': 'npm:rxjs',
            'lodash': 'npm:lodash'
        },
        packages: {
            app: {
                main: './main.ts',
                defaultExtension: 'ts'
            },
            rxjs: {
                main: "./Rx.js",
                defaultExtension: 'js'
            },
            lodash: {
                main: './lodash.js',
                defaultExtension: 'js'
            },
            'ng2-restangular': {
                main: './index',
                defaultExtension: 'js'
            }
        }
    });
})(this);
Comments