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

当前回答

安装引导程序，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

其他回答

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

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

你有很多方法可以在你的Angular项目中添加Bootstrap 4:

在你的Angular项目的index.html文件中包含引导CSS和JavaScript文件，用@import关键字导入Angular项目的全局styles.css文件中的Bootstrap CSS文件。在angular的styles和scripts数组中添加Bootstrap CSS和JavaScript文件。项目的Json文件

2020-02-05 23:14:43

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 install -save bootstrap 在你的。angular-cli中。添加到样式部分:

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

之后，必须重新启动ng服务

享受

2017-09-11 00:17:09

使用angular-cli和css的工作示例:

1.安装引导

NPM安装bootstrap tether jquery——保存

2.添加到.angular-cli.json

  "styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.css"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/tether/dist/js/tether.js",
    "../node_modules/bootstrap/dist/js/bootstrap.js"
  ],

2017-08-25 12:38:56

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

推荐文章

最新文章

标签