angular 组件的应用程序布局引发 .scss 错误
App Layout of angular components throws error with .scss
我正在尝试使用以下代码在 AngularDart 中应用 App Layout 组件 material design angular_components，但系统在应用时抛出错误它通过 .scss。
请帮助我了解以下内容中缺少的内容，以便相应地制作应用程序 运行。
错误：
C:\Users\Tushar Rai\Desktop\Project files\Angular_Dart_Base_App\angular_dart_base_app>pub serve
Loading source assets...
Loading sass_builder, angular, test/pub_serve and dart_to_js_script_rewriter transformers...
Serving angular_dart_base_app web on http://localhost:8080
Serving angular_dart_base_app test on http://localhost:8081
Build completed successfully
[web] GET Served 3 cached assets.
[Info from Dart2JS]:
Compiling angular_dart_base_app|web/main.dart...
[Error from Dart2JS on angular_dart_base_app|web/main.dart]:
web\packages\angular_dart_base_app\src\components\app_layout\app_layout_component.template.dart:29:1:
Can't read 'package:angular_dart_base_app/src/components/app_layout/app_layout_component.scss.shim.dart' (Could not find asset angular_dart_base_app|lib/src/components/app_layout/app
_layout_component.scss.shim.dart.).
import 'package:angular_dart_base_app/src/components/app_layout/app_layout_component.scss.shim.dart' as import0;
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
[Error from Dart2JS on angular_dart_base_app|web/main.dart]:
web\packages\angular_dart_base_app\src\components\app_layout\app_layout_component.template.dart:62:56:
Not a compile-time constant.
const List<dynamic> styles$AppLayoutComponent = const [import0.styles, import1.styles];
^^^^^^^^^^^^^^
[Error from Dart2JS on angular_dart_base_app|web/main.dart]:
web\packages\angular_dart_base_app\src\components\app_layout\app_layout_component.template.dart:62:56:
Not a compile-time constant.
const List<dynamic> styles$AppLayoutComponent = const [import0.styles, import1.styles];
^^^^^^^^^^^^^^
[Dart2JS on angular_dart_base_app|web/main.dart]:
1 warning(s) and 3 hint(s) suppressed in package:angular_components.
[Warning from Dart2JS on angular_dart_base_app|web/main.dart]:
2 hint(s) suppressed in package:angular.
[Dart2JS on angular_dart_base_app|web/main.dart]:
1 warning(s) suppressed in package:angular_dart_base_app.
[Info from Dart2JS]:
Took 0:00:09.925765 to compile angular_dart_base_app|web/main.dart.
Build completed with 3 errors.
[web] GET main.dart.js => Could not find asset angular_dart_base_app|web/main.dart.js.
app_layout_component.html
<material-drawer persistent #drawer="drawer" [attr.end]="end ? '' : null">
<material-list *deferredContent>
<div group class="mat-drawer-spacer"></div>
<div group>
<material-list-item>
<material-icon icon="inbox"></material-icon>Inbox
</material-list-item>
<material-list-item>
<material-icon icon="star"></material-icon>Star
</material-list-item>
<material-list-item>
<material-icon icon="send"></material-icon>Sent Mail
</material-list-item>
<material-list-item>
<material-icon icon="drafts"></material-icon>Drafts
</material-list-item>
</div>
<div group>
<div label>Tags</div>
<material-list-item>
<material-icon icon="star"></material-icon>Favorites
</material-list-item>
</div>
</material-list>
</material-drawer>
<material-content>
<header class="material-header shadow">
<div class="material-header-row">
<material-button icon
class="material-drawer-button" (trigger)="drawer.toggle()">
<material-icon icon="menu"></material-icon>
</material-button>
<span class="material-header-title">Simple Layout</span>
<div class="material-spacer"></div>
<nav class="material-navigation">
<a href="#AppLayout">Link 1</a>
</nav>
<nav class="material-navigation">
<a href="#AppLayout">Link 2</a>
</nav>
<nav class="material-navigation">
<a href="#AppLayout">Link 3</a>
</nav>
</div>
</header>
<div>
Lorem ipsum dolor sit amet, ad erat postea ullamcorper nec, veri veniam quo
et. Diam phaedrum ei mea, quaeque voluptaria efficiantur duo no. Eu adhuc
veritus civibus nec, sumo invidunt mel id, in vim dictas detraxit. Per an
legere iriure blandit. Veri iisque accusamus an pri.
</div>
<div class="controls">
<h3>Options</h3>
<material-toggle [(checked)]="end" label="end">
</material-toggle>
</div>
</material-content>
app_layout_component.dart
import 'package:angular/angular.dart';
import 'package:angular_components/app_layout/material_persistent_drawer.dart';
import 'package:angular_components/content/deferred_content.dart';
import 'package:angular_components/material_button/material_button.dart';
import 'package:angular_components/material_icon/material_icon.dart';
import 'package:angular_components/material_list/material_list.dart';
import 'package:angular_components/material_list/material_list_item.dart';
import 'package:angular_components/material_toggle/material_toggle.dart';
@Component(
selector: 'app-layout',
directives: const [
DeferredContentDirective,
MaterialButtonComponent,
MaterialIconComponent,
MaterialListComponent,
MaterialListItemComponent,
MaterialPersistentDrawerDirective,
MaterialToggleComponent,
],
templateUrl: 'app_layout_component.html',
styleUrls: const [
'app_layout_component.scss',
'package:angular_components/app_layout/layout.scss.css',
])
class AppLayoutComponent {
bool end = false;
}
app_layout_component.scss
@import 'package:angular_components/css/material/material';
:host {
border: 1px solid;
display: block;
height: 400px;
overflow: hidden;
position: relative;
width: 800px;
}
.controls {
align-items: flex-start;
display: flex;
flex-direction: column;
}
a:link, a:visited, a:active, a:hover {
color: $mat-white;
text-decoration: none;
}
app_component.dart
import 'package:angular/angular.dart';
import 'package:angular_components/angular_components.dart';
import 'package:angular_dart_base_app/src/components/app_layout/app_layout_component.dart';
import 'src/components/todo_list/todo_list_component.dart';
// AngularDart info: https://webdev.dartlang.org/angular
// Components info: https://webdev.dartlang.org/components
@Component(
selector: 'my-app',
styleUrls: const ['app_component.css'],
templateUrl: 'app_component.html',
directives: const [
materialDirectives,
AppLayoutComponent,
TodoListComponent],
providers: const [materialProviders],
)
class AppComponent {
// Nothing here yet. All logic is in TodoListComponent.
}
app_component.html
<h1>My First AngularDart App</h1>
<app-layout></app-layout>
<todo-list></todo-list>
pubspec.yaml
name: angular_dart_base_app
description: A web app that uses AngularDart Components
version: 0.0.1
#homepage: https://www.example.com
#author: Tushar Rai <email@example.com>
environment:
sdk: '>=1.24.0 <2.0.0'
dependencies:
angular: ^4.0.0
angular_components: ^0.8.0
sass_builder: ^1.0.1
dev_dependencies:
angular_test: ^1.0.0
browser: ^0.10.0
dart_to_js_script_rewriter: ^1.0.1
test: ^0.12.0
transformers:
- sass_builder
- angular:
entry_points:
- web/main.dart
- test/**_test.dart
- test/pub_serve:
$include: test/**_test.dart
- dart_to_js_script_rewriter
# Uncomment the following in sdk 1.24+ to make pub serve
# use dartdevc (webdev.dartlang.org/tools/dartdevc).
#web:
# compiler:
# debug: dartdevc
将 'app_layout_component.scss' 替换为 app_layout_component.dart 文件中的 'app_layout_component.css'
app_layout_component.dart
@component(
styleUrls: const [
'app_layout_component.css',
'package:angular_components/app_layout/layout.scss.css',
])
我正在尝试使用以下代码在 AngularDart 中应用 App Layout 组件 material design angular_components，但系统在应用时抛出错误它通过 .scss。 请帮助我了解以下内容中缺少的内容，以便相应地制作应用程序 运行。
错误：
C:\Users\Tushar Rai\Desktop\Project files\Angular_Dart_Base_App\angular_dart_base_app>pub serve
Loading source assets...
Loading sass_builder, angular, test/pub_serve and dart_to_js_script_rewriter transformers...
Serving angular_dart_base_app web on http://localhost:8080
Serving angular_dart_base_app test on http://localhost:8081
Build completed successfully
[web] GET Served 3 cached assets.
[Info from Dart2JS]:
Compiling angular_dart_base_app|web/main.dart...
[Error from Dart2JS on angular_dart_base_app|web/main.dart]:
web\packages\angular_dart_base_app\src\components\app_layout\app_layout_component.template.dart:29:1:
Can't read 'package:angular_dart_base_app/src/components/app_layout/app_layout_component.scss.shim.dart' (Could not find asset angular_dart_base_app|lib/src/components/app_layout/app
_layout_component.scss.shim.dart.).
import 'package:angular_dart_base_app/src/components/app_layout/app_layout_component.scss.shim.dart' as import0;
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
[Error from Dart2JS on angular_dart_base_app|web/main.dart]:
web\packages\angular_dart_base_app\src\components\app_layout\app_layout_component.template.dart:62:56:
Not a compile-time constant.
const List<dynamic> styles$AppLayoutComponent = const [import0.styles, import1.styles];
^^^^^^^^^^^^^^
[Error from Dart2JS on angular_dart_base_app|web/main.dart]:
web\packages\angular_dart_base_app\src\components\app_layout\app_layout_component.template.dart:62:56:
Not a compile-time constant.
const List<dynamic> styles$AppLayoutComponent = const [import0.styles, import1.styles];
^^^^^^^^^^^^^^
[Dart2JS on angular_dart_base_app|web/main.dart]:
1 warning(s) and 3 hint(s) suppressed in package:angular_components.
[Warning from Dart2JS on angular_dart_base_app|web/main.dart]:
2 hint(s) suppressed in package:angular.
[Dart2JS on angular_dart_base_app|web/main.dart]:
1 warning(s) suppressed in package:angular_dart_base_app.
[Info from Dart2JS]:
Took 0:00:09.925765 to compile angular_dart_base_app|web/main.dart.
Build completed with 3 errors.
[web] GET main.dart.js => Could not find asset angular_dart_base_app|web/main.dart.js.
app_layout_component.html
<material-drawer persistent #drawer="drawer" [attr.end]="end ? '' : null">
<material-list *deferredContent>
<div group class="mat-drawer-spacer"></div>
<div group>
<material-list-item>
<material-icon icon="inbox"></material-icon>Inbox
</material-list-item>
<material-list-item>
<material-icon icon="star"></material-icon>Star
</material-list-item>
<material-list-item>
<material-icon icon="send"></material-icon>Sent Mail
</material-list-item>
<material-list-item>
<material-icon icon="drafts"></material-icon>Drafts
</material-list-item>
</div>
<div group>
<div label>Tags</div>
<material-list-item>
<material-icon icon="star"></material-icon>Favorites
</material-list-item>
</div>
</material-list>
</material-drawer>
<material-content>
<header class="material-header shadow">
<div class="material-header-row">
<material-button icon
class="material-drawer-button" (trigger)="drawer.toggle()">
<material-icon icon="menu"></material-icon>
</material-button>
<span class="material-header-title">Simple Layout</span>
<div class="material-spacer"></div>
<nav class="material-navigation">
<a href="#AppLayout">Link 1</a>
</nav>
<nav class="material-navigation">
<a href="#AppLayout">Link 2</a>
</nav>
<nav class="material-navigation">
<a href="#AppLayout">Link 3</a>
</nav>
</div>
</header>
<div>
Lorem ipsum dolor sit amet, ad erat postea ullamcorper nec, veri veniam quo
et. Diam phaedrum ei mea, quaeque voluptaria efficiantur duo no. Eu adhuc
veritus civibus nec, sumo invidunt mel id, in vim dictas detraxit. Per an
legere iriure blandit. Veri iisque accusamus an pri.
</div>
<div class="controls">
<h3>Options</h3>
<material-toggle [(checked)]="end" label="end">
</material-toggle>
</div>
</material-content>
app_layout_component.dart
import 'package:angular/angular.dart';
import 'package:angular_components/app_layout/material_persistent_drawer.dart';
import 'package:angular_components/content/deferred_content.dart';
import 'package:angular_components/material_button/material_button.dart';
import 'package:angular_components/material_icon/material_icon.dart';
import 'package:angular_components/material_list/material_list.dart';
import 'package:angular_components/material_list/material_list_item.dart';
import 'package:angular_components/material_toggle/material_toggle.dart';
@Component(
selector: 'app-layout',
directives: const [
DeferredContentDirective,
MaterialButtonComponent,
MaterialIconComponent,
MaterialListComponent,
MaterialListItemComponent,
MaterialPersistentDrawerDirective,
MaterialToggleComponent,
],
templateUrl: 'app_layout_component.html',
styleUrls: const [
'app_layout_component.scss',
'package:angular_components/app_layout/layout.scss.css',
])
class AppLayoutComponent {
bool end = false;
}
app_layout_component.scss
@import 'package:angular_components/css/material/material';
:host {
border: 1px solid;
display: block;
height: 400px;
overflow: hidden;
position: relative;
width: 800px;
}
.controls {
align-items: flex-start;
display: flex;
flex-direction: column;
}
a:link, a:visited, a:active, a:hover {
color: $mat-white;
text-decoration: none;
}
app_component.dart
import 'package:angular/angular.dart';
import 'package:angular_components/angular_components.dart';
import 'package:angular_dart_base_app/src/components/app_layout/app_layout_component.dart';
import 'src/components/todo_list/todo_list_component.dart';
// AngularDart info: https://webdev.dartlang.org/angular
// Components info: https://webdev.dartlang.org/components
@Component(
selector: 'my-app',
styleUrls: const ['app_component.css'],
templateUrl: 'app_component.html',
directives: const [
materialDirectives,
AppLayoutComponent,
TodoListComponent],
providers: const [materialProviders],
)
class AppComponent {
// Nothing here yet. All logic is in TodoListComponent.
}
app_component.html
<h1>My First AngularDart App</h1>
<app-layout></app-layout>
<todo-list></todo-list>
pubspec.yaml
name: angular_dart_base_app
description: A web app that uses AngularDart Components
version: 0.0.1
#homepage: https://www.example.com
#author: Tushar Rai <email@example.com>
environment:
sdk: '>=1.24.0 <2.0.0'
dependencies:
angular: ^4.0.0
angular_components: ^0.8.0
sass_builder: ^1.0.1
dev_dependencies:
angular_test: ^1.0.0
browser: ^0.10.0
dart_to_js_script_rewriter: ^1.0.1
test: ^0.12.0
transformers:
- sass_builder
- angular:
entry_points:
- web/main.dart
- test/**_test.dart
- test/pub_serve:
$include: test/**_test.dart
- dart_to_js_script_rewriter
# Uncomment the following in sdk 1.24+ to make pub serve
# use dartdevc (webdev.dartlang.org/tools/dartdevc).
#web:
# compiler:
# debug: dartdevc
将 'app_layout_component.scss' 替换为 app_layout_component.dart 文件中的 'app_layout_component.css'
app_layout_component.dart
@component(
styleUrls: const [
'app_layout_component.css',
'package:angular_components/app_layout/layout.scss.css',
])