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的自舉

回答

相關問題