Angular2 Gitterfehler

Question

Ich bin ein kompletter Neuling zu allem verwandten Javascript, aber ich muss eine reiche Webapp entwickeln und ich versuche, Angular2 mit Typescript zu lernen.

I Angular 2 (Version 2.4.2)

Ich versuche, das angular2-grid Plugin

Wenn ich es zu installieren versuchen, zu verwenden, verwende ich diese beunruhigende Ergebnis:

$ npm install angular2-grid 
first-app@0.0.0 /home/nick/dev/angular2/first-app 
├── UNMET PEER DEPENDENCY @angular/core@2.4.2 
└── angular2-grid@0.11.2 

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules/chokidar/node_modules/fsevents): 
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.0.17: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"}) 
npm WARN angular2-grid@0.11.2 requires a peer of @angular/core@2.0.0 but none was installed. 

Wenn ich die Erwärmungen ignoriere und dann versuche, sie trotzdem zu verwenden, erhalte ich diesen Fehler im Browser-Log:

Hier ist meine Komponente:

import { Component } from '@angular/core'; 
import { NgGridModule } from 'angular2-grid'; 

@Component({ 
    selector: 'app-mygrid', 
    template: ` 
    <h1>My First Angular 2 App</h1> 
    <div class="grid" [ngGrid]="{\'max_cols\': 6, \'auto_resize\': true}"> 
    <div class="grid-item" [ngGridItem]="{\'sizex\': 2, \'sizey\': 3}"> 
    </div> 
    </div> 
    `, 
    styles: [] 
}) 
export class MygridComponent implements OnInit {} 

Ist der Fehler im Protokoll auf die Warnung bezieht, wenn ich versuchte, das angular2-Grid zu installieren? Hat es nicht installiert? Wie kann ich das korrigieren?

Answer 1

Haben Sie das "NgGridModule" in Ihrem Root-Modul wie im folgenden Beispiel importiert? Hier

  //Root module 
      import { NgModule, enableProdMode } from '@angular/core' 
      import { platformBrowserDynamic } from '@angular/platform-browser-dynamic' 
      import { BrowserModule } from '@angular/platform-browser' 
      import { MygridComponent } from './mygridcomponent' 
      import { NgGridModule } from 'angular2-grid'; 

      @NgModule({ 
       imports: [ BrowserModule, NgGridModule ], 
       declarations: [ MygridComponent ], 
       providers: [], 
       bootstrap: [ MygridComponent ] 
      }) 

      export class AppModule { } 


      // main entry point 
      import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 
      import { AppModule } from './app.module'; 

      platformBrowserDynamic().bootstrapModule(AppModule); 

Answer 2

ist eine Abhilfe, bis das Problem behoben ist: wir die Komponenten in unserem src Ordner injizieren, wie es unsere Komponenten (sehen aus wie vendoring).

• Ein angular2-Grid-Ordner irgendwo in Ihrem src Ordner (zum Beispiel legte ich es in src/app) und kopiere NgGrid.css einfügen, main.ts + components/Richtlinien/modules/Schnittstellen Ordner
• Import es in der App-Modul: import { NgGridModule } from './angular2-grid/modules/NgGrid.module'; (der Pfad ist relativ, wo Sie Ihre angular2grid setzen, ist hier an der Wurzel der App-Ordner)
• verwenden lib wie in der Readme-Repo beschrieben, aber Ihre Abhängigkeit Pfad anpassen (zB in app.component.ts: import { NgGridConfig, NgGridItemConfig } from "./angular2-grid/interfaces/INgGrid";

Wir machen es für das Projekt: project with angular2-grid