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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (19)

我们希望在我们的应用程序中使用引导程序4(4.0.0-α2),这个应用程序由角-cli 1.0.0-beta.5(w/nodev6.1.0)生成。

在使用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

我们打算如何处理使用角-cli生成的项目中的这种场景(即加载引导脚本)?

  • 使用cdn?但是我们更愿意提供这些文件以保证它们是可用的。
  • 将依赖项复制到dist/vendor在我们ng build -prod是吗?但这似乎是角-cli应该提供的东西,因为它“照顾”了构建部分?
  • 在src/system-config.ts中添加jQuery、bootstrap和系绳,并以某种方式将它们拉到main.ts中的包中?
提问于
用户回答回答于

NGX-引导支持角3和4.

最新情况:1.0.0-beta.11-webpack或以上版本

首先,在终端中使用以下命令检查角-cli版本:ng -v

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

  1. 安装NGX-引导自举:undefinedNPM安装NGX-引导引导-保存

这行现在安装了引导程序3,但将来可以安装引导程序4。请记住,NGX-引导程序支持这两个版本。

  1. import { AlertModule } from 'ngx-bootstrap'; ... @NgModule({ ... imports: [AlertModule.forRoot(), ... ], ... })
  2. open angular-cli.json and insert a new entry into the styles array "styles": [ "styles.css", "../node_modules/bootstrap/dist/css/bootstrap.min.css" ],
  3. open src/app/app.component.html and add <alert type="success">hello</alert>

1.0.0-Beta.10或以下版本:

首先转到项目目录并键入

npm install ngx-bootstrap --save

然后打开你的角-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'
  }
};
用户回答回答于

根据他们的文档,可以采取以下步骤来添加引导程序库。

首先从NPM安装引导程序:

npm install bootstrap@next

然后将所需的脚本文件添加到应用程序中。0.角-cli.json文件中的脚本:

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

最后,将引导CSS添加到应用程序中0样式数组:

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

如果正在运行ng Serve,则重新启动它,并且Bootstrap 4应该在应用程序上工作。

扫码关注云+社区