首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何将引导程序添加到angular-cli项目

如何将引导程序添加到angular-cli项目
EN

Stack Overflow用户
提问于 2016-06-06 11:31:46
回答 40查看 539.5K关注 0票数 284

我们希望在使用angular-cli 1.0.0-beta.5 (w/ node v6.1.0)生成的应用中使用bootstrap 4 (4.0.0-alpha.2)。

在使用npm获得bootstrap及其依赖项之后,我们的第一个方法是将它们添加到angular-cli-build.js

代码语言:javascript
复制
'bootstrap/dist/**/*.min.+(js|css)',  
'jquery/dist/jquery.min.+(js|map)',  
'tether/dist/**/*.min.+(js|css)',

并将它们导入我们的index.html

代码语言:javascript
复制
<script src="vendor/jquery/dist/jquery.min.js"></script>
<script src="vendor/tether/dist/js/tether.min.js"></script>
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/dist/css/bootstrap.min.css">
<script src="vendor/bootstrap/dist/js/bootstrap.min.js"></script>

这在ng serve中工作得很好,但是当我们生成一个带有-prod标志的构建时,所有这些依赖项都从dist/vendor中消失了(令人惊讶!)。

在使用-cli ?生成的项目中,我们打算如何处理这样的场景(例如加载引导脚本)

我们有以下想法,但我们真的不知道该走哪条路……

  • 是否使用CDN?但我们宁愿提供这些文件,以保证它们在我们的ng build -prod之后将成为dist/vendor的available
  • copy依赖项?但这似乎是angular-cli应该提供的东西,因为它“照顾”了构建部分?
  • src/system-config.ts中添加了jquery、bootstrap和tether,并以某种方式将它们拉入我们的main.ts捆绑包中?但考虑到我们不会在应用程序的代码中显式地使用它们(例如,不像moment.js或lodash之类的东西),这似乎是错误的。
EN

回答 40

Stack Overflow用户

回答已采纳

发布于 2016-06-07 16:52:40

重要更新: ng2-bootstrap现已被ngx-bootstrap取代

ngx-bootstrap同时支持Angular 3和4。

更新: 1.0.0-beta.11-webpack或以上版本

首先,在终端中使用以下命令检查您的angular-cli版本:

代码语言:javascript
复制
ng -v

如果您的angular-cli版本高于1.0.0-beta.11-webpack,则应执行以下步骤:

  1. 安装ngx-bootstrap和bootstrapnpm安装ngx-bootstrap bootstrap --保存

这一行现在安装Bootstrap 3,但将来可以安装Bootstrap 4。请记住,ngx-bootstrap支持这两个版本。

打开src/app/app.module.ts并添加

从‘ngx-bootstrap’导入{ AlertModule };... @NgModule({ ...导入: AlertModule.forRoot(),...,... })打开angular-cli.json (对于angular6和更高版本,文件名更改为angular.json ),并在styles数组中插入一个新条目:

src/app/app.component.html”:"styles.css","../node_modules/bootstrap/dist/css/bootstrap.min.css“,

  • 打开样式并添加:

你好,

1.0.0-beta.10及以下版本:

而且,如果您的angular-cli版本是1.0.0-beta.10或更低,那么您可以使用以下步骤。

首先,转到项目目录并输入:

代码语言:javascript
复制
npm install ngx-bootstrap --save

然后,打开您的angular-cli-build.js并添加以下行:

代码语言:javascript
复制
vendorNpmFiles: [
   ...
   'ngx-bootstrap/**/*.js',
   ...
]

现在,打开你的src/system-config.ts,然后写:

代码语言:javascript
复制
const map:any = {
   ...
   'ngx-bootstrap': 'vendor/ngx-bootstrap',
   ...
}

...and:

代码语言:javascript
复制
const packages: any = {
  'ngx-bootstrap': {
    format: 'cjs',
    defaultExtension: 'js',
    main: 'ngx-bootstrap.js'
  }
};
票数 329
EN

Stack Overflow用户

发布于 2016-09-26 10:09:43

https://github.com/angular/angular-cli上查找关键字>全局库安装可以帮助您找到答案。

根据他们的文档,你可以采取以下步骤来添加Bootstrap库。

首先从npm安装Bootstrap:

代码语言:javascript
复制
npm install bootstrap@next

然后将所需的脚本文件添加到angular-cli.json文件中的apps.scripts:

代码语言:javascript
复制
 "scripts": [
    "../node_modules/bootstrap/dist/js/bootstrap.js"
    ],

最后,将Bootstrap CSS添加到apps.styles数组中:

代码语言:javascript
复制
"styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.css"
    ],

如果您正在运行ng serve,请重新启动它,Bootstrap4应该可以在您的应用程序上运行。

这是最好的解决方案。但是如果你不重新启动ng服务,它就永远不会工作。强烈建议您执行最后一项操作。

票数 154
EN

Stack Overflow用户

发布于 2016-10-07 17:45:22

执行以下操作:

代码语言:javascript
复制
npm i bootstrap@next --save

这会将bootstrap 4添加到您的项目中。

接下来,转到您的src/style.scsssrc/style.css文件(选择您正在使用的文件),并导入bootstrap:

对于style.css

代码语言:javascript
复制
/* You can add global styles to this file, and also import other style files */
@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

对于style.scss

代码语言:javascript
复制
/* You can add global styles to this file, and also import other style files */
@import "../node_modules/bootstrap/scss/bootstrap";

对于脚本,您仍然需要将文件添加到angular-cli.json文件中,如下所示(在Angular版本6中,此编辑需要在文件angular.json__)中完成

代码语言:javascript
复制
"scripts": [
        "../node_modules/jquery/dist/jquery.js",
        "../node_modules/tether/dist/js/tether.js",
        "../node_modules/bootstrap/dist/js/bootstrap.js"
],
票数 72
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/37649164

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档