Расширение Chrome + angular-cli: проблемы с пользовательским интерфейсом после сборки

Я написал приложение с липким заголовком, используя макеты angular2 mdl. Недавно я переписал код, чтобы получить более гибкий пользовательский заголовок.

С тех пор, когда я собираю приложение (ng build) и импортирую его как распакованное расширение, содержимое в моем контейнере больше не прокручивается. Тем не менее, сборка работает безупречно в "случайном" окне браузера, то есть когда приложение размещено на локальном сервере и открыто в Chrome.

В чем может быть проблема?

Вот проект angular-cli. Вы можете проверить это с помощью ng serve. Затем загрузите результат (папка dist), созданный командой ng build, как распакованное расширение. Не забудьте добавить манифест в папку.

А вот и плункер

Сам код:

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app title!';
  search = 'search';
}

app.component.html

  <div class="header-wrap" mdl-shadow="2">      
      <div class="header-title"> 
        <span class="header-title">{{title}}</span>
      </div>
      <div class="header-search-input">              
          <span class="header-search">{{search}}</span>
      </div>
  </div>

  <div class="container">
    <h6>test</h6>
    <br><br>
    <h6>test</h6>
    <br><br>
    <h6>test</h6>
    <br><br>
    <h6>test</h6>
    <br><br>
    <h6>test</h6>
    <br><br>
    <h6>test</h6>
    <br><br>
    <h6>test</h6>
    <br><br>
    <h6>test</h6>
    <br><br>
    <h6>test</h6>
    <br><br>
    <h6>test</h6>
    <br><br>
    <h6>test</h6>
    <br><br>
    <h6>test</h6>
    <br><br>
    <h6>test</h6>
    <br><br>
    <h6>test</h6>
    <br><br>
    <h6>test</h6>
    <br><br>
    <h6>test</h6>
    <br><br>
    <h6>test</h6>
    <br><br>
    <h6>test</h6>
    <br><br>
    <h6>test</h6>
    <br><br>
    <h6>test</h6>
    <br><br>
    <h6>test</h6>
    <br><br>
  </div>

index.html

!doctype html>
<html>
<head>
  <base href="/">
  <meta charset="utf-8">
  <title>Mosaic Chrome Extension</title>
  <style>
    body {
      font-family: 'Roboto', sans-serif;
      font-family: 'Open Sans', sans-serif;
      font-size: 100%;
      height: 600px;
      width: 800px;
      min-width: 800px;
      max-width: 800px;
    }
    #status {
      /* avoid an excessively wide status text */
      white-space: pre;
      /*text-overflow: ellipsis;*/
      /*overflow: hidden;   */
      width: 800px;
      min-width: 800px;
      max-width: 800px;      
      height: 600px;

    }
  </style>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto" rel="stylesheet">
</head>
<body>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.deep_orange-indigo.min.css" />
  <!-- charts -->
  <app-root>Loading...</app-root>
</body>
</html>
Источник

1 ответ

Решение

Похоже, что после долгих потягиваний волос Google Chrome Extensions не нравятся параметры минимальной и максимальной ширины.

Установка обоих:

  min-width: 799px;
  max-width: auto;

Сделал трюк. Пойди разберись.

Edit 17 июня: я также столкнулся с неуклюжим поведением компонентов Angular Material и Mdl, которые не работали или работали частично. После дальнейшего расследования выяснилось, что угловые зоны были нарушены и что мне нужно было обновить состояние интерфейса вручную, вызвав zone.run(() => {}); Судя по разным тестам, которые я проводил, эта проблема также вызывала странную прокрутку.

Источник
Другие вопросы по тегам