Running into an weird issue when I use Angular 2.0 Dart. Basically I'm trying to use Router and using pub serve to transform it to JS using the angular transformer. However I get the following error
Cannot find reflection information on RouteRegistry
at dart.wrapException (http://localhost:8080/main.dart.js:2834:17)
at NoReflectionCapabilities.dart.NoReflectionCapabilities.factory$1 (http://localhost:8080/main.dart.js:31991:17)
at Reflector.dart.Reflector.factory$1 (http://localhost:8080/main.dart.js:15565:46)
at Binding.dart.Binding.resolve$0 (http://localhost:8080/main.dart.js:13499:41)
at dart.resolveBindings (http://localhost:8080/main.dart.js:13766:90)
at dart.Injector.static.Injector_resolve (http://localhost:8080/main.dart.js:13898:63)
at bootstrap_closure.dart.bootstrap_closure.call$0 (http://localhost:8080/main.dart.js:9374:37)
at dart._rootRun (http://localhost:8080/main.dart.js:20637:16)
at _ZoneDelegate.dart._ZoneDelegate.run$2 (http://localhost:8080/main.dart.js:22730:41)
at NgZone.dart.NgZone._run$4 (http://localhost:8080/main.dart.js:5098:24)
But removing the transformer
- angular2:
entry_points: web/main.dart
I can see my app and navigate through the routes properly, however the downside is that my Dart2JS file is now 2.8megs
Currently as of Alpha 28, this is not supported. Alpha 30 will have this fixed.
https://github.com/angular/angular/issues/1950
You could add "mirror_mode: verbose" to the angular2 transformer.
Does RouteRegistry come from a different package? If so make sure the angular transformer has also been added to that package (it doesn't have to specify any entry points). The new angular transformer works a lot differently than the old one and it is required on all packages, not just the application package.
Related
I am trying to include custom icons as described in this post. But I can not find the #HtmlImport annotation anymore (Flow V. 20). This annotation was widely used, should it have been replaced I would expect to find at least some documentation.
P.S. I also tried #StyleSheet("./styles/iconexp-iconset-svg.html")
bit it complains:
Couldn't find route for 'styles/iconexp-iconset-svg.html'
Bower was deprecated in favor of npm and HTML Imports in favor of ES modules in Vaadin 14. I don't remember when they were removed, but they are no longer supported in Vaadin 20.
You can check the migration instructions here: https://vaadin.com/docs/v14/guide/upgrading/v10-13/#migration-steps
Building off of Jouni's, here is an example using #JsModule.
(1) Define your iconset in a JavaScript file.
import '#polymer/iron-iconset-svg/iron-iconset-svg';
const templateElem = document.createElement('template');
templateElem.innerHTML = `
<iron-iconset-svg name="namespace"><svg><defs>
<g id="iconname">...</g>
...
</defs></svg></iron-iconset-svg>
`;
document.head.appendChild(templateElem.content);
(2) Import the file in your root layout class.
#JsModule("./icons.js")
public class RootLayout...
using exporting(highchart) getting below error:
ERROR in src/app/desktop/module/dashboard/dashboard.module.ts(24,1): error TS2349: Cannot invoke an expression whose type lacks a call signature. Type 'typeof import("C:/website/UI_Dashboard/node_modules/highchart
s/modules/exporting.src")' has no compatible call signatures.
in the module:
import {ChartModule, HIGHCHARTS_MODULES} from 'angular-highcharts';
import * as more from 'highcharts/highcharts-more.src';
import * as highcharts from 'highcharts';
import * as exporting from 'highcharts/modules/exporting.src';
import * as offline from 'highcharts/modules/offline-exporting';
exporting(highcharts);
offline(highcharts);
what should I do for solving this issue?
Have you tried with import exporting from 'highcharts/modules/exporting.src';?
It's the suggested way of module working as documented in the official Highcharts wrapper for Angular - https://github.com/highcharts/highcharts-angular#core
You should also load all Highcharts related files as src or minified - mixing might cause some TS issues.
An import path for src version of Highcharts core is 'highcharts/highcharts.src'.
Also (I'm not sure if this applies here since the code might not be complete), highcharts-more needs to be initialized as any other module. Usually it is loaded before other modules - initialization order is rarely important (some series types are based on optional modules) and you will get an error if the order is wrong, so it's important to test this.
In case anyone encounters this problem nowadays, changing this:
import * as exporting from 'highcharts/modules/exporting.src';
To this:
import Exporting from 'highcharts/modules/exporting';
Solved the problem for me.
I'm using Angular CLI 11.1.4 and the Highcharts npm package v9.2.2
A few days back I switched to Angular 7 and not able to locate declarations.d.ts.
In Angular 2 and 4, I used declarations.d.ts to define the typing for JQUERY and others -
interface JQuery {
datepicker(options: any): JQuery;
modal(options: any): JQuery;
}
Where to define unknown element interface in Angular 7 ?
Note: I used Angular CLI to generate the project.
Use typings.d.ts in /src folder.
More info here: TypeScript Configuration
UPDATE
Better way of achieving your goal is to use jQuery's typings.
Be sure to add:
"typeRoots": [
"node_modules/#types"
],
to your tsconfig.json so typescript knows where to search for types.
Most famous libraries will have their typings package out there, so first try to get it from npm, if not found than you always can define them in typings.d.ts
I understand how to import one dart-polymer package into another package and use a component from the imported package.
There seems to be a difference in angular2-dart.
I created an angular2-dart component in package A and import it into package B.
The specific component I want to use is NameComponent.
In polymer I would simply do the following to used the imported component's markup
<name-component></name-component>
Doing something similar does not work in angular2-dart.
I have not been able to find information on importing a component from one dart package into another for angular2-dart.
A graphical summary of what I am trying to do is shown below - package B. The name-component is from package A.
Does anyone know how this is done?
EDIT 1
After making the suggested corrections I receive the following
"P:\Program Files\Dart\dev\dart-sdk\bin\pub.bat" serve web --port=57435
Loading source assets...
Loading angular2 and dart_to_js_script_rewriter transformers...
Serving epimss_ng2_app web on http://localhost:57435
[DirectiveProcessor on epimss_ng2_reg|lib/components.dart]:
ERROR: Invalid argument (url): "Could not read asset at uri asset:epimss_ng2_reg/lib/name_component.html"
[Warning from TemplateCompiler on epimss_ng2_app|lib/app_component.ng_meta.json]:
Could not find Directive entry for name: NameComponent
. Please be aware that Dart transformers have limited support for reusable, pre-defined lists of Directives (aka "directive aliases"). See https://goo.gl/d8XPt0 for details.
Build completed with 1 errors.
[web] GET Served 13 assets.
[web] GET packages/epimss_ng2_reg/components.dart => Could not find asset epimss_ng2_reg|lib/components.dart.
[web] GET Served 17 assets.
I am going to place the components directory directly on lib and see if it makes a difference.
My package is actually packages/epimss_ng2_reg/src/components.dart.
I can only think of 2 things you might be missing.
You need to add the component to directives
#Component(..., directives: const [NameComponent]) af the parent component.
You need to add the Angular2 transformer in pubspec.yaml of the component
transformers:
angular2
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.