Как получить MaterialDropdownSelectSimpleDemoComponent из AngularDart Gallery для работы в простом проекте AngularDart - PullRequest
1 голос
/ 04 апреля 2019

Я новичок в AngularDart и пытаюсь добавить в свой проект выпадающий селектор. Я смотрю на примеры в галерее AngularDart, а именно: https://dart -lang.github.io / angular_components / # / material_dropdown_select

Я вернулся к «основам» и создал новый проект, используя IntelliJ IDEA> Новый проект> Dart> AngularDart Web App. «Моё первое приложение AngularDart» (приложение todo_list) собирается и работает нормально.

Итак, чтобы добавить выпадающий селектор, после попытки различных подходов я добавил демонстрационный код из галереи AngularDart в этот проект:

  • В приведенном выше URL-адресе нажмите «Исходный код» рядом с MaterialDropdownSelectSimpleDemoComponent
  • Поднялся на один уровень в хранилище и скопировал содержимое material_dropdown_select_simple_demo (.dart, .html и .scss) в мой проект
  • [Проблема 1] В дополнение, я фактически прошел несколько уровней, пока не смог клонировать dart-lang / angular_components. Но я не могу заставить его строить как проект, чтобы я мог играть с ним «вживую», что могло бы помочь. Я что-то упускаю здесь очевидное ??
  • Итак, у меня есть файл material_dropdown_select_simple_component.dart, .html, .scss в моем проекте и я обновил селектор @Component: templateUrl: и stryleUrls: в соответствии с именем моего компонента
  • Затем в основной компонент проекта (app_component.html) добавляю:
<material-dropdown-select-simple-component></material-dropdown-select-simple-component>
  • И добавьте имя класса MaterialDropdownSelectSimpleDemoComponent к директивам: и добавьте соответствующий оператор импорта
  • Добавить к зависимостям в pubspec.yaml (из-за использования scss)
sass_builder: ^2.0.0 

Затем я пытаюсь запустить его и получить:

[SEVERE] build_web_compilers|entrypoint on web/main.dart:
Unable to find modules for some sources, this is usually the result of either a
bad import, a missing dependency in a package (or possibly a dev_dependency
needs to move to a real dependency), or a build failure (if importing a
generated file).

Please check the following imports:

`import 'package:DropDownSelectv4/src/todo_list/material_dropdown_select_simple_component.scss.css.shim.dart' as import0;` from DropDownSelectv4|lib/src/todo_list/material_dropdown_select_simple_component.template.dart at 10:1

[Проблема 2] Итак, у меня есть номер строки в файле template.dart, и я не могу найти этот файл.

[Проблема 3] При просмотре кода я замечаю, что в material_drop_select_simple_component.scss есть красные загогулины под:

@import 'package:angular_components/css/material/material';
@import 'package:angular_components/css/material/shadow';

Возможно, мне не хватает зависимости в моем файле pubspec.yaml, но как мне определить что? В настоящее время у меня есть:

dependencies:
  angular: ^5.2.0
  angular_components: ^0.11.0
  sass_builder: ^2.0.0

dev_dependencies:
  angular_test: ^2.2.0
  build_runner: ^1.1.2
  build_test: ^0.10.3
  build_web_compilers: ^1.0.0
  pedantic: ^1.0.0
  test: ^1.5.1

Я думаю, что мне здесь чего-то не хватает. Любая помощь будет оценена.

Ответы [ 2 ]

1 голос
/ 09 апреля 2019

[Проблема 1] Кроме того, я фактически поднялся на несколько уровней, пока не смог клонировать dart-lang / angular_components.Но я не могу заставить его строить как проект, чтобы я мог играть с ним «вживую», что могло бы помочь.Я что-то упускаю здесь очевидного ??

Единственный полноценный пакет в репо, который вы можете создать и поэкспериментировать с ним, называется angular_components_example.Это пакет, который создает пример галереи.https://github.com/dart-lang/angular_components/tree/master/examples/angular_components_example

[Проблема 2] Итак, у меня есть номер строки в файле template.dart, и я не могу найти этот файл.

Файлы, которыесгенерированные во время вашей сборки, такие как .template.dart (по угловым параметрам) или .css (по sass_builder) будут находиться в скрытом каталоге в корне вашего пакета с именем .dart_tool/build/generated/<your package name>

[Проблема 3]Просматривая код, я заметил, что в material_drop_select_simple_component.scss есть красные загогулины под ...

Я думаю, что красные загогулины на самом деле являются красными сельдями, и вам не стоит беспокоиться об этом импорте.Они взяты из небольшого обходного пути, который мы создали, чтобы позволить вам импортировать файлы sass со знанием системы пакетов dart, и нет никакой интеграции с IDE для поддержки импорта.

Я думаю, что настоящая проблема заключается в именифайла sass в вашем файле material_dropdown_select_simple_component.dart.Измените строку на:

styleUrls: [material_dropdown_select_simple_component.css]

По умолчанию пакет sass_builder компилирует .scss файлы в вашем пакете в .css файлы.(мы просто используем другое соглашение в пакете angular_components, поэтому при копировании файла он, вероятно, содержит .scss.css.

0 голосов
/ 12 апреля 2019
...