I am migrating a project from NS 6.5 with Angular 8.2 to NS 8.1 and Angular 12.2 I have trouble with nsRouterLinkActive directive which doesn't work.
I am using lazy load for my modules like this
{ path: "mysettings", loadChildren: () => import("~/app/mysettings/mysettings.module").then((m) => m.MysettingsModule) }
and then in my app.component I use the following code to navigate:
<Label text="" class="fas bottomButton" [nsRouterLink]="['/mysettings']" nsRouterLinkActive="active" pageTransition="slide"></Label>
Navigation is working fine, my class is working fine, but it never gets added by nsRouterLinkActive directive.
Any help?
Without trying but looking at the docs, shouldn't the nsRouterLinkActive also be wrapped in square brackets, i.e. [nsRouterLinkActive]?
Related
How to use them? Docs are not clear about vuejs, only pure js.
I tried to add
var gestures = require("tns-core-modules/ui/gestures");
var labelModule = require("tns-core-modules/ui/label");
var label = new labelModule.Label();
label.on(gestures.GestureTypes.tap, function (args) {
console.log("Tap");
});
But that doesn't seem to work - not logs in the console.
Thanks
First of all,run tns -v and check your NS version.
tns-core-modules is an old way of importing things. For {N} v7:
#nativescript/ui/gestures Check out new import rules
As a general rule, If you are using nativescript-vue then you should
check typescript code samples.
"tns-core-modules/ui/gestures"; ```
Gestures in nativescript-vue
There is nothing to import to use gestures.
<Label
text="REFRESH"
#swipe="refresh"
/>
or
<Label
text="REFRESH"
#doubleTap="refresh"
/>
Unfortunately, nativescript docs are currently outdated for nativescript 7.
I'd like to render GraphQL Playground as a React component in one of my pages but it fails due to missing file-loader in webpack. Is there a way to fix this in docs or do I need to create new plugin with new webpack config?
Is it good idea to integrate Playground and Docusaurus at all?
Thanks for your ideas...
A few Docusaurus sites have embedded playgrounds:
Hermes
Uniforms
In your case you will have to write a plugin to extend the webpack config with file-loader.
Not sure if you found a better way but check out: https://www.npmjs.com/package/graphql-playground-react
You can embed this react component directly in your react app - It looks like Apollo also uses the vanilla JS version of this
I just had exactly the same problem. Basically, Docusaurus with a gQL Playground Integration runs fine in local but won't compile due to errors when running yarn build as above.
In the end I found the answer is in Docusaurus, not in building a custom compiler:
I switched from using graphql-react-playground to GraphiQL: package: "graphiql": "^1.8.7"
This moved my error on to a weird one with no references anywhere on the web (rare for me): "no valid fetcher implementation available"
I fixed the above by importing createGraphiQLFetcher from '#graphiql/create-fetcher' to my component
Then the error was around not being able to find a window component, this was an easy one, I followed docusaurus docs here: https://docusaurus.io/docs/docusaurus-core#browseronly and wrapped my component on this page in like this:
import BrowserOnly from '#docusaurus/BrowserOnly';
const Explorer = () => {
const { siteConfig } = useDocusaurusContext();
return (
<BrowserOnly fallback={Loading...}>
{() => {
const GraphEx = GraphExplorer
return
}}
);
}
This now works and builds successfully
After upgrading an angular nativescript project to the current versions of angular, typescript, tns, etc.. I'm getting a runtime error stating:
TypeError: Cannot set property 'actionBarHidden' of null at new
AppComponent...
The code that previously worked to hide the action bar looks like this:
import {Page} from "tns-core-modules/ui/page";
export class AppComponent implements OnInit, AfterViewInit {
constructor(page: Page) {
page.actionBarHidden = true;
}
}
Why is page null after the injection?
In the earlier versions the root was always a Frame, so by default there will be a Page.
But with the latest version, you are allowed to define flexible root components and any number of frames (page-router-outlet) within your app. So there won't be a default Frame / Page created within app component. Page can be injected only into the components those are loaded inside the page-router-outlet.
If TLDR the above link, the quick fix for me was to replace:
<router-outlet></router-outlet> with <page-router-outlet></page-router-outlet>
in app.component.html
Moving code to ngOnInit solved it for me
I'm new to NativeScript. I have created a new project using the Angular Blank template. The navigation is done using page-router-outlet. I want to include a xmlns attribute on the page level. As far as i can see and understand the entire code is rendered inside a global page attribute. I've seen that I can modify the page properties by injecting the Page in a component and changing it's properties, but how can I do this for xmlns?
Best regards,
Vlad
To register a UI component in Angular based application you should use registerElement and not XML namespaces (which is a concept used in NativeScript Core). Nowadays most plugin authors are doing this job for you, but still, some of the plugins are not migrated to use the latest techniques so in some cases, we should manually register the UI element.
I've created this test applicaiton which demonstrates how to use nativescript-stripe in Angular. Here are the steps to enable and use the plugin.
Installation
npm i nativescript-stripe --save
Register the UI element in app.module.ts as done here
import { registerElement } from "nativescript-angular/element-registry";
registerElement("CreditCardView", () => require("nativescript-stripe").CreditCardView);
Add the following in main.ts as required in the plugin README
import * as app from "tns-core-modules/application";
import * as platform from "tns-core-modules/platform";
declare const STPPaymentConfiguration;
app.on(app.launchEvent, (args) => {
if (platform.isIOS) {
STPPaymentConfiguration.sharedConfiguration().publishableKey = "yourApiKey";
}
});
Use the plugin in your HTML (example)
<CreditCardView id="card"></CreditCardView>
Does anyone have a kendo UI scheduler example with angular 2? Is it compatible?
Thanks
Since there is some interest in this still you can create a component that is wrapped by the scheduler:
import { Component, ViewEncapsulation, ElementRef, AfterViewInit, OnDestroy, DoCheck, Input, Output, EventEmitter, IterableDiffers } from '#angular/core';
//you can import Jquery here if you want - i used it via CDN and not local node.
declare var jQuery: any;
scheduler: any;
schedulerControl: any;
#Component({
selector: 'scheduler',
template: `
<div></div>
`,
styleUrls: ['./scheduler.component.scss'],
encapsulation: ViewEncapsulation.None
})
constructor(
protected el: ElementRef,
) {
}
//you can also do #input and #outputs here if you want to build proper events around the scheduler components.
ngAfterViewInit() {
this.scheduler = jQuery(this.el.nativeElement.children[0]);
this.schedulerControl = jQuery(this.scheduler).data("kendoScheduler");
this.scheduler.kendoScheduler({.....put your scheduler options here ....});
Note:
You must import and use the right version of jquery - which is sadly still version 1.xxx
Note 2:
New versions now supports higher versions of Jquery - important to make sure they versions match with kendo requirements.
We are currently working on a project that has a very complex scheduling module.
At the momonet we are using Kendo UI scheduler wrapped with Angular2.
This is of course not a good solution as we are wrapping the Kendo JQuery implementation. It does work (and pretty well) but we will not continue with it if there will be no progress on native Angular2 implementation soon as it forces us to work "outside" Angular.
I think it's a shame that Telerik announcements on Angular2 are not clear enough. They put on their flag being leaders in Angular2 support long ago but it seems this is not happening as expected. We are already invested in Kendo in other projects(not Angular2) but we will have to choose something real soon.
If Kendo will not start showing any real progress we will not continue with it.
It is likely that the Angular2 kendo scheduler widget will be released in 2017. Here is a link to their roll out plan.
http://www.telerik.com/blogs/what-to-expect-in-2016-for-kendo-ui-with-angular-2-and-more
In the meantime to use the scheduler our team has just imported angular 1.x for the page running our scheduler in our angular 2.x app. Not ideal but you can also get just the kendo scripts you need to run the scheduler if you're worried about performance.
You may also want to look at using ngForward with angular 1.x in the meantime until the angular 2.x widget is available. Then convert your entire application over to angular 2.x when kendo releases the scheduler.