MaterialDrawerExample not working

[HarryMtv]

Message: import 'package:MyProject/src/layout/app_layout_example.scss.css.shim.dart' as import0; from MyProject|lib/src/layout/app_layout_example.template.dart at 25:1

Source: https://github.com/dart-lang/angular_components/blob/master/examples/app_layout_example/lib/app_layout_example.dart

Dart 2.0.0 stable

pubspec environment: sdk: '>=2.0.0 <3.0.0'

dependencies: angular: ^5.0.0 angular_components: ^0.9.0 sass_builder: ^2.1.2

dev_dependencies: angular_test: ^2.0.0 build_runner: ^0.10.0 build_test: ^0.10.2 build_web_compilers: ^0.4.0 test: ^1.0.0

[nshahan]

If you are importing the styles for the app layout in your project, you will need a dependency on angular_components. Then in your component you need to use the styles from the angular_components package:

@Component(
  selector: 'your-component-selector',
  ...
  templateUrl: 'your_component_template.html',
  styleUrls: [
    'your_component_styles.css',
    'package:angular_components/app_layout/layout.scss.css',
  ],
)
class YourComponent {...}

The AngularDart code generator is aware of the package: syntax in the styleUrls and should do the right thing to apply those styles to your component.

[HarryMtv]

Thanks for answer, but i copy code line by line from example

@Component(
  selector: 'mat-drawer-demo',
  directives: [
    DeferredContentDirective,
    MaterialButtonComponent,
    MaterialIconComponent,
    MaterialPersistentDrawerDirective,
    MaterialToggleComponent,
    MaterialListComponent,
    MaterialListItemComponent,
  ],
  templateUrl: 'app_layout_example.html',
  styleUrls: [
    'app_layout_example.scss.css',
    'package:angular_components/app_layout/layout.scss.css',
  ],
)
class MaterialDrawerExample { 

[nshahan]

OK this is a little more complicated if you are copying the files directly. We are making a few customizations to make the build process for the gallery similar to our internal gallery.

I'd recommend making a few changes for your project. If you are going to copy the files directly you will also need to make sure you copy the Sass file app_layout_example.scss into your package. That file will need to be compiled to .css.

• In your pubspec.yaml, add a dependency on the sass_builder package. This will automatically compile your packages .scss source files to .css. You will need to adjust the name of the file in your @Component annotation.
• In your styleUrls: change the file name from 'app_layout_example.scss.css' to 'app_layout_example.css'.