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.
Related
I want to create a Swift Package with binary targets which has sub dependencies. As the binary targets not support sub dependencies out of the box, I have created a wrapper target that depends on both the binary framework and other dependencies as described here
Package has a target called Logger.
CocoaLumberjack is a dependency of Logger.
Logger I have generated as XCFramwork and hosted in a server as publicly accessible. Below I have added a screenshot of the Xcode project which I used to generate XCFramwork.
Please refer to the Package manifest file.
import PackageDescription
let package = Package(
name: "spmpoc",
products: [
.library(
name: "Logger",
targets: ["LoggerTarget"]),
],
dependencies: [
.package(
name: "CocoaLumberjack",
url: "https://github.com/CocoaLumberjack/CocoaLumberjack.git",
from: "3.6.1"),
],
targets: [
.target(
name: "LoggerTarget",
dependencies: [.target(name: "LoggerWrapper",
condition: .when(platforms: [.iOS]))]
),
.target(
name: "LoggerWrapper",
dependencies: [
.target(name: "Logger", condition: .when(platforms: [.iOS])),
.product(name: "CocoaLumberjack", package: "CocoaLumberjack")
]
),
.binaryTarget(name: "Logger", url: "https://mypath.com/Logger.xcframework.zip", checksum: "mychecksum")
]
)
I am able to add Swift package via Swift Package Manager, but When I try to import Logger module build error occured as ..../Logger.framework/Modules/Logger.swiftmodule/arm64-apple-ios.swiftinterface:4:8: No such module 'CocoaLumberjack'
Could someone please help me to figure out what could be the issue here?
Error
XCFramwork code snapshot for reference
Update:
I have change import to #_implementationOnly import in Logger.swift. Now in the generated .swiftinterface files does not contains the "import CocoaLumberjack" hence, compile error went away. However, app crashing because it is still looking for CocoaLumberjack.framework but its not available. '.../Library/Developer/Xcode/DerivedData/TestSPMApp-gfbagjtzjrrkjuathrrienvklwxs/Build/Products/Debug-iphonesimulator/CocoaLumberjack.framework/CocoaLumberjack' (no such file)
CocoaLumberJack added to Logger framework as a pod dependency. It seems, inside the Pods-Logger.xcconfig file it is referring to CocoaLumberjack.framework. I believe this causes the issue now.
I think the real issue here is that the dependencies don't need to be a part of your modules's public interface. You would need to replace all instances of import for the dependencies in your code to #_implementationOnly import
E.g.
#_implementationOnly import CocoaLumberjack
You can read more about #_implementationOnly here
In my flutter app I have been using these following plugin permission_handler, geolocator and google_api_availibility.
I could have added this plugin from flutter package from pubspec.yml, however, in my app i am using google_map_flutter plugin which has been using AndroidX support libraries. Due this reason I have added those library locally with some changes to work with AndroidX. So my app structure and pubspecs looks like this.
So in my app pubspecs.yml
dev_dependencies:
flutter_test:
sdk: flutter
permission_handler:
path: my_permission_handler
geolocator:
path: flutter-geolocator
My my_permission_handler's pubspecs.yml
flutter:
plugin:
androidPackage: com.baseflow.permissionhandler
pluginClass: PermissionHandlerPlugin
My api_availibility's pubspec.yml
flutter:
plugin:
androidPackage: com.baseflow.googleapiavailability
pluginClass: GoogleApiAvailabilityPlugin
My geolocator's pubspec.yml
dependencies:
meta: "^1.0.5"
flutter:
sdk: flutter
permission_handler:
path: ../my_permission_handler
google_api_availability:
path: ../flutter-google-api-availability
Now when in one of the project's classes I tried to import a model class from geolocator like this
but it shows this error The imported library 'package:geolocator/model/position.dart' can't have a part-of directive
I have no idea what I'm doing wrong here, please help me.
First of let's look into the code for package:geolocator/modles/position.dart
It says part of geolocator; at the very beginning of the file meaning this class is a part of the plugin which is exposed in the file package:geolocator/ like this part 'models/position.dart';. So here in your client code you don't need to import the class Position this way.
if you modify your import statement this way the error will be gone
import 'package:geolocator/geolocator.dart';
I hope it helps.
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"
I just started learning dart.
first I created an angular2-dart based project from https://angular.io/docs/dart/latest/quickstart.html and it worked properly.
now I want to add auth0-lock dart package from https://pub.dartlang.org/packages/auth0_lock, so I modified pubspec.yaml to the following:
name: go_dart_angular2_zingchart
description: Go Dart Angular2 with ZingChart Started Kit
version: 0.0.1
environment:
sdk: '>=1.13.0 <2.0.0'
dependencies:
angular2: ^2.0.0-beta.18
browser: ^0.10.0
dart_to_js_script_rewriter: ^1.0.1
auth0_lock: ^0.1.0
transformers:
- angular2:
platform_directives:
- 'package:angular2/common.dart#COMMON_DIRECTIVES'
platform_pipes:
- 'package:angular2/common.dart#COMMON_PIPES'
entry_points: client/web/main.dart
- dart_to_js_script_rewriter
and now when I execute pub get I get the following error:
Error on line 15, column 3 of ../../../.pub-cache/hosted/pub.dartlang.org/auth0_lock-0.1.0/pubspec.yaml: Error loading transformer "dart_to_js_script_rewriter": package "dart_to_js_script_rewriter" is not a dependency.
- dart_to_js_script_rewriter
^^^^^^^^^^^^^^^^^^^^^^^^^^
since I'm new to dart and not entirely sure what I'm doing.. I have no idea how to fix this :)
any ideas ?
thanks!
I get the same error when adding auth0_lock: ^0.1.0 to my dependencies and running pub get. The error message says that "dart_to_js_script_rewriter" is not a dependency in the pubspec.yaml of the auth0_lock package. It looks like it's added under dev_dependecies if you look here. Dev dependencies of any dependent packages are ignored. Pub only gets your package’s dev dependencies.
So I think this is a problem in their package.
So, what I did was I went to https://github.com/andresaraujo/auth0_lock.dart and cloned the package, added it into my own project root in a directory called auth0_lock. And then, in my pubspec.yaml i put:
auth0_lock:
path: auth0_lock
After that I can import it using
import 'package:auth0_lock/auth0_lock.dart';
I'm boldly stepping into the world of AngularDart, admittedly not knowing too much Dart itself yet. I'm creating a new application that does nothing (yet), except includes the latest 'angular' package.
I'm using Dart 1.2.0 and AngularDart 0.9.9.
Very simple pubspec:
name: myapp
dependencies:
angular: any
My app layout:
pubspec.yaml
pubspec.lock
\lib
\packages
\web
In web I have a simple myapp.dart:
import 'package:angular/angular.dart';
main() {
}
My build seems to work fine, but I get the following warning:
Dart: Build
[Warning from Dart2JS on myapp|web/myapp.dart]:
packages\angular\angular.dart:31:23: Hint: Can't find 'animate' in the library 'angular'.
Is 'animate' spelled right?
#MirrorsUsed(targets: const [
^^^^^^^^
My question is, what does this mean, and is this anything to be concerned about?
This was a bug in AngularDart 0.9.9 and is fixed in current versions.