如何将 ng-bootstrap 添加到 Angular-CLI(Broccoli 版本)项目中?
How to add ng-bootstrap to an Angular-CLI (Broccoli version) project?
如何将 ng-bootstrap
(由 angular-ui 团队编写)添加到 Angular-CLI (Angular2 RC4) 项目?
更具体地说:
- 我应该如何将压缩后的
.css
从我的 node_modules
文件夹添加到我的 angular-cli 项目?
- 我必须将它添加到
angular-cli-build.js
吗?
- 我必须添加打字吗?
- 我必须将它添加到
/src/system-config.ts
是的,您必须通过引用 angular-cli-build.js
文件中的 vendorNpmFiles 添加所有 css 文件
首先进入项目目录,输入
npm install --save @ng-bootstrap/ng-bootstrap
然后打开你的 angular-cli-build.js 并添加这一行
vendorNpmFiles: [
'systemjs/dist/system-polyfills.js',
'systemjs/dist/system.src.js',
'zone.js/dist/**/*.+(js|js.map)',
'es6-shim/es6-shim.js',
'reflect-metadata/**/*.+(ts|js|js.map)',
'rxjs/**/*.+(js|js.map)',
'@angular/**/*.+(js|js.map)',
'angularfire2/**/*.js',
'firebase/*.js',
'@ng-bootstrap/ng-bootstrap/**/*.+(js|js.map)'
]
现在打开你的src/system-config.ts,写
const map: any = {
'@ng-bootstrap/ng-bootstrap': 'vendor/@ng-bootstrap/ng-bootstrap'
};
和
const packages: any = {
'@ng-bootstrap/ng-bootstrap': {
defaultExtension: 'js',
main: 'index.js'
},
'@ng-bootstrap/ng-bootstrap/accordion': {
defaultExtension: 'js',
main: 'index.js'
},
'@ng-bootstrap/ng-bootstrap/alert': {
defaultExtension: 'js',
main: 'index.js'
},
'@ng-bootstrap/ng-bootstrap/buttons': {
defaultExtension: 'js',
main: 'index.js'
},
'@ng-bootstrap/ng-bootstrap/carousel': {
defaultExtension: 'js',
main: 'index.js'
},
'@ng-bootstrap/ng-bootstrap/collapse': {
defaultExtension: 'js',
main: 'index.js'
},
'@ng-bootstrap/ng-bootstrap/dropdown': {
defaultExtension: 'js',
main: 'index.js'
},
'@ng-bootstrap/ng-bootstrap/pagination': {
defaultExtension: 'js',
main: 'index.js'
},
'@ng-bootstrap/ng-bootstrap/popover': {
defaultExtension: 'js',
main: 'index.js'
},
'@ng-bootstrap/ng-bootstrap/progressbar': {
defaultExtension: 'js',
main: 'index.js'
},
'@ng-bootstrap/ng-bootstrap/rating': {
defaultExtension: 'js',
main: 'index.js'
},
'@ng-bootstrap/ng-bootstrap/tabset': {
defaultExtension: 'js',
main: 'index.js'
},
'@ng-bootstrap/ng-bootstrap/timepicker': {
defaultExtension: 'js',
main: 'index.js'
},
'@ng-bootstrap/ng-bootstrap/tooltip': {
defaultExtension: 'js',
main: 'index.js'
},
'@ng-bootstrap/ng-bootstrap/typeahead': {
defaultExtension: 'js',
main: 'index.js'
}
};
是的,上面的@pd farhad 回答得很好,但我想对此做一些解释,
实际上,如果您必须在 angular CLI 中添加一些第三方库,那么您必须在 中添加该第三方库引用angular-cli-build.js file ,因为 angular cli 从供应商文件夹而不是 node_modules
文件夹中获取所有文件,所以每当您为库添加条目时(在你的例子中说 ng-bootstrap)在 cli-build 文件中。它将在 angular cli 的供应商文件夹中复制该库。可用于我们的项目。所以
How should I add the minified .css from my node_modules folder to my angular-cli project?
您必须在 system-cli-build.js
文件中提供 file/library 的引用才能进入供应商文件夹。
Do I have to add it to angular-cli-build.js
是的,如果它是一个库,它是强制性的,但如果只是一个文件则不是,那么您也可以将该文件放入 public 文件夹中。这取决于你。
Do I have to add the typings?
没那么强制。
希望这能清除更多!
如何将 ng-bootstrap
(由 angular-ui 团队编写)添加到 Angular-CLI (Angular2 RC4) 项目?
更具体地说:
- 我应该如何将压缩后的
.css
从我的node_modules
文件夹添加到我的 angular-cli 项目? - 我必须将它添加到
angular-cli-build.js
吗? - 我必须添加打字吗?
- 我必须将它添加到
/src/system-config.ts
是的,您必须通过引用 angular-cli-build.js
文件中的 vendorNpmFiles 添加所有 css 文件
首先进入项目目录,输入
npm install --save @ng-bootstrap/ng-bootstrap
然后打开你的 angular-cli-build.js 并添加这一行
vendorNpmFiles: [
'systemjs/dist/system-polyfills.js',
'systemjs/dist/system.src.js',
'zone.js/dist/**/*.+(js|js.map)',
'es6-shim/es6-shim.js',
'reflect-metadata/**/*.+(ts|js|js.map)',
'rxjs/**/*.+(js|js.map)',
'@angular/**/*.+(js|js.map)',
'angularfire2/**/*.js',
'firebase/*.js',
'@ng-bootstrap/ng-bootstrap/**/*.+(js|js.map)'
]
现在打开你的src/system-config.ts,写
const map: any = {
'@ng-bootstrap/ng-bootstrap': 'vendor/@ng-bootstrap/ng-bootstrap'
};
和
const packages: any = {
'@ng-bootstrap/ng-bootstrap': {
defaultExtension: 'js',
main: 'index.js'
},
'@ng-bootstrap/ng-bootstrap/accordion': {
defaultExtension: 'js',
main: 'index.js'
},
'@ng-bootstrap/ng-bootstrap/alert': {
defaultExtension: 'js',
main: 'index.js'
},
'@ng-bootstrap/ng-bootstrap/buttons': {
defaultExtension: 'js',
main: 'index.js'
},
'@ng-bootstrap/ng-bootstrap/carousel': {
defaultExtension: 'js',
main: 'index.js'
},
'@ng-bootstrap/ng-bootstrap/collapse': {
defaultExtension: 'js',
main: 'index.js'
},
'@ng-bootstrap/ng-bootstrap/dropdown': {
defaultExtension: 'js',
main: 'index.js'
},
'@ng-bootstrap/ng-bootstrap/pagination': {
defaultExtension: 'js',
main: 'index.js'
},
'@ng-bootstrap/ng-bootstrap/popover': {
defaultExtension: 'js',
main: 'index.js'
},
'@ng-bootstrap/ng-bootstrap/progressbar': {
defaultExtension: 'js',
main: 'index.js'
},
'@ng-bootstrap/ng-bootstrap/rating': {
defaultExtension: 'js',
main: 'index.js'
},
'@ng-bootstrap/ng-bootstrap/tabset': {
defaultExtension: 'js',
main: 'index.js'
},
'@ng-bootstrap/ng-bootstrap/timepicker': {
defaultExtension: 'js',
main: 'index.js'
},
'@ng-bootstrap/ng-bootstrap/tooltip': {
defaultExtension: 'js',
main: 'index.js'
},
'@ng-bootstrap/ng-bootstrap/typeahead': {
defaultExtension: 'js',
main: 'index.js'
}
};
是的,上面的@pd farhad 回答得很好,但我想对此做一些解释,
实际上,如果您必须在 angular CLI 中添加一些第三方库,那么您必须在 中添加该第三方库引用angular-cli-build.js file ,因为 angular cli 从供应商文件夹而不是 node_modules
文件夹中获取所有文件,所以每当您为库添加条目时(在你的例子中说 ng-bootstrap)在 cli-build 文件中。它将在 angular cli 的供应商文件夹中复制该库。可用于我们的项目。所以
How should I add the minified .css from my node_modules folder to my angular-cli project?
您必须在 system-cli-build.js
文件中提供 file/library 的引用才能进入供应商文件夹。
Do I have to add it to angular-cli-build.js
是的,如果它是一个库,它是强制性的,但如果只是一个文件则不是,那么您也可以将该文件放入 public 文件夹中。这取决于你。
Do I have to add the typings?
没那么强制。
希望这能清除更多!