我们想在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 i bootstrap@next --save

这将为您的项目添加引导4。

接下来进入src/style。SCSS或src/style.css文件(选择你正在使用的任何一个)并导入bootstrap:

对于style.css

/* 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

/* You can add global styles to this file, and also import other style files */
@import "../node_modules/bootstrap/scss/bootstrap";

对于脚本,你仍然需要在angular-cli中添加文件。在Angular版本6中,这个编辑需要在Angular .json文件中完成:

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

其他回答

使用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"
        ]

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

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>

请执行以下步骤:

NPM install -save bootstrap 在你的。angular-cli中。添加到样式部分:

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

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

享受

更新v1.0.0-beta.26

你可以在文档中看到导入引导的新方法

如果仍然不工作,使用ng serve命令重新启动

1.0.0或以下版本:

在index.html文件中,你只需要引导css链接(不需要js脚本)

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

And

npm install ng2-bootstrap --save
npm install moment --save

在my_project/src/system-config中安装ng2-bootstrap后。ts:

/** Map relative paths to URLs. */
const map: any = {
  'moment': 'vendor/moment/moment.js',
  'ng2-bootstrap': 'vendor/ng2-bootstrap'
};

/** User packages configuration. */
const packages: any = {
  'ng2-bootstrap': {
    defaultExtension: 'js'
  },
  'moment':{
     format: 'cjs'
  }
};

在my_project/angular-cli-build.js中:

module.exports = function (defaults) {
return new Angular2App(defaults, {
    vendorNpmFiles: [
        'ng2-bootstrap/**/*',
        'moment/moment.js'
    ]
});
};

不要忘记这个命令 把你的模块放到供应商中:

ng build

从另一个模块导入相同的原理。

安装助推器

NPM install -save bootstrap

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

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

欲了解更多信息…