如何添加引导到一个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).

当前回答

你可以使用NPM install bootstrap命令在angular中安装bootstrap。

然后在angular中设置引导路径。Json文件和style.css文件。

你可以阅读关于如何在angular中安装和设置引导的完整博客，点击这里阅读完整博客

2020-05-20 06:32:44

其他回答

步骤1: NPM安装bootstrap@latest——save-dev 这将安装最新版本的引导程序，但是，可以通过添加版本号来安装指定的版本

打开styles.css并添加以下内容 @ import " ~引导/ dist / css / bootstrap.css”

2019-01-03 16:23:09

我猜上面的方法在发布后已经改变了，看看这个链接

https://github.com/valor-software/ng2-bootstrap/blob/development/docs/getting-started/ng-cli.md

启动项目

npm i -g angular-cli
ng new my-app
cd my-app
ng serve
npm install --save @ng-bootstrap/ng-bootstrap

安装ng-bootstrap和bootstrap

npm install ng2-bootstrap bootstrap --save

src / app / app.module开放。Ts和add

import { AlertModule } from 'ng2-bootstrap/ng2-bootstrap';
...

@NgModule({
   ...
   imports: [AlertModule, ... ],
    ... 
})

angular-cli开放。并在样式数组中插入一个新条目

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

打开src/app/app.component.html并通过添加测试所有工作

<alert type="success">hello</alert>

2016-10-08 09:21:01

安装引导 NPM安装bootstrap@next 在.angular-cli.json中添加代码: “风格”:( “styles”css, “. . / node_modules /引导/ dist / css / bootstrap.css” ), “脚本”:( “. . / node_modules / jquery / dist / jquery.js”, “. . / node_modules /范围/ dist / js / tether.js”, “. . / node_modules /引导/ dist / js / bootstrap.js” ), 最后将bootstrap.css添加到代码style.scss中 @ import " . . / node_modules /引导/ dist / css / bootstrap.min.css”; 重新启动本地服务器

2017-04-25 06:27:29

安装助推器

NPM install -save bootstrap

然后我们需要导入Bootstrap Sass到我们的应用程序中。在风格。SCSS添加这一行:

@ import“. . / node_modules /引导/ scss / bootstrap.scss”;

欲了解更多信息…

2021-09-15 05:20:58

安装引导程序，popper.js

NPM install -save bootstrap 保存popper.js

在src/styles.css中导入bootstrap的样式

@import '~bootstrap/dist/css/bootstrap.min.css';

2018-07-26 02:18:31