web-dev-qa-db-fra.com

angular2 ne peut pas importer ng2-bootstrap

Je ne peux pas importer 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 { }

console d'erreur

GET http: // localhost: 3000/node_modules/ng2-bootstrap/components/accordéon/accordéon 404 (introuvable)
Erreur: erreur XHR (404 introuvable) lors du chargement de http: // localhost: 3000/node_modules/ng2-

et aussi plus d'erreurs identiques à re: impossible d'importer le composant?

angularng2-bootstrap
11
mckit

J'ai eu le même problème et j'ai trouvé ce lien utile: https://github.com/valor-software/ng2-bootstrap/issues/50#issuecomment-165448962

Un extrait du code le plus pertinent:

Configuration System.JS:

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

Vous pouvez alors simplement l'importer comme ceci:

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

J'espère que cela vous aide, comme cela m'a été fait.

7
Wobbley

Cela a fonctionné pour moi . Sous le fichier systemjs.config:

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

Nous devons mentionner le "moment" car ng2-bootstrap est un moment important.

Et dans les app.modules, procédez comme suit:

import {DatepickerModule} from 'ng2-bootstrap';

Et aussi les suivants:

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

Je ne pense pas que les réponses actuelles soient satisfaisantes car elles combattent les symptômes et ne résolvent pas le problème sous-jacent. 

Ce que j'ai fait pour résoudre ceci:

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

Ligne 1: Donc, j'ai défini node_modules mon URL de base, donc je n'ai pas à réécrire chaque importation paquet par paquet. 

Ligne 2: Ensuite, je demande à systemjs de rechercher les fichiers JS par défaut.

Ligne 3 - 5: Je mappe tout ce qui commence par app dans le répertoire app. Ainsi, SystemJs n'essaiera pas de trouver mes propres fichiers dans le dossier/node_modules.

Fini.

Sur la ligne 6 - 7 Un «correctif» a dû être fait lorsque SystemJS a essayé de charger momentjs directement à partir de/node_modules /. Bizarre.. 

2
11mb

J'utilise la dernière version de angular-cli 2.4.7 (webpack) et j'ai pu le faire fonctionner.

Exécuter ceci dans votre application angulaire

npm install ng2-bootstrap bootstrap moment --save

Ouvrez les fichiers suivants et ajoutez-les comme indiqué

Insérer une nouvelle entrée dans le tableau de styles

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

Importer le module souhaité

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

Et vous êtes prêt à partir!

1
osazemeu
                        **>-------- NG2BOOTSTRAP--------->**

Utilisez ces commandes pour ajouter ces dépendances à votre package.json

  1. npm install moment --save
  2. npm installez ng2-bootstrap --save

Modifiez votre System.config.js en fonction du code suivant, car cette carte indique au chargeur système où rechercher le code.

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

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

App.module.ts Import {Ng2BootstrapModule} de 'ng2-bootstrap/ng2-bootstrap'; Et ajoutez Ng2BootstrapModule aux importations de @NgModule.

Ensuite, vous pouvez utiliser ng2Bootstrap.

0
Mohit Sonkar

Dans la variable systemjs.config.js packages, ajoutez ce qui suit pour résoudre le problème

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

mettez à jour la variable de package systemjs.config.js avec le texte suivant et l'erreur disparaîtra 'ng2-bootstrap': {format: 'cjs', principal: 'ensembles/ng2-bootstrap.umd.js', defaultExtension: ' js '}, // ET CECI

0
P.R.Sujoy