将bootsrap模板集成到我的Angular项目中时出现问题：添加样式文件时，该应用程序停止工作

时间：2019-04-16 15:33:19

标签： angular bootstrap-4

我正在尝试将引导程序模板集成到我的有角项目中，该项目也使用引导程序。 这是我的Angular项目： enter image description here

这是我尝试在“仪表板”的第一部分中集成的“以太网”滚动模板： enter image description here

enter image description here

我只是将Ethereal文件和文件夹移动到了Dashboard组件文件夹中，然后用index.html中的代码替换了dashboard.component.html中的代码。
enter image description here
我很清楚这不是正确的方法，但我只是在尝试测试是否可以集成Ethereal模板。
现在，这是我的dashboard.component.html文件：

    <!--
    Ethereal by HTML5 UP
    html5up.net | @ajlkn
    Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
    <head>
        <title>Ethereal by HTML5 UP</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
        <!-- <link rel="stylesheet" href="assets/css/main.css" /> -->
        <!-- <noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript> -->
      </head>
<body class="is-preload">
<!-- Page Wrapper -->
<div id="page-wrapper">

  <!-- Wrapper -->
    <div id="wrapper">
<!-- Panel (Banner) -->
<section class="panel banner right">
  <div class="content color0 span-3-75">
    <h1 class="major">Hello, my name<br />
    is Ethereal</h1>
    <p>This is <strong>Ethereal</strong>, a free site template by AJ for <a href="https://html5up.net">HTML5 UP</a>. It’s fully responsive, built on HTML5 and CSS3, and released entirely for free under the Creative Commons license. Hope you dig it :)</p>
    <ul class="actions">
      <li><a href="#first" class="button primary color1 circle icon fa-angle-right">Next</a></li>
    </ul>
  </div>
  <div class="image filtered span-1-75" data-position="25% 25%">
    <img src="images/pic01.jpg" alt="" />
  </div>
</section>

<!-- Panel (Spotlight) -->
<section class="panel spotlight medium right" id="first">
  <div class="content span-7">
    <h2 class="major">Sed etiam aenean</h2>
    <p>Mauris et ligula arcu. Proin dapibus convallis accumsan. Lorem maximus hendrerit orci, sit amet elementum massa hendrerit sed. Donec et ullamcorper ligula. Suspendisse amet potenti. Ut pretium libero eleifend euismod sed tristique. Quisque dictum magna risus, id ultricies justo sagittis vitae. Sed id odio tempor, porttitor elit amet, gravida hendrerit fringilla lorem ipsum dolor.</p>
  </div>
  <div class="image filtered tinted" data-position="top left">
    <img src="images/pic02.jpg" alt="" />
  </div>
</section>

<div class="copyright">&copy; Untitled. Design: <a href="https://html5up.net">HTML5 UP</a>.</div>

</div>

</div>

<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>

我仅使用index.html文件的前两部分来测试整个内容。
但是，除非我在html文件的开头注释掉这两行，否则该应用程序甚至无法启动。

   <!-- <link rel="stylesheet" href="assets/css/main.css" /> -->
    <!-- <noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript> -->

显然，这使dashboard.component.html文件没有任何样式。
如果有人可以向我解释：* 1 /为什么添加两条样式线时应用程序崩溃？
2 /在Bootstrap / Angular项目中集成“ Ethereal”模板的最佳方法是什么？
3 /如果可能的话，我该如何实际解决呢？
回答任何一个问题对我来说意义重大。
谢谢！

1 个答案:

答案 0 :(得分：0)

将这些cdn / script导入代码行放入index.html中，并从dashboard.component.html中删除头部部分

相关问题
最新问题