angular2无法导入NG2的自举

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

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

，也更多的错误一样的回复：不能导入组件？

来源

2015-12-21 mckit

ng2-bootstrap，已更名为ngx-bootstrap – valorkin

我有同样的问题我自己，发现这个链接有用：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-31 13:05:29 Wobbley

嗨，我正在使用webpack，我在哪里可以找到System.JS文件？ – antonio

@antonio它被命名为'system-config.ts' – Edric

我不认为目前的答案是令人满意的，因为他们打架的症状并没有解决根本问题。

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

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

1号线：所以我设置node_modules我的基本URL，所以我没有按包的基础重写一个包每进口。

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

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

完成。

On Line 6 - 7当SystemJS试图直接从/ node_modules /加载momentjs时，必须完成一个'bugfix'，所以我将它设置为它自己的目录。奇怪..

来源

2016-02-11 21:33:08 11mb

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

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

NPM安装时刻--save
NPM安装NG2的自举--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' } 
    };

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

App.module.ts 进口{} Ng2BootstrapModule从 'NG2的自举/ NG2自举'; 然后，将Ng2BootstrapModule添加到@NgModule的导入。

然后，U很好去ng2Bootstrap。

来源

2016-11-01 05:41:05

嗨，我正在使用webpack，在哪里可以找到System.config.js文件？ – antonio

这对我有用。根据systemjs.config文件：

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

我们需要提及的“时刻”，因为NG2的自举是进口时刻。

而在app.modules，只需做到以下几点：

import {DatepickerModule} from 'ng2-bootstrap';

而且还有如下：

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

来源

2016-11-15 22:53:56

伟大的分析，增加时刻，并保持其余的线路，因为它是帮助我。 – ajaysinghdav10d

我使用的是最新版本的角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-24 16:35:50 osazemeu

在systemjs.config.js包变量，添加以下为解决这个问题

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

来源

2017-03-17 04:25:27

更新以下和错误将会消失 “NG2的自举”的systemjs.config.js包变量：{格式：'cjs'，main：'bundles/ng2-bootstrap.umd.js'，defaultExtension：'js'}，//和此

来源

2017-03-17 07:08:44

angular2无法导入NG2的自举

回答

相关问题