Visual Studio Code with Native Script does not recognise Native Script components sometimes in the component XML. I have one from the official tutorial and in it the ActionBar is recognized - but GridLayout is not:
'GridLayout' is not a known element:
1. If 'GridLayout' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '#NgModule.schemas' of this component.
XML looks like this:
<ActionBar title="Groceries">
<!-- On iOS devices, <ActionItem>s are placed from left to right in sequence; you can override that (as the code above does) by providing an ios.position attribute. -->
<ActionItem text="Share" (tap)="share()" android.systemIcon="ic_menu_share_holo_dark" ios.systemIcon="9" ios.position="right"></ActionItem>
</ActionBar>
<GridLayout rows="auto, *">
<!-- add-bar necessary since we moved the page up 20 over the status bar on iOS-->
<GridLayout row="0" columns="*, auto" class="add-bar">
<TextField #groceryTextField [(ngModel)]="grocery" hint="Enter a grocery item" (returnPress)="add()" col="0"></TextField>
<Image src="res://add" (tap)="add()" col="1"></Image>
</GridLayout>...
It seems totally arbitrary since for example StackLayout is no problem in another XML in same project.
As suggested in the error log make sure that you have included NO_ERRORS_SCHEMA in the respective NgModule (if using lazily loaded modules include the schema there as well)
import { NgModule, NO_ERRORS_SCHEMA } from "#angular/core";
#NgModule({
schemas: [NO_ERRORS_SCHEMA],
//... more code follows here
Side note: it might be just an incomplete snippet but still... the parent GridLayout does not have an enclosing tag
In my case, it was happening just for one component html though NO_ERRORS_SCHEMA was included in respective module of that file, deleting and creating that file solved the issue for me strange but it did happen.
Related
I'm creating an electron-app that uses Microsoft fluent-ui lib. I have added the reference #fluentui/react": "^7.107.1 to the package.json file. When I then create a Dropdown like this
<Dropdown
label='Time zone'
onChange={(e, option) => this.updateTimeZone(..)}
/>
The caret with the drop down icon is missing.
When inspecting the element, it seems as the i-tag is empty and does not have the right font applied in the css-class, when compared to examples in the documentation.
Could someone see what I'm doing wrong?
By default, the Fabric icons are not added to your bundle, in order to save bytes for scenarios where you don't care about icons, or you only care about a subset.
To make them available, you may initialize them as such:
import { initializeIcons } from 'office-ui-fabric-react/lib/Icons';
initializeIcons(/* optional base url */);
After update from v3 to v4.8.3 do not work customizing components. My goal is to override Select component to get text color 'red'.
const styles = theme => ({ temp: { fontSize: 12, color: "red" })
...
<Select classes={{ root: classes.temp }} ....> ...</Select>
but MuiInputBase-input class always stay on top.
https://i.imgur.com/JGK7J89.png
I see that there are diffrents in styles loading by html head import, my current version(v4) is:
https://i.imgur.com/gAlECET.png
I see that import is doubled, and overrides my custom style.
On v3 all mui styles imports was placed on top of list and not mixed vs custom styles. I cant find more info to get solution and reason of doubling imports. where error may arise?
edit:
i must give some more details...
Problem appered after a big legacy project was updated. For represet my problem, i cut most of code and create demo on codesandbox .
Unfortunately it work fine on codesandbox, and dont let see a problem. if i download zip and start it - i have my problem. Tried on two machine ubuntu 18.04 and MacOS, both have that problem - colour red dont applied to second select. Some more detail are in issue if it will helpfull for someone. Reason in solution below
I have created sandbox for you where you can see the overwritten menu items.
Code sandbox: https://codesandbox.io/s/override-select-component-material-ui-c1io6?fontsize=14&hidenavigation=1&theme=dark
The reason was that nested component has wrong import statement. Wrong import that was work "properly" in v3 for some reason:
import InputBase from "#material-ui/core/InputBase/InputBase";
must be:
import InputBase from "#material-ui/core/InputBase";
becouse it, my styles was overriding by base style
I recently migrated an app to mui v4, which I love.
Also done is updating our test suite that runs with jest/enzyme. For example I now favor mount instead of shallow.
One problem is that I cannot find a way to test icons presence.
I am using all latest version of material-ui, react and tooling like jest/enzyme, etc, at the time of writing
In MUI source code, I see things like this in the spec files:
wrapper.find('svg[data-mui-test="KeyboardArrowLeftIcon"]'
Here is in createSvgIcon source how this prop declared:
<SvgIcon {...props} data-mui-test={`${displayName}Icon`} ref={ref}>
HOWEVER, I cannot find any reference to that data-mui-test prop in my own node_modules file in #material-ui/icons/utils/createSvgIcon.js:
var Component = _react.default.memo(_react.default.forwardRef(function (props, ref) {
return _react.default.createElement(_SvgIcon.default, (0, _extends2.default)({
ref: ref
}, props), path);
}));
And, as a matter of fact, wrapper.debug() in the tests shows that the prop is absent from the DOM:
[...]
<svg
className="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
color={[undefined]}
aria-hidden="true"
role="presentation">
[...]
Questions
Why is data-mui-test prop is removed from generated npm module code?
Is this still the right way to test icons presence? (as suggested here by mui team member)
The standard testing technique of data-testid works for these icons, i.e.:
<Warning color="warning" data-testid="warning-icon" />
Then in your test
expect(documentBody.getByTestId('warning-icon')).toBeInTheDocument();
I have created a Play Framework module "Ean2BarcodePlayModule" which includes this template "barcode.scala.html" saved in the "views.barcodePackage.tags" package:
#(ean: Long)
<img class="barcode" alt="#ean" src="#controllers.barcodePackage.BarcodeController.getBarcode(ean)" />
After using "activator publish-local", I've then referenced this in the "index.scala.html" template of a test project:
#(message: String)
#main("Welcome to Play") {
#barcodePackage.tags.barcode(5010255079763L)
}
The expected result is
<!-- Redacted for brevity -->
<img class="barcode" alt="5010255079763" src="/barcodeRoutes/5010255079763">
<!-- Redacted for brevity -->
But the actual result is:
<!-- Redacted for brevity -->
<img class="barcode" alt="5010255079763" src="Action(parser=BodyParser(anyContent))">
<!-- Redacted for brevity -->
As will be noted, the controller's action method method's return-type appears where instead the source URL should be, but I don't understand why that is happening or know how to fix it.
The module includes this line in "barcodePackage.routes":
GET /:ean controllers.barcodePackage.BarcodeController.getBarcode(ean:Long)
Meanwhile, the route file in the test project contains:
-> /barcodeRoutes barcodePackage.Routes
This is the code for the module controller:
package controllers.barcodePackage
import models.barcodePackage.Barcode
import play.api.mvc.{Action, Controller}
import play.api.libs.concurrent.Execution.Implicits._
import scala.util.{Failure, Success}
/**
* Created by Brian_Kessler on 3/11/2015.
*/
object BarcodeController extends Controller
{
def getBarcode(ean:Long) = Action.async{
Barcode.renderImage(ean) map {
case Success(imageData) => Ok(imageData).as(Barcode.mimeType)
case Failure(error) => BadRequest("Couldn't generate bar code. Error: " + error.getMessage)
}
}
}
Notes:
Most importantly, I'd like to see the module functionality working as expected.
But I'd also prefer a solution which allows me to successfully specify routes within the module, rather than be required to transcribe them all individually within projects which incorporate the module.
With thanks to Sarvesh Kumar Singh whose response helped put me on the right track, I've figured this out.
So, as I came to understand, the problem was not that the template was not finding the controller, but rather that it was calling the method in the controller instead of the reverse router for the controller.
So, what I really needed to do was tweak the module's template (all the other changes were probably irrelevant) to make sure it called the router instead.
With my present version of play, this meant changing barcode.scala.html to:
#(ean: Long)
<img class="barcode" alt="#ean" src="#controllers.barcodePackage.routes.BarcodeController.getBarcode(ean:Long)" />
Note, the source does NOT start with "#routes", but rather "routes" comes between the package name ("barcodePackage") and the controller name ("BarcodeController").
That is because, your are calling this function by saying #controllers.net.nowhereatall.playforscala.barcodes.barcode(ean), when template is being rendered by play.
Now as you have already specified a route and have bound it to your controllers.net.nowhereatall.playforscala.barcodes.barcode(ean) function.
Change the filename barcode.routes to barcodes.routes
Now, assuming that you have/want to integrated the barcodes.routes file of your sub-project in the main project as follows,
-> /barcodes barcodes.routes
So... now, you will need to change few things.
Move your controllers in barcodes sub-project under the package controllers.barcodes.
You should use Barcodes and not barcodes for object name ( Scala conventions ).
So your controllers.net.nowhereatall.playforscala.barcodes controller should ideally here - controllers.barcodes.Barcodes. But you can place it here -controllers.barcodes.net.nowhereatall.playforscala.Barcodesif you want, just add the part.net.nowhereatall.playforscala` everywhere in the following code.
Now, change the route in your barcodes.routes,
GET /:ean controllers.barcodes.Barcodes.barcode(ean:Long)
Now, you need to do is to specify this route in your twirl template by using the reverse router.
#(ean: Long)
<img class="barcode" alt="#ean" src="#controllers.barcodes.routes.Barcodes.barcode(ean)" />
Now, when the tempate is reandered by play by #barcodes.tags.barcode(5010255079763L), this controllers.barcodes.routes.Barcode(ean) call will be evaluated to /barcodes/5010255079763 by the reverse router ( since you bound the controllers.barcodes.Barcode(ean) to / route ).
hence what you will get in browser is,
<img class="barcode" alt="5010255079763" src="/barcodes/5010255079763" />
You can even get it working by hardcoding the route as given below,
#(ean: Long)
<img class="barcode" alt="#ean" src="/barcodes/#ean" />
I have issue with auto generated code for web components.
Here is piece of HTML:
<div id="hidden-ui">
<div id="auth-form" class="...">
...
<to-button></to-button>
</div>
...
</div>
As you can see, there is custom web component called to-button:
<element name="to-button" constructor="TOSimpleButton" extends="div">
...
</element>
On startup I want to move #auth-form outside from parent node to document root:
Element af = document.query('#auth-form');
Element db = document.query('BODY');
db.children.add(af);
It's OK if there is no custom web-components inside movable node, but while to-button is inside I get run-time RangeError.
Here is piece of auto generated code:
__e1 = __root.nodes[9].nodes[1].nodes[7];
__t.component(new TOSimpleButton()..host = __e1);
As you can see, there is strict old path to component, thus RangeError exception raise.
How can I handle with this?
Sounds like you want to display popup forms every now and then. Here's what I do.
I specify this constructor for the dialog/popup:
var lifecycleCaller;
DialogFooComponent() {
host = new Element.html('<x-dialog-foo></x-dialog-foo>');
lifecycleCaller = new ComponentItem(this)
..create();
document.body.children.add(host);
lifecycleCaller.insert();
}
And as you can see, I add it to the document body. However, this only happens when creating a new instance.
Whenever I need to show that popup, I have code like this:
import '../dialog/foo/foo.dart';
...
// Later at some point I do:
new DialogFooComponent();
And what happens is that you have popup forms appearing in the body whenever you wish them to.
When you want to close the dialog, you can just call this inside the dialog component:
lifecycleCaller.remove();
As mentioned here, this will not be fixed in WebUI package, but will in Polymer.
this won't be fixed in web_ui pkg. It should work in polymer pkg.