angular2 kann nicht importieren NG2-Bootstrap

Question

ich nicht NG2-Bootstrap

layout.jade

html 
head 
title Angular 2 QuickStart 
// 1. Load libraries 

script(src="/node_modules/angular2/bundles/angular2-polyfills.js") 
script(src="/node_modules/systemjs/dist/system.src.js") 
//script(src="/node_modules/ng2-bootstrap/ng2-bootstrap.js") 
script(src="/node_modules/rxjs/bundles/Rx.js") 
script(src="/node_modules/angular2/bundles/angular2.dev.js") 

// 2. Configure SystemJS 
script. 
    System.config({ 
     packages: { 
     app: { 
      //format: 'register', 
      //defaultExtension: 'js', 
      defaultJSExtensions: true 
     } 
     }, 
      paths: { 
      'ng2-bootstrap/*': 'node_modules/ng2-bootstrap/*.js' 
      } 
    }); 
    System.import('app/boot') 
    .then(null, console.error.bind(console)); 
// 3. Display the application 
body 
    my-app Loading... 

express

app.use('/node_modules', express.static(__dirname + '/node_modules')); 

app.component.ts

//import "ng2-bootstrap/ng2-bootstrap"; 

    import {Component} from 'angular2/core'; 
    import {Alert} from 'ng2-bootstrap/ng2-bootstrap'; 
    import {firstComponent} from './component/first.component'; 

    @Component({ 
    //directives: [Alert], 
     directives: [firstComponent,Alert], 
     selector: 'my-app', 
     template: ` 
     <h1>My First Angular 2 App</h1> 
     <h2> helllo</h2> 
     <first></first> 
     <alert type="info">ng2-bootstrap hello!</alert> 
     ` 
    }) 
    export class AppComponent { } 

importieren

Fehlerkonsole

GET http://localhost:3000/node_modules/ng2-bootstrap/components/accordion/accordion 404 (Not Found)

Error: XHR error (404 Not Found) loading http://localhost:3000/node_modules/ng2-

und auch mehr Fehler die gleiche wie die re: importieren kann nicht Komponente?

Answer 1

hatte ich das gleiche Problem selbst und fand diesen Link hilfreich: https://github.com/valor-software/ng2-bootstrap/issues/50#issuecomment-165448962

Ein Ausschnitt aus der relevanteste Code:

System.JS config:

System.config({ 
    packages: { 
    "app": { 
     "defaultExtension": "js" 
    }, 
    "node_modules/ng2-bootstrap": { 
     "defaultExtension": "js" 
    } 
    }, 
    paths: { 
    "ng2-bootstrap": "node_modules/ng2-bootstrap" 
    } 
}); 

Sie können dann einfach importieren es gefällt mir so:

import { Progressbar } from "ng2-bootstrap"; 
@Component({ 
    selector: "my-app", 
    directives: [ 
     Progressbar 
    ], 
    template: "<progressbar></progressbar>" 
}) 

Hoffe das hilft dir, wie es hat mir getan.

Answer 2

Ich glaube nicht, dass die aktuellen Antworten zufriedenstellend sind, da sie Kampfsymptome verursachen und das zugrunde liegende Problem nicht lösen.

Was ich tat, dieses Problem zu lösen:

System.config({ 
    baseURL: '/node_modules', 
    "defaultJSExtensions": true, 
    map: { 
     app: '/app/' 
    } 
    paths: { 
     "moment": "moment/moment" 
    } 
    }); 

Zeile 1: So stelle ich node_modules meine Basis-URL, also habe ich nicht jeden Import auf einem Paket für Paket Basis neu zu schreiben.

Zeile 2: Dann sage ich systemjs nach JS-Dateien standardmäßig suchen.

Zeile 3 - 5: Ich ordne alles, was mit der App beginnt, auf das App-Verzeichnis zu. Daher versucht SystemJs nicht, meine eigenen Dateien im Ordner/node_modules zu finden.

Fertig.

Zeile 6 - 7 Ein 'Bugfix' musste gemacht werden, als SystemJS versuchte, momentjs direkt von/node_modules/zu laden, also setzte ich es auf ein eigenes Verzeichnis. Sonderbare ..

Answer 3

     **>-------- NG2BOOTSTRAP--------->** 

diese Befehle verwenden, diese Abhängigkeiten zu Ihrem package.json

1. npm installieren Moment --save
2. npm installieren NG2-Bootstrap --save

hinzufügen

Ändern Sie Ihre Datei System.config.js in den folgenden Code, da diese Zuordnung dem Systemlader angibt, wo nach Code gesucht werden soll.

var map = { 
    'app':      'app', // 'dist', 
    '@angular':     'node_modules/@angular', 
    moment:    'node_modules/moment/moment.js', 
    'ng2-bootstrap':    'node_modules/ng2-bootstrap', 
    }; 

var packages = { 
    'app':      { main: 'main.js', defaultExtension: 'js' }, 
    'ng2-bootstrap':   {defaultExtension: 'js' } 
    }; 

hinzufügen Bootstrap auf Ihre index.html <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

App.module.ts Import {Ng2BootstrapModule} von 'NG2-Bootstrap/NG2-Bootstrap'; Und fügen Sie Ng2BootstrapModule dem Import von @NgModule hinzu.

Dann sind U gut für ng2Bootstrap gehen.

Answer 4

Das funktionierte für mich. Unter der systemjs.config Datei:

map: { 
'ng2-bootstrap': 'node_modules/ng2-bootstrap/bundles/ng2-bootstrap.umd.js', 
     'moment': 'node_modules/moment/moment.js' 
    } 

Wir brauchen den 'Moment', weil NG2-Bootstrap Moment importiert zu erwähnen.

Und in den app.modules, tun nur die folgenden:

import {DatepickerModule} from 'ng2-bootstrap'; 

Und auch die folgenden:

@NgModule({ 
    imports: [ 
     ...., 
     ...., 
     DatepickerModule 
    ], 
    declarations: [...], 
    providers: [...], 
    bootstrap: [AppComponent] 
}) 

Answer 5

ich die neueste Version von Winkel-cli 2.4.7 bin mit (webpack) und konnte es zur Arbeit bringen.

Run dies in Ihrer Winkel App

npm install ng2-bootstrap bootstrap moment --save 

Öffnen Sie die folgenden Dateien und fügen Sie sie als aufgelistet

Legen Sie einen neuen Eintrag in die Stile Array

# angular-cli.json 
    "styles": [ 
     "styles.css", 
     "../node_modules/bootstrap/dist/css/bootstrap.min.css" 
     ] 

gewünschten Import-Modul

# src/app/app.module.ts 
... 
import { DatepickerModule } from 'ng2-bootstrap'; 
... 
@NgModule({ 
.... 
, 
    imports: [ 
DatepickerModule.forRoot(), 
... 
] 
...}) 

Und Sie sind gut zu gehen!

Answer 6

In systemjs.config.js Pakete Variable, fügen Sie den folgenden für die das Problem beheben

'ng2-bootstrap': 
{ 
    format: 'cjs', main: 'bundles/ng2-bootstrap.umd.js', defaultExtension: 'js' 
} 

Answer 7

Update der systemjs.config.js Paketvariablen mit der folgenden Eigenschaften und Fehler 'NG2-Bootstrap' verschwunden sein: {Format : 'cjs', main: 'bundles/ng2-bootstrap.umd.js', defaultExtension: 'js'}, // UND DIESES