Angular 8.3.9 - Почему глобальные стили BootStrap3 исчезают при создании пользовательских элементов? - PullRequest
Новая
       68

Angular 8.3.9 - Почему глобальные стили BootStrap3 исчезают при создании пользовательских элементов?

0 голосов
/ 21 октября 2019

Я использую Bootstrap 3 внутри простого приложения Angular 8, которое состоит из 2 компонентов. Чисто для проверки того, как стили тянут в пользовательские элементы. У компонента

1 есть стили в файле .css для соответствующего компонента, другой использует стили начальной загрузки, объявленные в файле angular.json. (стили).

Как только сборка завершена, я помещаю настраиваемые теги для каждого в простой index.html, и в результате стили, которые были в компоненте CSS, остаются и отображаются должным образом, в то время какКомпонент с начальной загрузкой, выглядит все просто HTML ... нет стиля?

Я следил за этот учебник

Это отлично подходит для создания стилей.

Чтобы все выглядело правильно, я добавил bootstrap.min.cssв href в index.html, и это работает, НО, конечно, angular может скомпилировать JS, чтобы включить стили, используемые из глобально определенных стилей angular.json? 

//The one with styling in its contact-form.component.css file
    const myCustomElement = createCustomElement(ContactFormComponent, { injector });
    customElements.define('my-contact-form', myCustomElement);

//The with Bootstrap styling
    const myAnotherElement = createCustomElement(AnotherCompComponent, {injector});
    customElements.define('another-form', myAnotherElement);

Running This---
ng build --prod --output-hashing none && node concatenate.js
concatenate purely concates the main,scripts,polyfills and runtime js files into one

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Testing our custom element</title>
  <base href="/">
</head>
<body>
  <my-contact-form></my-contact-form>
  <another-form></another-form>
  <script type="text/javascript" src="contact-form.js"></script>
</body>
</html>

ЧтоЯ надеялся, что обе формы будут отображаться со своими стилями, что является результатом запуска ng serve.

При добавлении href = "bootstrap.min.css" в файл index.html втораяЗатем тег отображается по желанию.

Итак, вкратце ... есть ли способ использовать angular для включения объявленного стиля angular.json при создании пользовательских тегов.

Я надеюсь, что все это делаетсмысл. Спасибо всем.

...