11

我无法导入 ng2-bootstrap

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

 //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（未找到）
错误：XHR 错误（404 Not Found）加载 http://localhost:3000/node_modules/ng2-

还有更多与re相同的错误：无法导入组件？

4

7 回答 7

7

我自己也有同样的问题，发现这个链接很有帮助：https ://github.com/valor-software/ng2-bootstrap/issues/50#issuecomment-165448962

最相关的代码片段：

System.JS 配置：

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

然后，您可以像这样简单地导入它：

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

希望这对您有所帮助，就像对我一样。

于 2015-12-31T13:05:29.690 回答
7

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

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

我们需要提到“时刻”，因为 ng2-bootstrap 正在导入时刻。

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

import {DatepickerModule} from 'ng2-bootstrap';

还有以下内容：

@NgModule({
    imports: [
        ....,
        ....,
        DatepickerModule
    ],
    declarations: [...],
    providers: [...],
    bootstrap: [AppComponent]
})
于 2016-11-15T22:53:56.390 回答
2

我认为目前的答案并不令人满意，因为它们确实对抗症状并且没有解决根本问题。

我做了什么来解决这个问题：

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

第 1 行：所以我设置node_modules了我的基本 url，所以我不必逐个包地重写每个导入。

第 2 行：然后我告诉 systemjs 默认查找 JS 文件。

第 3 - 5 行：我将所有以 app 开头的内容映射到 app 目录。所以 SystemJs 不会尝试在 /node_modules 文件夹中找到我自己的文件。

完成的。

在第 6 - 7 行，当 SystemJS 尝试直接从 /node_modules/ 加载 momentjs 时，必须完成一个“错误修复”，因此我将其设置为自己的目录。诡异的..

于 2016-02-11T21:33:08.973 回答
1

我正在使用最新版本的 angular-cli 2.4.7 (webpack) 并且能够让它工作。

在您的角度应用程序中运行它

npm install ng2-bootstrap bootstrap moment --save

打开以下文件并按照列出的方式添加它们

在样式数组中插入一个新条目

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

导入所需模块

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

你很高兴去！

于 2017-02-24T16:35:50.010 回答
0

使用以下内容更新 systemjs.config.js 包变量，错误将消失 'ng2-bootstrap': { format: 'cjs', main: 'bundles/ng2-bootstrap.umd.js', defaultExtension: 'js' } ，// 和这个

于 2017-03-17T07:08:44.580 回答
0

在systemjs.config.jspackages 变量中，添加以下内容以修复问题

'ng2-bootstrap':
{
    format: 'cjs', main: 'bundles/ng2-bootstrap.umd.js', defaultExtension: 'js'
}
于 2017-03-17T04:25:27.977 回答
0 
                        **>-------- NG2BOOTSTRAP--------->**

使用这些命令将这些依赖项添加到您的 package.json

  1. npm 安装时刻--保存
  2. npm install ng2-bootstrap --save

将您的 System.config.js 修改为以下代码，因为此映射告诉系统加载程序在哪里查找代码。

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

将 Bootstrap 添加到您的 index.html <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

App.module.ts 导入 { Ng2BootstrapModule } from 'ng2-bootstrap/ng2-bootstrap'; 并且，将 Ng2BootstrapModule 添加到 @NgModule 的导入中。

然后，你很适合 ng2Bootstrap。

于 2016-11-01T05:41:05.970 回答