Angular 4默认加载引导库？答案

【问题标题】：Angular4 default load boostrap library?Angular 4默认加载引导库？
【发布时间】：2018-12-09 13:58:37
【问题描述】：

我新建了一个 angular4 项目并在 app.component.html 中编写代码

<div class="container">
  <div class="row">
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
  </div>    
</div>

但是没用

我看这门课看起来像是 bootstrap: [AppComponent] 的 angular4 默认加载引导库在 app.module.ts 中，但它对我不起作用，当我添加

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

在 index.html 中，然后它工作，为什么？

【问题讨论】：

标签： css twitter-bootstrap angular

【解决方案1】：

您将框架名称与启动过程混淆了。 Angular 引导程序只是定义入口点。

Angular 4 不会自动支持引导 UI 框架。通过导入 css，您将获得基本的静态样式。

要使动态组件工作，请尝试ng-bootstrap 或ng2-bootstrap。

【讨论】：

我使用 npm install --save bootstrap 并在 angular-cli.json 中添加 "../node_modules/bootstrap/dist/css/bootstrap.min.css" 并且它可以工作，你解决了我的困惑，谢谢。

【解决方案2】：

bootstrap(angular property): [AppComponent]，是定义应用程序初始组件。一旦你在服务器上运行你的应用程序，“AppComponent”就会被调用并显示在屏幕上。

但是您正在使用引导框架，因为您必须使用以下命令在您的项目中安装引导。

npm install --save bootstrap

注意运行此命令后确保 bootstrap .min 文件应添加到您的 angular-cli.json 文件中，如果未添加，您可以手动添加

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

【讨论】：