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...
表現する
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)
エラー:http:// localhost:3000/node_modules/ng2-をロードするXHRエラー(404 Not Found)
また、そのreと同じより多くのエラー:コンポーネントをインポートできませんか?
私も同じ問題を抱えていて、このリンクが役に立ったと感じました: 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>"
})
これが私と同じように役立つことを願っています。
これでうまくいきました。 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]
})
私は現在の答えは症状との戦いをし、根本的な問題を解決しないので満足できるとは思いません。
これを解決するために私がしたこと:
System.config({
baseURL: '/node_modules',
"defaultJSExtensions": true,
map: {
app: '/app/'
}
paths: {
"moment": "moment/moment"
}
});
1行目:node_modules
私のベースURLなので、パッケージごとにすべてのインポートをパッケージごとに書き直す必要はありません。
2行目:次に、デフォルトでJSファイルを探すようにsystemjsに指示します。
3〜5行目:appで始まるすべてのものをappディレクトリにマップします。したがって、SystemJは/ node_modulesフォルダーで自分のファイルを見つけようとしません。
終了しました。
6〜7行目SystemJSがmomentjsを/ node_modules /から直接ロードしようとしたときに1つの「バグ修正」を実行する必要があったので、それを独自のディレクトリに設定しました。おかしい.
私はangular-cli 2.4.7(webpack)の最新バージョンを使用しており、それを動作させることができました。
これをあなたのangularアプリで実行してください
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(),
...
]
...})
そして、あなたは行ってもいいです!
**>-------- NG2BOOTSTRAP--------->**
これらのコマンドを使用して、これらの依存関係をpackage.jsonに追加します
このマップがシステムローダーにコードを探す場所を指示するため、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 to your index.html <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
App.module.ts import {Ng2BootstrapModule} from 'ng2-bootstrap/ng2-bootstrap';そして、Ng2BootstrapModuleを@NgModuleのインポートに追加します。
それから、Uはng2Bootstrapに行くのが良いです。
systemjs.config.js
パッケージ変数、問題を修正するために以下を追加
'ng2-bootstrap':
{
format: 'cjs', main: 'bundles/ng2-bootstrap.umd.js', defaultExtension: 'js'
}
systemjs.config.jsパッケージ変数を次のように更新すると、エラーが発生します 'ng2-bootstrap':{format: 'cjs'、main: 'bundles/ng2-bootstrap.umd.js'、defaultExtension: 'js'} 、// この