How to get MaterialDropdownSelectSimpleDemoComponent from AngularDart Gallery to work in a simple AngularDart Project

Question

I’m new to AngularDart and am trying to add a dropdown selector to my project. I’m looking at the examples in the AngularDart Gallery, specifically: https://dart-lang.github.io/angular_components/#/material_dropdown_select

I’ve gone back to “basics” and created a new project using the IntelliJ IDEA > New Project > Dart > AngularDart Web App. The “My First AngularDart App” (a todo_list app) builds and runs OK.

So then to add a dropdown selector, after trying various approaches, I’ve added the demo code from the AngularDart Gallery to this project:

On the URL above, clicked “Source Code” next to MaterialDropdownSelectSimpleDemoComponent
Went up one level in the repository and copied the contents of material_dropdown_select_simple_demo (.dart, .html and .scss) into my project
[Problem 1] As an aside, I actually went up multiple levels until I could Clone dart-lang/angular_components. But I can’t get this to build as a project so that I can play with it “live” which might help. Am I missing something obvious here??
So I have a material_dropdown_select_simple_component.dart, .html, .scss in my project and updated the @Component selector: templateUrl: and stryleUrls: to match my component name
Then in the main component in the project (app_component.html) I add:

<material-dropdown-select-simple-component></material-dropdown-select-simple-component>

And add the MaterialDropdownSelectSimpleDemoComponent class name to the directives: and add the associated import statement
Add to dependencies in pubspec.yaml (due to the use of scss)

sass_builder: ^2.0.0

I then try to run it and get:

[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

[Problem 2] So I have a line number in a template.dart file, and I can’t find this file.

[Problem 3] In reviewing the code, I notice that in the material_drop_select_simple_component.scss there are red squiggles under:

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

Maybe I am missing a dependency in my pubspec.yaml file, but how do I determine what? I currently have:

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

I’m thinking that I am missing something basic here. Any help would be appreciated.

nshahan nshahan · Accepted Answer · 2019-04-09T02:13:17

[Problem 1] As an aside, I actually went up multiple levels until I could Clone dart-lang/angular_components. But I can’t get this to build as a project so that I can play with it “live” which might help. Am I missing something obvious here??

The only fully fledged package in the repo that you can build and experiment with locally is called angular_components_example. It is the package that builds the example gallery. https://github.com/dart-lang/angular_components/tree/master/examples/angular_components_example

[Problem 2] So I have a line number in a template.dart file, and I can’t find this file.

Files that are generated during your build like .template.dart (by angular) or .css (by sass_builder) will be located in a hidden directory at the root of your package called .dart_tool/build/generated/<your package name>

[Problem 3] In reviewing the code, I notice that in the material_drop_select_simple_component.scss there are red squiggles under...

I think the red squiggles are actually red herrings and you shouldn't worry about those imports. They are from a little workaround we created to allow you to import sass files with knowledge of the dart package system and there isn't any integration with IDEs to support the imports.

I think the real problem is the name of the sass file in your material_dropdown_select_simple_component.dart file. Change the line to:

styleUrls: [material_dropdown_select_simple_component.css]

By default the sass_builder package compiles .scss files in your package to .css files. (we just use a different convention within the angular_components package so when you copied the file it probably has .scss.css in it.

How to get MaterialDropdownSelectSimpleDemoComponent from AngularDart Gallery to work in a simple AngularDart Project

2 Answers