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

发布时间：2020-12-17 23:59:39 所属栏目：安全来源：网络整理

导读：我们想在我们的应用程序中使用引导4(4.0.0-alpha.2)生成与angular-cli 1.0.0-beta.5(w / node v6.1.0)。在获得bootstrap及其与npm的依赖之后，我们的第一种方法是在angular-cli-build.js中添加它们： 'bootstrap/dist/**/*.min.+(js|css)','jquery/dist/jqu

我们想在我们的应用程序中使用引导4(4.0.0-alpha.2)生成与angular-cli 1.0.0-beta.5(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服务，但一旦我们用-prod标志生成一个所有这些依赖关系从dist / vendor消失了(惊喜！)。

我们如何打算在用angular-cli生成的项目中处理这种情况(即加载引导脚本)

我们有以下想法，但我们真的不知道要走哪条路…

>使用CDN？但我们宁愿提供这些文件，以保证它们可用
>复制依赖关系到我们的ng build -prod后的dist / vendor？但是这似乎是angular-cli应该提供的，因为它’照顾’构建部分？
>在src / system-config.ts中添加jquery，bootstrap和tether，并以某种方式将它们放入我们的main.ts包中？但是这看起来是错误的，因为我们不会在应用程序的代码中明确使用它们(不像moment.js或者像lodash这样的东西)

解决方法

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

首先，在终端中使用以下命令检查您的angular-cli版本：ng -v

如果您的angular-cli版本大于1.0.0-beta.11-webpack
那么你应该按照这些步骤 –

>安装ng2-bootstrap和bootstrap

npm install ng2-bootstrap bootstrap –save
>打开src / app / app.module.ts并添加

import { AlertModule } from 'ng2-bootstrap/ng2-bootstrap';
...
@NgModule({
...
imports: [AlertModule.forRoot(),... ],... 
})

>打开angular-cli.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或以下版本，那么你可以使用下面的步骤 –

您可以对Bootstrap使用Native Angular2伪指令，使用Bootstrap 3和4-alfa。更多关于ng2-bootstrap

首先转到项目目录并键入

npm install ng2-bootstrap --save

然后打开您的angular-cli-build.js并添加此行

vendorNpmFiles: [
   ..................
   'ng2-bootstrap/**/*.js',....................
  ]

现在打开你的src / system-config.ts，写

const map:any ={
     ..................
   'ng2-bootstrap': 'vendor/ng2-bootstrap',....................

}

和

const packages: any = {
  'ng2-bootstrap': {
    format: 'cjs',defaultExtension: 'js',main: 'ng2-bootstrap.js'

  }

};

编辑：

它是为其他第三方库 –
如果你没有为你的第三方库获得任何npm。在src文件夹下创建一个assets文件夹。然后，您可以为js，css和图像添加单独的文件夹。把你的第三方js在jsfolder。然后你必须像这样在你的index.html中引用js文件：

<script src="assets/js/your_js.js"></script>

现在，当你执行ng或ng构建它会自动更新公共文件夹与您的assets / js。希望它有帮助:)

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!