Issue
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.
Solution
[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.
Answered By – nshahan
Answer Checked By – Pedro (FlutterFixes Volunteer)