2016-11-23 6 views
0

実際には、新しいプロジェクトでng2-restangular(https://github.com/2muchcoffeecom/ng2-restangular)を読み込むのに苦労します。ここでAngular2(typescript) - ng2-矩形を読み込むことができません

は私の設定です:

(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 { } 

そして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 { 

     } 

    } 

私は私が得たコンストラクタを追加する場合このエラー:

Error: Permission denied to access property "rejection" 


zone.js(ligne 386、col。 13)

+0

がrestangularロードですが別の起源のスクリプト?あなたは何をAPI経由でアクセスしていますか? – PierreDuc

+0

すべてのスクリプトがローカルホストから正しくロードされているようです。 アクセスしたいデータの例:[{"" kml ":" test "、" id ":" 583467e59b7c51b60b83beeb "}] 角度と刻み角が1の場合は問題ありませんでした。 – F3L1X79

+0

しかし、どのようなスクリプトも矩形で読み込んでいますか?矩形APIの場合と同じように、角型アプリケーションに同じポートを使用していますか? – PierreDuc

答えて

0

私の場合、私はapp.module.ts 元にHttpModuleををインポートする必要がありました:

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 { } 

とsystemjs.config.jsでtypescriptですコンパイラを使用します。

(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); 
関連する問題