2016-10-03 14 views
0

Webpack Angular2(See here)を使用していて、ng2-bootstrap(See here)を含める必要があります。Webpack Angular2 with ng2-bootstrap:システムが定義されていません

ng2-bootstrapはSystemJSに依存しますが、正しく組み込む方法はわかりません。

これは私のpackage.jsonです:

{ 
"name": "my-app", 
"version": "1.0.0", 
"description": "", 
"keywords": [""], 
"author": "", 
"homepage": "", 
"license": "MIT", 
"scripts": { 
"build:dev": "webpack --config config/webpack.dev.js --progress --profile --display-error-details", 
"build:docker": "npm run build:prod && docker build -t angular2-webpack-start:latest .", 
"build:prod": "webpack --config config/webpack.prod.js --progress --profile --bail", 
"build": "npm run build:dev", 
"ci": "npm run lint && npm test && npm run e2e", 
"clean:dist": "npm run rimraf -- dist", 
"clean:install": "npm set progress=false && npm install", 
"clean:start": "npm start", 
"clean": "npm cache clean && npm run rimraf -- node_modules doc coverage dist", 
"docker": "docker", 
"docs": "npm run typedoc -- --options typedoc.json --exclude '**/*.spec.ts' ./src/", 
"e2e:live": "npm run e2e -- --elementExplorer", 
"e2e": "npm run protractor", 
"github-deploy:dev": "webpack --config config/webpack.github-deploy.js --progress --profile --github-dev", 
"github-deploy:prod": "webpack --config config/webpack.github-deploy.js --progress --profile --github-prod", 
"github-deploy": "npm run github-deploy:dev", 
"lint": "npm run tslint \"src/**/*.ts\"", 
"postversion": "git push && git push --tags", 
"prebuild:dev": "npm run clean:dist", 
"prebuild:prod": "npm run clean:dist", 
"preclean:install": "npm run clean", 
"preclean:start": "npm run clean", 
"pree2e": "npm run webdriver:update -- --standalone", 
"preversion": "npm test", 
"protractor": "protractor", 
"rimraf": "rimraf", 
"server:dev:hmr": "npm run server:dev -- --inline --hot", 
"server:dev": "webpack-dev-server --config config/webpack.dev.js --progress --profile --watch --content-base src/", 
"server:prod": "http-server dist --cors", 
"server": "npm run server:dev", 
"start:hmr": "npm run server:dev:hmr", 
"start": "npm run server:dev", 
"test": "karma start", 
"tslint": "tslint", 
"typedoc": "typedoc", 
"version": "npm run build", 
"watch:dev:hmr": "npm run watch:dev -- --hot", 
"watch:dev": "npm run build:dev -- --watch", 
"watch:prod": "npm run build:prod -- --watch", 
"watch:test": "npm run test -- --auto-watch --no-single-run", 
"watch": "npm run watch:dev", 
"webdriver-manager": "webdriver-manager", 
"webdriver:start": "npm run webdriver-manager start", 
"webdriver:update": "npm run webdriver-manager update", 
"webpack-dev-server": "webpack-dev-server", 
"webpack": "webpack" 
}, 
"dependencies": { 
"@angular/common": "2.0.0", 
"@angular/compiler": "2.0.0", 
"@angular/core": "2.0.0", 
"@angular/forms": "^2.0.0", 
"@angular/http": "2.0.0", 
"@angular/platform-browser": "2.0.0", 
"@angular/platform-browser-dynamic": "2.0.0", 
"@angular/platform-server": "2.0.0", 
"@angular/router": "3.0.0", 
"@angularclass/conventions-loader": "^1.0.2", 
"@angularclass/hmr": "~1.2.0", 
"@angularclass/hmr-loader": "~3.0.2", 
"@angularclass/request-idle-callback": "^1.0.7", 
"@angularclass/webpack-toolkit": "^1.3.3", 
"admin-lte": "^2.3.6", 
"assets-webpack-plugin": "^3.4.0", 
"bootstrap": "^3.3.7", 
"core-js": "^2.4.1", 
"http-server": "^0.9.0", 
"ie-shim": "^0.1.0", 
"jquery": "^3.1.1", 
"ng2-bootstrap": "^1.1.5", 
"ng2-bs3-modal": "^0.10.4", 
"rxjs": "5.0.0-beta.12", 
"systemjs": "^0.19.38", 
"zone.js": "~0.6.17" 
}, 
"devDependencies": { 
"@types/core-js": "^0.9.34", 
"@types/hammerjs": "^2.0.33", 
"@types/jasmine": "^2.2.34", 
"@types/node": "^6.0.38", 
"@types/protractor": "^1.5.20", 
"@types/selenium-webdriver": "2.44.29", 
"@types/source-map": "^0.1.27", 
"@types/uglify-js": "^2.0.27", 
"@types/webpack": "^1.12.34", 
"angular2-template-loader": "^0.5.0", 
"awesome-typescript-loader": "^2.2.1", 
"codelyzer": "~0.0.28", 
"copy-webpack-plugin": "^3.0.1", 
"css-loader": "^0.25.0", 
"exports-loader": "^0.6.3", 
"expose-loader": "^0.7.1", 
"file-loader": "^0.9.0", 
"gh-pages": "^0.11.0", 
"html-webpack-plugin": "^2.21.0", 
"imports-loader": "^0.6.5", 
"istanbul-instrumenter-loader": "^0.2.0", 
"json-loader": "^0.5.4", 
"karma": "^1.2.0", 
"karma-chrome-launcher": "^2.0.0 ", 
"karma-coverage": "^1.1.1", 
"karma-jasmine": "^1.0.2", 
"karma-mocha-reporter": "^2.0.0", 
"karma-phantomjs-launcher": "^1.0.2", 
"karma-remap-coverage": "^0.1.1", 
"karma-sourcemap-loader": "^0.3.7", 
"karma-webpack": "1.8.0", 
"parse5": "^1.3.2", 
"phantomjs": "^2.1.7", 
"protractor": "^3.2.2", 
"raw-loader": "0.5.1", 
"rimraf": "^2.5.2", 
"source-map-loader": "^0.1.5", 
"string-replace-loader": "1.0.5", 
"style-loader": "^0.13.1", 
"to-string-loader": "^1.1.4", 
"ts-helpers": "1.1.1", 
"ts-node": "^1.3.0", 
"tslint": "3.15.1", 
"tslint-loader": "^2.1.3", 
"typedoc": "^0.4.5", 
"typescript": "2.0.3", 
"url-loader": "^0.5.7", 
"webpack": "2.1.0-beta.22", 
"webpack-dev-middleware": "^1.6.1", 
"webpack-dev-server": "^2.1.0-beta.2", 
"webpack-md5-hash": "^0.0.5", 
"webpack-merge": "^0.14.1" 
}, 
"repository": { 
"type": "git", 
"url": "" 
}, 
"bugs": { 
"url": "" 
}, 
"engines": { 
"node": ">= 4.2.1", 
"npm": ">= 3" 
} 
} 

