I have an issue to mix several builders on single package.
In fact, I created build.yaml that contains the sources for file generation (JS builder), but when I need to test my web app (i.e. using build_web_compilers), it works only if I remove build.yaml file.
How to use both builders (JS builder + Web builder) without deleting/recreating build.yaml file ?
build.yaml
targets:
$default:
builders:
js_wrapping_generator|js_wrapping:
enabled: true
sources:
- 'lib/src/*.dart'
- 'example/*.dart'
builders:
js_wrapping:
target: "js_wrapping_generator"
import: "package:js_wrapping_generator/builder.dart"
builder_factories: ["jsWrapping"]
build_extensions: {".dart": [".g.dart"]}
auto_apply: dependents
build_to: source
Versions
Dart VM version: 2.0.0-dev.67.0
build_runner: ^0.9.1
build_test: ^0.10.2
build_web_compilers: ^0.4.0
source_gen: ^0.8.3
test: ^1.2.0
Related
I created a new project with the command:
dart create simple -t web-simple
and tried to run it:
webdev serve
pubspec.yaml is:
name: simple
description: An absolute bare-bones web app.
version: 1.0.0
# homepage: https://www.example.com
environment:
sdk: '>=2.16.1 <3.0.0'
# dependencies:
# path: ^1.7.0
dev_dependencies:
build_runner: ^2.1.4
build_web_compilers: ^3.2.1
lints: ^1.0.0
It crashes with a huge trace ending with:
[SEVERE] package:shelf/shelf_io.dart 139:5 handleRequest
An other up-to-date project using a build.yaml serves with errors:
[SEVERE] HttpException: Content size below specified contentLength. 3977 bytes written but expected 3978., uri = /web/
Is it a bug?
My Dart SDK version is 2.10.1 (installed through Chocolatey)
AngularDart version 6.0.0-alpha (as given by the pubspec.yaml)
I am using Windows
I am using Microsoft Edge for my browser
I use stagehand to create my projects
As said above I used stagehand web-angular command to create an AngularDart project. It was an empty project which I had not modified after creation. I tried to use the webdev serve command in my PowerShell to run my project. I opened the link given in the output but it was taking FOREVER to load. The output was:-
[INFO] Building new asset graph completed, took 4.7s
[INFO] Checking for unexpected pre-existing outputs. completed, took 3ms
[INFO] Serving `web` on http://<ip_address here>:8080
[INFO] Generating SDK summary completed, took 8.1s
[INFO] 37.1s elapsed, 499/520 actions completed.
The numbers in the last [INFO] block started to grow uptil 4532/4800 after which I lost my patience and terminated the command. I have even tried reinstalling Dart but it hasn't worked. It didn't work even when I ran pub get and tried to serve it again. How to fix this?
Try the following pubspec.yaml with your project.
name: my_app
description: A web app that uses AngularDart Components
version: 1.0.0
environment:
sdk: ">=2.2.0 <3.0.0"
dependencies:
angular: ^6.0.0
angular_components: ^1.0.1
angular_router: ^2.0.0
angular_forms: ^3.0.0
dev_dependencies:
angular_test: ^3.0.0
build_runner: ^1.10.2
build_test: ^1.2.2
build_web_compilers: ^2.12.0-dev.3
#build_web_compilers: ^2.12.2
test: ^1.15.4
sass_builder: ^2.1.3
I am trying to figure out how to use .scss files in my AngularDart project.
My app structure so far looks like this:
-lib
-src
-signin_component
-signin_component.dart
-singin_component.html
-signin_component.scss
-signin_component.scss.css
-route_paths.dart
-routes.dart
-app_component.css
-app_component.dart
-app_component.html
The pubspec.yaml file contains the following:
environment:
sdk: '>=2.0.0 <3.0.0'
dependencies:
angular: ^5.0.0
angular_components: ^0.12.0
angular_forms: ^2.0.0
angular_router: ^2.0.0-alpha+19
bootstrap_sass: any
dev_dependencies:
angular_test: ^2.0.0
build_runner: ^1.0.0
build_test: ^0.10.2
build_web_compilers: ^0.4.0
test: ^1.0.0
I'm trying to add style to the singin_component.html file but nothing I've done is working. The singin_component.dart file has the following:
import 'package:angular/angular.dart';
import 'package:angular_components/material_icon/material_icon.dart';
#Component(
selector: 'app-signin',
templateUrl: 'signin_component.html',
styleUrls: const [
'signin_component.scss.css',
'package:angular_components/app_layout/layout.scss.css'
],
directives: [
MaterialIconComponent
]
)
class SigninComponent{
}
I've read several post about this on stackoverflow. Some references are:
Use SCSS style files within AngularDart 5 and Dart 2
Angular Dart - Using sass files
Is Dart integrated with SASS?
Importing SCSS partials in Angular Dart
I have tried almost everything recommended on the posts above but still, nothing works. At this point, I'd rather ask if someone here can guide me. I have little experience with dart. I'm learning AngularDart and I feel I'm missing something that I just can't see.
If you add sass_builder: ^2.1.2 to the dev_dependencies in your project it will run during the build and create a .css file for any .scss file you have.
I'd recommend removing signin_component.scss.css from your source directory. signin_component.css (notice the extension) will be generated during the build.
Update your angular component to include the generated .css file:
styleUrls: const [
'signin_component.css',
'package:angular_components/app_layout/layout.scss.css'
],
The file you import from the angular_components package still needs to end with .scss.css because we generate a custom extension for our package.
I want to use Dart in future for developing because its very functionally.
Ive started a Project but I am getting errors if i am impporting mysqljocky.
name: WebInterface
description: A web app for the popular minecraft plugin
version: 0.0.1
#homepage: https://www.example.com
#author: LarsE <email#example.com>
environment:
sdk: '>=1.24.0 <2.0.0'
dependencies:
angular: ^4.0.0
angular_components: ^0.8.0
sqljocky: ^0.14.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:
- 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
I am getting everytime this error:
Working dir: E:\WebAuction\WebInterface
"C:\Program Files\Dart\dart-sdk\bin\pub.bat" get
Resolving dependencies...
Package dart_style has no versions that match >=0.2.10 <2.0.0 derived from:
- angular 4.0.0 depends on version >=0.1.8 <2.0.0
- code_builder 1.0.3 depends on version >=0.2.10 <2.0.0
Process finished with exit code 1
You can't access MySQL from code running in the browser.
This is why this attempt causes an error message.
This is not related to Dart, but how SQL databases work.
You need to expose a REST API or similar on a server that forwards queries and commands to the database running on the server.
Dart server frameworks like Aqueduct, Angel, Jaguar, Shelf, can be used for that, but the server doesn't need to be written in Dart. There are lots of other solutions.
From Angular you can access the REST API using HTTP requests.
How can I ignore a dependency in a project?
My project setting is:
Project A: depends on Angular2 & depends on Foundation
Project Foundation: depends on Redstone_mapper_mongo
The problem is I want to use angular2 in my Project A which depends on my Project Foundation. However the Project Foundation uses the redstone mapper mongo but angular2 and redstone mapper mongo dont work together.
Question:
So in my foundation is something like this. Can I just ignore these #Field(), #NotEmpty and the import somehow in Project A? So that angular works just fine in Project A? Therefore redstone mapper mongo shouldn't be loaded in Project A. But how can I do this?
import 'package:redstone_mapper/mapper.dart';
class Address {
#Field()
#NotEmpty()
String street;
#Field()
#NotEmpty()
String city;
}
[Update]
I have these dependencies in my project A now. I added
code_transformers: ^0.5.1
Project A pubspec.yaml
dependencies:
angular: "^4.0.0+2"
angular_forms: "^1.0.0"
foundation:
path: ../foundation
dependency_overrides:
code_transformers: ^0.5.1
dev_dependencies:
angular_test: ^1.0.0
browser: ^0.10.0
dart_to_js_script_rewriter: ^1.0.1
test: ^0.12.30
transformers:
- angular:
entry_points:
- web/main.dart
- test/**_test.dart
- test/pub_serve:
$include: test/**_test.dart
- dart_to_js_script_rewriter
Fondation pubspec.yaml
dependencies:
intl: "^0.15.2"
http: "^0.11.3+16"
great_circle_distance: "^1.0.1"
redstone_mapper_mongo: "0.2.0-beta.1"
jaguar_serializer: "^0.5.1"
dev_dependencies:
browser: "^0.10.0+2"
dart_to_js_script_rewriter: "^1.0.3"
transformers:
- dart_to_js_script_rewriter
In the Angular project adding
dependency_overrides:
code_transformers: ^0.5.1
analyzer: 0.30.0+4
should fix it
In the fondation project I added a local dependency of my own empty implementation
redstone_mapper_mongo:
path: ../redstone_mapper_mongo
And in this empty implementation the Field and NotEmpty annotations are just declared.
library redstone_mapper;
class Field {
const Field();
}
class NotEmpty {
const NotEmpty();
}
Like this it is possible now that Project A uses the local variant and Angular2 without any issues. And without creating a second world of model objects.
I used the dependency_overrides in my project B with the real version of redstone_mapper_mongo and so the annotations #Field and #Empty are using the real implementation of the redstone_mapper_mongo. And everything works fine now.
dependency_overrides:
redstone_mapper_mongo: "0.2.0-beta.1"