I want to use less preprocessor in my dart angular 2 app. What I exactly do :
include dependency into pabspec.yaml file
- less_dart:
entry_point: web/main.less
build_mode: dart
include <link rel="stylesheet" href="main.css"/> into index.html file
In web folder I added main.less file as well
In this point my app works correct, but when I try to include other .less files in other components in leads to exaption, for instance:
I created file app.less, inside I writed some less code
In file app_component.dart I included it like: styleUrls: const ['app.less'],
As result I had such exaption as:
GET http://localhost:8080/packages/SmartPeopleUI/app.less.dart
An error occurred loading file: package:Project/app.less.dart
Related
I am quite New to typescript and I have tried to set up a typescript Project in Visual studio 2015 as HTML Application With Typescript. My problem is how to import or Reference highcharts without errors. I need a short description on how to set up the easist highchart in my typescript file. The description should explain from the start
1) creating the Project, and adding highchart (npm, tsd...) to the Project,
2) setting up the index.html file and app.ts (or the name of Your typescript file),
3) adding References in the html file and app.ts, especially in app.ts where you set import or References, like using import statement or
< reference path="typings/tsd.d.ts" />
< reference path="typings/highcharts/highcharts.d.ts" />
4) Set require statements and put into a variable
(I can't get this code to work ... Please use Your way to do this
var Highcharts = require('highcharts');
// Load module after Highcharts is loaded
require('highcharts/modules/exporting')(Highcharts);
// Create the chart
Highcharts.chart('container', { /*Highcharts options*/ });
5) Finally you render the highchart either in app.ts or by using the id in the index.html file
<div id="container" style="width:100%; height:400px;"></div>
I hope somebody can help me out here. I could of course have done all this in index.html but I want to make use of the debugging possibilities in typescript.
are any alternatives for compile .scss files in action in ASP.NET MVC controller?
I have /Content folder with two files: main.scss and external.scss. In my controller I'm using NSASS package:
public ActionResult GetCss(string scssPath)
{
string scss = #"#import """ + Server.MapPath(scssPath) + #""";";
var compiler = new SassCompiler();
string compiled = compiler.Compile(source: scss);
return Content(compiled.ToString(), "text/css");
}
my view:
<link href="#Url.Action("GetCss", "Theme", new { scssPath="~/Content/sass/main.scss" })" rel="stylesheet" type="text/css" />
main.scss file:
#import "external";
I have error
Error: File to import not found or unreadable: external
I tried to write #import "external.scss" but same problem.
We have the same (or similar problem). The problem I'm seeing is that SassCompiler is trying to find the #import files relative to the current working directory, instead of relative to the file which contains the #import.
There might be a few ways around this depending on what you're trying to do.
My workaround consisted of making a temporary copy of the directory structure and then updating all the #import statements in each file to make them relative to the working directory before compiling.
UPDATE
I got this working without this hack by passing in all the paths to the 'includePaths' parameter. I had tried this before without success because I was using relative paths. If you use absolute paths then it works.
NSass is outdated. It was updated last time in 2013 and can't compile many new scss syntaxes, but if you want to compile few simple lines and have rest precompiled, here's simplest solution I came up with.
string scss = System.IO.File.ReadAllText(AppDomain.CurrentDomain.BaseDirectory + #"\Design\Scss\custom.scss");
scss += "$primary: #f80;$secondary: #0f2;";
Btw, if you would like to import other scss files into your main scss file, you can use following code but note I'm not good at Regex and thins it might have flaws.
scss = Regex.Replace(scss, "import \"", m=> m + AppDomain.CurrentDomain.BaseDirectory + #"Design\Scss\");
I currently have this directory layout:
project
web
app.html
main.dart
templates
app.html
alerts.html
menu.html
components
AppComponent.dart
AlertsComponent.dart
MenuComponent.dart
resources
css
bootstrap.css
My components look like:
#Component(
selector: 'app',
templateUrl: 'templates/app.html'
)
class AppComponent { ... }
My application's index.html (in another project) is served from /client, and project/web is served from /project. The above works in Dartium, but I get errors from pub build:
[Warning from _Serial on project|web/main.dart with input project|web/components/AppComponent.dart]:
line 3, column 1 of web/components/AppComponent.dart: Unable to find templates/app.html at project|templates/app.html
#Component(
^^^^^^^^^^^
and
[Warning from _Serial]:
Unable to find webatara|web/main.dart from html_files in pubspec.yaml.
and
[Warning from TemplateCacheGenerator]:
Can't find asset web/web/templates/app.html.
depending on what combination of paths I use in templateUrl and html_files (for Angular's transformer).
What, exactly, should go where and how should it be referenced in templateUrl and pubspec.yaml?
Update: I can get rid of my build errors by moving my templates to the lib directory and using templateUrl: 'packages/project/templates/app.html', but then Dartium tries to load that as /packages/project/templates/app.html, and not /project/packages/project/templates/app.html, which would be correct. I don't see any way to tell it what the base URL is.
but then Dartium tries to load that as
/packages/project/templates/app.html, and not
/project/packages/project/templates/app.html, which would be correct.
I don't see any way to tell it what the base URL is.
I believe you are using angulardart 1.1.1 or 1.1.2? We had the same issue in our project after switching from 1.1.0 to 1.1.2. This is weird behaviour that was added since version 1.1.1.
For some reason default package root in AngularDart now is '/packages/'. This causes generation of root-relative URLs. In your case it generates
/packages/project/templates/app.html
instead of
packages/project/templates/app.html
It's OK while you app is in the root of your domain. But in your case what you need to do is to add following to your initialization method in main.dart:
bind(ResourceResolverConfig, toValue: new ResourceResolverConfig
.resolveRelativeUrls(true, packageRoot: 'packages/'));
This will override angular's default packages root and will make it generate correct relative URLs.
Hope it helps.
My little Dart/Polymer sample works nice so far.
(GitHub)
Here is the yaml file I use:
name: PolymerHelloWorld
environment:
sdk: any
dependencies:
browser: any
polymer: any
shadow_dom: any
mdv: any
transformers:
- polymer:
entry_points:
- web/index.html
- web/hello-world/hello-world.html
- web/stopwatch/stopwatch.html
"pub build" produces: (Live again under GH)
From my understanding now I have 2 webcomponents: hello-world and stopwatch
I made a second project, completely independent form PolymerHelloWorld.
Here is the index.html:
I get this error message
pub build
Building PolymerSecondWorld...
[Error from polymer (Linter) on PolymerSecondWorld|web/index.html]:
web/index.html:4:5: absolute paths not allowed: "https://rawgithub.com/MikeMitterer/DART-Sample-PolymerHelloWorld/master/build/hello-world/hello-world.html"
Isn't this the idea of webcomponents? Do I miss something?
[Update]
I added DART-Sample-PolymerElementConsumer to my GH-Repo. It includes the whole polymer stuff... This sample is not a Dart-Sample. It uses polymer to import the component. At least - it tries to...
Here is the HTML it try to run:
https://rawgithub.com/MikeMitterer/DART-Sample-PolymerElementConsumer/master/web/index.html
Codeview:
https://raw.github.com/MikeMitterer/DART-Sample-PolymerElementConsumer/master/web/index.html
The HTML-Page shows no error message - nothing. Just the headline but nothing from the webcomponent.
If you want to import Polymer elements they have to be in a Dart package (e.g pub.dartlang.org).
You add the package to you pubspec.yaml to import the package into your project and
then you can import the elements/components from the packages directory.
Polymer is also very delicate about the import paths within a Dart project
and something like you tried definitively won't work
(this could work in JavaScript though)
but this would require to execute code (included within the loaded component) loaded at runtime
which Dart doesn't support yet. All code has to be available at compile time.
Some discussions about this topic:
trouble importing components using href="package:..."
should HTML Imports support package: scheme?
How can I import a custom element in both HTML and Dart? (workaround included)
improve canonicalization issues with html-imports involving packages
EDIT
I looked at your code and tried to understand your comment and extended my answer accordingly.
To be able to import components from a package the components have to be in the lib directory of the package you want to import.
The web page using (importing) elements has to be a Dart project (package) which imports the component package in 'pubspec.yaml'. For the web application (index.html, ...) web is the correct directory within the package.
How should I include jquery.mobile.js in my project so that I can use it with RequireJS.
When I add jquery.mobile.js in my project I start getting following error.
Uncaught Error: Mismatched anonymous define() module: function ( $ ) {
factory( $, root, doc );
return $.mobile;
}
I also followed this post.
Separating jQuery Mobile (1.1.0) from AMD (RequireJS)
Here is a working example. It includes Requirejs, jQueryMobile, Backbone, and Marinonette.
In the index.html file, you need to specify the main module for requirejs to load.
<script type="text/javascript" data-main="js/main" src="js/libs/require-2.1.2.min.js"></script>
In this example, the main module is under "js/main.js"
Inside, main.js, you specify the require.config and use define to load your modules.