Проблема с интеграцией шаблона bootsrap в мой проект Angular: когда я добавляю файлы стилей, приложение перестает работать

#angular #bootstrap-4

Вопрос:

Я пытаюсь интегрировать шаблон начальной загрузки в мой проект angular, который также использует bootstrap. Это мой проект Angular:

И это «эфирный» шаблон прокрутки, который я пытаюсь интегрировать в первый раздел панели инструментов:

Я просто переместил файлы и папки Ethereal в папку компонентов панели мониторинга и заменил код внутри dashboard.component.html с кодом внутри index.html .

Я хорошо понимаю, что это неправильный метод, но я просто пытаюсь проверить, могу ли я интегрировать шаблон 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">amp;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 / Каков наилучший способ интеграции шаблона «Ethereal» в мой проект bootstrap / angular?
3 / Как я могу это исправить, если это возможно?
Ответ на любой из этих вопросов будет много значить для меня.
Спасибо!

Ответ №1:

поместите эти строки кода импорта cdn / script в index.html , также снимите головную часть с dashboard.component.html