如何添加引导到一个angular-cli项目

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

在获得bootstrap及其对npm的依赖之后，我们的第一个方法是将它们添加到angular-cli-build.js中:

'bootstrap/dist/**/*.min.+(js|css)',  
'jquery/dist/jquery.min.+(js|map)',  
'tether/dist/**/*.min.+(js|css)',

然后导入到index。html中

<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中的所有依赖项都消失了(惊讶!)

我们打算如何处理这样的场景(即加载引导脚本)在一个用angular-cli生成的项目?

我们有以下想法，但我们真的不知道该怎么做……

use a CDN ? but we would rather serve these files to guarantee that they will be available copy dependencies to dist/vendor after our ng build -prod ? But that seems like something angular-cli should provide since it 'takes care' of the build part ? adding jquery, bootstrap and tether in src/system-config.ts and somehow pull them into our bundle in main.ts ? But that seemed wrong considering that we are not going to explicitly use them in our application's code (unlike moment.js or something like lodash, for example).

当前回答

Angular 5中引导4的步骤

创建Angular 5项目 ng新的AngularBootstrapTest 移动到项目目录 cd AngularBootstrapTest 下载引导 NPM安装引导添加引导到项目 4.1打开.angular-cli.json 4.2在json中找到“styles”部分 4.3添加bootstrap CSS路径如下所示． “风格”:( “. . / node_modules /引导/ dist / css / bootstrap.min.css”, “styles”css ),

现在你已经成功地在angular 5项目中添加了bootstrap css

测试引导

src / app / app.component.html开放添加引导按钮组件

<button type="button" class="btn btn-primary">Primary</button>

你可以参考按钮的样式在这里(https://getbootstrap.com/docs/4.0/components/buttons/)

保存文件运行项目发球——开球

现在，您将在页面中看到引导样式按钮

注意: 如果你在ng serve之后添加了引导路径，你必须停止并重新运行ng serve来反映这些变化

2018-03-03 15:18:34

其他回答

使用npm安装引导程序 NPM安装引导

2.安装Popper.js

npm install --save popper.js

3.转向角。Angular 6 project / . Angular -cli. json。在Angular 5中添加json，并添加列出的:

 "styles": [
          "node_modules/bootstrap/dist/css/bootstrap.css",
          "src/styles.css"
        ],

        "scripts": [
          "node_modules/popper.js/dist/umd/popper.min.js",
          "node_modules/bootstrap/dist/js/bootstrap.min.js"
        ]

2018-05-06 16:51:30

不管你使用的是哪种JS框架，通过以下2步将bootstrap导入到你的项目很容易:

使用npm i -S bootstrap或yarn add bootstrap安装bootstrap。

在styles.css或styles中。导入bootstrap为@import ` ~bootstrap/dist/css/bootstrap.min.css `。

2018-10-19 18:07:38

在bash中运行npm install ng2-bootstrap bootstrap——save 在angular-cli.json中添加/更改以下内容 “风格”:( “. . / node_modules /引导/ dist / css / bootstrap.min.css” ), “脚本”:( “. . / node_modules / jquery / dist / jquery.min.js”, “. . / node_modules /引导/ dist / js / bootstrap.min.js” ),

2016-10-18 00:58:05

将此添加到styles.css文件中

@import "~bootstrap/dist/css/bootstrap.css";

2020-08-08 04:39:52

我发现很多解决方案在新版本的Angular-CLI中不再适用了。

您可以尝试在app.component.html的顶部添加以下链接标记，并在底部添加脚本标记。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">


<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

但是如果你想使用ngx-bootstrap，那么在你的项目目录下运行下面的命令

ng add ngx-bootstrap

使用以下内容作为app.component.html的内容进行测试

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

2020-06-27 16:06:58

如何添加引导到一个angular-cli项目

推荐文章

最新文章

标签