これは私のvendor.browser.tsです:

// Angular 2 
import '@angular/platform-browser'; 
import '@angular/platform-browser-dynamic'; 
import '@angular/core'; 
import '@angular/common'; 
import '@angular/forms'; 
import '@angular/http'; 
import '@angular/router'; 

// AngularClass 
import '@angularclass/hmr'; 

// RxJS 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/mergeMap'; 

import 'jquery'; 
import 'bootstrap/dist/js/bootstrap'; 
import 'admin-lte/dist/js/app'; 
import 'ng2-bootstrap/bundles/ng2-bootstrap' 

if ('production' === ENV) { 
    // Production 
} else { 
// Development 
} 

はしかし、私は、実行時にこのエラーが表示されます。

enter image description here

import 'systemjs/dist/system';をvendor.browser.tsに追加すると、コンパイル済みのe rror:

ERROR in ./~/systemjs/dist/system.js                         
Module not found: Error: Can't resolve 'fs' in 'c:\Projects\Fandango\front\node_modules\systemjs\dist'        
@ ./~/systemjs/dist/system.js 4:18271-18284 
@ ./src/vendor.browser.ts                           
@ multi vendor 

私はウェブパックには本当に新しいですが、私は正しい方向にいると思いますか?

アイデアはありますか?

答えて

1

webpackがapp.module.tsまたはmain.tsのインポートステートメントを見て、どのコンポーネントがインポートされているかによって、vendor.browser.tsから "import 'ng2-bootstrap/bundles/ng2-bootstrap"を削除する必要があると思いますあなたのvendor.browser.tsファイルに "import 'ng2-bootstrap/bundles/ng2-bootstrap'"を追加すると、ここでのようにng2-bootstrapライブラリ全体をインポートすることはありません。

Look here for using ng2-bootstrap with webpack:

+0

これはうまくいきました。 –

関連する問題