angular2 non può importare NG2-bootstrap

Question

Non riesco a importare 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... 

esprimono

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

errore console

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-

e anche più errori la stessa di quella re: non si può importare componenti?

Answer 1

Ho avuto lo stesso problema me e trovato questo link utile: https://github.com/valor-software/ng2-bootstrap/issues/50#issuecomment-165448962

Un frammento di codice più rilevanti:

System.JS config:

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

Si può poi semplicemente importare così:

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

Spero che questo ti aiuti, piace fatto a me.

Answer 2

Non credo che le risposte attuali siano soddisfacenti dal momento che combattono i sintomi e non risolvono il problema sottostante.

Quello che ho fatto per risolvere questo:

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

Linea 1: così mi sono messo node_modules il mio URL di base, in modo da non dover riscrivere ogni importazione a pacchetto base pacchetto.

Riga 2: Quindi dico a systemjs di cercare i file JS per impostazione predefinita.

Riga 3 - 5: mappa tutto ciò che inizia con l'app nella directory dell'app. Quindi SystemJs non tenterà di trovare i miei file nella cartella/node_modules.

Terminato.

On Line 6 - 7 È stato necessario eseguire un "bugfix" quando SystemJS ha provato a caricare momentjs direttamente da/node_modules /, quindi l'ho impostato sulla propria directory. Strano ..

Answer 3

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

utilizzare questi comandi per aggiungere queste dipendenze al vostro package.json

1. npm installare momento --save
2. NPM installare NG2-bootstrap --save

Modifica il tuo System.config.js al codice seguente, poiché questa mappa indica al caricatore di sistema dove cercare il codice.

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' } 
    }; 

Aggiungi Bootstrap al index.html <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

App.module.ts importazione {} Ng2BootstrapModule da 'NG2-bootstrap/NG2-bootstrap'; E, aggiungere Ng2BootstrapModule alle importazioni di @NgModule.

Quindi, U è buono per andare per ng2Bootstrap.

Answer 4

Questo ha funzionato per me. Sotto il file systemjs.config:

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

Abbiamo bisogno di parlare del 'momento', perché NG2-bootstrap importa momento.

E nei app.modules, basta effettuare le seguenti operazioni:

import {DatepickerModule} from 'ng2-bootstrap'; 

E anche il seguente:

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

Answer 5

Sto usando l'ultima versione di angolare cli 2.4.7 (webpack) ed è stato in grado di farlo funzionare.

Esegui questo nella vostra applicazione angolare

npm install ng2-bootstrap bootstrap moment --save 

Aprire i seguenti file e aggiungerli come elencato

Inserire una nuova voce nella matrice stili

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

modulo desiderato Import

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

E sei a posto!

Answer 6

In systemjs.config.js pacchetti variabile, aggiungere il seguente per il risolvere il problema

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

Answer 7

aggiornamento variabile del pacchetto systemjs.config.js con il seguente e l'errore sarà andato 'NG2-bootstrap': {format : "cjs", main: "bundles/ng2-bootstrap.umd.js", defaultExtension: "js"}, // AND THIS