为了账号安全,请及时绑定邮箱和手机立即绑定

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

/ 猿问

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

慕前端131612 2019-11-05 11:12:43

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


在使用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生成的项目中,我们打算如何处理这种情况(即加载引导脚本)?


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


使用CDN?但是我们宁愿提供这些文件以确保它们将可用


将依赖项复制到dist/vendor我们之后ng build -prod?但这似乎由angular-cli提供,因为它“照顾”了构建部分?


在src / system-config.ts中添加jquery,bootstrap和tether,并以某种方式将它们拉入main.ts中的包中?但是考虑到我们不会在应用程序的代码中显式使用它们,这似乎是错误的(例如,不同于moment.js或类似lodash的东西)


查看完整描述

3 回答

?
哈士奇WWW

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


ngx-bootstrap支持Angular 3和Angular 3。


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


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


ng -v

如果您的angular-cli版本大于1.0.0-beta.11-webpack,则应遵循以下步骤:


安装ngx-bootstrap和bootstrap:


npm install ngx-bootstrap bootstrap --save

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


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


import { AlertModule } from 'ngx-bootstrap';

...

@NgModule({

...

imports: [AlertModule.forRoot(), ... ],

... 

})

打开angular-cli.json(将angular6及更高版本的文件名更改为angular.json)并将新条目插入styles数组:


"styles": [

"styles.css",

"../node_modules/bootstrap/dist/css/bootstrap.min.css"

],

打开src / app / app.component.html并添加:


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

1.0.0-beta.10或以下版本:


并且,如果您的angular-cli版本为1.0.0-beta.10或更低版本,则可以使用以下步骤。


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


npm install ngx-bootstrap --save

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


vendorNpmFiles: [

   ...

   'ngx-bootstrap/**/*.js',

   ...

]

现在,打开您的src / system-config.ts,然后输入:


const map:any = {

   ...

   'ngx-bootstrap': 'vendor/ngx-bootstrap',

   ...

}

...和:


const packages: any = {

  'ngx-bootstrap': {

    format: 'cjs',

    defaultExtension: 'js',

    main: 'ngx-bootstrap.js'

  }

};


查看完整回答
反对 回复 2019-11-05
?
紫衣仙女

在https://github.com/angular/angular-cli上查找关键字> Global Library Installation,可以帮助您找到答案。


根据他们的文档,您可以按照以下步骤添加Bootstrap库。


首先从npm安装Bootstrap:


npm install bootstrap@next

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


 "scripts": [

    "../node_modules/bootstrap/dist/js/bootstrap.js"

    ],

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


"styles": [

    "styles.css",

    "../node_modules/bootstrap/dist/css/bootstrap.css"

    ],

如果正在运行,请重新启动服务,并且Bootstrap 4应该在您的应用程序上正常工作。


这是最好的解决方案。但是,如果您不重新启动服务,它将永远无法工作。强烈建议您执行此最后操作。


查看完整回答
反对 回复 2019-11-05
?
慕田峪4524236

请执行下列操作:


npm i bootstrap@next --save

这会将引导程序4添加到您的项目中。


接下来转到您的src/style.scss或src/style.css文件(选择使用的文件),然后在其中导入引导程序:


对于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.json文件中(在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"

],


查看完整回答
反对 回复 2019-11-05

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信