angular2无法导入ng2-bootstrap [英] angular2 can't import ng2-bootstrap

问题描述

我无法导入ng2-bootstrap

I can't import ng2-bootstrap

layout.jade

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...

表达

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

app.component.ts

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

错误控制台

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-

还有更多与该错误相同的错误:无法导入组件?

and also more errors the same as that re: cannot import component?

推荐答案

这对我有用. 在systemjs.config文件下:

This worked for me. Under the systemjs.config file:

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

我们需要提及时刻"，因为ng2-bootstrap正在导入时刻.

We need to mention the 'moment' because ng2-bootstrap is importing moment.

在app.modules中，只需执行以下操作:

And in the app.modules, just do the following:

import {DatepickerModule} from 'ng2-bootstrap';

还有以下内容:

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

这篇关于angular2无法导入ng2-bootstrap的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！