I couldn't find the answer why when I am going back and forward in pages that implement the resolver, suddenly signlar stop working, and all my Angular 6 freeze. (you couldn't click on any link) the web site look ok, but nothing is working..
I am using
"ng2-signalr": "^6.1.0",
Angular 6.0.3
I implemented the ng2-signalr,
The Resolver did not work at start, than I changed it to use ISignalRConnection
I can do up to 5 time back and forward in the 6'th time the application Just FREEZE,
export class SignalrConnectionService implements
Resolve<ISignalRConnection> {
#Injectable()
export class SignalrConnectionService implements Resolve<ISignalRConnection>
{
constructor(private _signalR: SignalR) { }
resolve() {
console.log('ConnectionResolver. Resolving...');
//this._signalR.createConnection();
try {
return this._signalR.connect();
}
catch (err) {
console.log("Error in _signalR.connect: " + err.message);
}
//return this._signalR.createConnection();
}
}
Inside the Routing I did:
path: 'my_path',
component: MyComponent,
canActivate: [AuthGuard],
resolve: { connection: SignalrConnectionService }
If I remove the resolve line, the signalR is canceled and everything work (with no freeze and no signalR), but I need it..
Any help?
So I found the solution.
It seems that you don't need to use the resolver, instead in the constructor, do this:
constructor(private _signalR: SignalR) {
this._connection = _signalR.createConnection();
}
And only then in the ngInit you can put code like this:
this._connection.start().then((c) => {
//what ever
});
});
That seems to solve the problem :)
Related
I have quite a lot of routes defined and one of the routes is dedicated to user profiles.
Each user has a public profile accessible from HTTP://example.com/#username.
I have tried creating file pages/#[username].js but it doesn't seem to work.
Is there a way to have this behavior without passing # sign with the username because this would greatly complicate index.js handling homepage and I would like to have that code separated.
You can now do this like so in next.config.js
module.exports = {
async rewrites() {
return [
{
source: '/#:username',
destination: '/users/:username'
}
]
}
}
This will make any link to /#username go to the /users/[username] file, even though the address bar will show /#username.
Then, in your /pages/[username].tsx file:
import { useRouter } from 'next/router'
export default function UserPage() {
const { query = {} } = useRouter()
return <div>User name is {query.username || 'missing'}</div>
}
Next.js does not support this yet.
You should watch this issue.
I have quite a lot of routes defined and one of the routes is dedicated to user profiles.
Each user has a public profile accessible from HTTP://example.com/#username.
I have tried creating file pages/#[username].js but it doesn't seem to work.
Is there a way to have this behavior without passing # sign with the username because this would greatly complicate index.js handling homepage and I would like to have that code separated.
You can now do this like so in next.config.js
module.exports = {
async rewrites() {
return [
{
source: '/#:username',
destination: '/users/:username'
}
]
}
}
This will make any link to /#username go to the /users/[username] file, even though the address bar will show /#username.
Then, in your /pages/[username].tsx file:
import { useRouter } from 'next/router'
export default function UserPage() {
const { query = {} } = useRouter()
return <div>User name is {query.username || 'missing'}</div>
}
Next.js does not support this yet.
You should watch this issue.
I'm trying to use 'setServerTrustMode' in this pugin cordova-plugin-advanced-http, but I get error Property 'setServerTrustMode' does not exist on type 'HTTP'.
I'm using "cordova-plugin-advanced-http": "^2.4.0" and "#ionic-native/http": "^4.20.0",
I already try remove 'http' from constructor but still not working.
Here is my code
import { HTTP } from '#ionic-native/http';
constructor(private http: HTTP)
{}
public test(){
this.http.setServerTrustMode('nocheck', function () {
console.log('success!');
}, function () {
console.log('error :(');
});
}
how to fix this?
I have the same problem. Look at this.
Seems that ionic-native does not have the last version of the plugin.
I'm trying to install the plugin without the ionic native wrapper.
I'm having an issue with facebook authentication with the torii adapter, the error being: 'The Torii adapter must implement open for a session to be opened'.
I've visited many tutorials, and tried all presented methods, but most of them are usually old ember code and none of them seem to actually work.
Current state: I am able to login, I get the facebook popup and I can authorize.
Using fiddler, I can also see the response from the API containing a JSON response with all credentials from the user I authenticated with.
In the firebase console, I can see the authorized user, reset its password, deny access,...
All this leads me to believe that it's 'merely' a front-end issue where I can't seem to establish a proper 'session' to work with.
My end goal would be to pick up the relevant user data and transfer it to my firebase backend as a 'user' entry, allowing for quick registration for site visitors, but I'll be more than glad to have an active session so I can work out the rest on my own.
As a front-end rookie (I normally code C#), Ember may not have been the best choice to get the hang it, but I'm this far now, I'm not about to let it all slide and pick up a different framework.
My code:
config/environment.js
firebase: {
apiKey: 'xxxxxxx',
authDomain: 'myappname.firebaseapp.com',
databaseURL: 'https://myappname.firebaseio.com',
storageBucket: 'myappname.appspot.com',
messagingSenderId: '1234567890'
},
torii: {
sessionServiceName: 'session'
}
torii-adapters/application.js (I've changed this so much, I can't even remember what the original code was, because none of what I change/add/delete here seems to do anything at all.)
import Ember from 'ember';
import ToriiFirebaseAdapter from 'emberfire/torii-adapters/firebase';
export default ToriiFirebaseAdapter.extend({
firebase: Ember.inject.service(),
});
routes/application.js
import Ember from 'ember';
export default Ember.Route.extend({
beforeModel: function() {
return this.get('session').fetch().catch(function() {
});
},
actions:{
login: function(provider) {
this.get('session').open('firebase', {
provider: provider,
}).then(function(data) {
console.log(data.currentUser);
});
},
logout: function() {
this.get('session').close().then(function() {
this.transitionTo('application');
}.bind(this));
}
}
});
application.hbs
<div class="container">
{{partial 'navbar'}}
<a {{action "signIn" "facebook"}} class="btn">{{fa-icon "facebook"}}</a>
<a {{action "signIn" "twitter"}} class="btn">{{fa-icon "twitter"}}</a>
<a {{action "signIn" "github"}} class="btn">{{fa-icon "github"}}</a>
<a {{action "signIn" "google"}} class="btn">{{fa-icon "google"}}</a>
{{outlet}}
</div>
EDIT 1
Above code is giving me alot more errors after restarting ember server. Is this the cause of my troubles ? All the changes that seemingly didn't change a thing, weren't registered until after a server restart ? If that's the case, I may have passed the correct solution about a hundred times already...
EDIT 2
Changed the code to reflect the actual issue. The previous code was screwed beyond measure, but I never realized it because it didn't pick up until after a server restart.
EDIT 3
Found and tried this, to no avail: https://stackoverflow.com/a/32079863/4309050
This is Lorem Ipsum Dolor's answer, but updated for Ember 3.16+
// Inside routes/application.js
import Route from '#ember/routing/route';
import { inject as service } from '#ember/service';
export default class ApplicationRoute Route {
#service session;
async beforeModel() {
try {
return this.session.fetch();
} catch {}
}
}
Note that in Ember 3.16+, it is not recommended to add actions to your Route.
Instead, you can add them to a Controller or Component context:
import Component from '#glimmer/component';
import { inject as service } from '#ember/service';
import { action } from '#ember/object';
export default class LoginLogout extends Component {
#service session;
#service router;
#action
async login(provider) {
let data = await this.session.open('firebase', { provider });
console.log(data.currentUser);
}
#action
async logout() {
await this.session.close();
this.router.transitionTo('application');
}
}
Note the addition of the router service. The Router service is the way we interact with routing anywhere in our apps.
import ToriiFirebaseAdapter from 'emberfire/torii-adapters/firebase';
export default class MyAdapter extends ToriiFirebaseAdapter {
}
I had the same issue and I noticed that my torii-adapters/application.js located under the pods structure (because I use it). So I moved the torii-adapters folder to app folder and everything started to work.
NOTE: for Ember 3.16+ apps, here is the same code, but with updated syntax / patterns: https://stackoverflow.com/a/62500685/356849
The below is for Ember < 3.16, even though the code would work as 3.16+ as fully backwards compatible, but it's not always fun to write older code.
Try to inject service inside your application route and move the beforeModel outside of the actions hash,
// Inside routes/application.js
export default Ember.Route.extend({
session: Ember.inject.service(), // (1)
beforeModel: function() {
return this.get('session').fetch().catch(function() {});
},
actions:{
login: function(provider) {
this.get('session').open('firebase', {
provider: provider,
}).then(function(data) {
console.log(data.currentUser);
});
},
logout: function() {
this.get('session').close().then(function() {
this.transitionTo('application');
}.bind(this));
}
}
});
I have completed the same thing (Firebase Torii Auth) yesterday, try to follow the guide carefully. The only thing missing from the guide is to inject session service manually.
Still remember the session you declared inside environment.js file? You have to inject it to make it available
session: Ember.inject.service(), // (1)
https://github.com/firebase/emberfire/blob/master/docs/guide/authentication.md
Inside my ToriiFirebaesAdapter,
import ToriiFirebaseAdapter from 'emberfire/torii-adapters/firebase';
export default ToriiFirebaseAdapter.extend({
});
I'm trying to work out how to display an object in html using angular2. In ng1 I assigned to a variable and double braced the variable name in the html and bingo! Now I can't seem to get any data displayed at all.
Here is my simple method call:
onSubmit(value: oSearch): void {
console.log('you submitted value: ', value);
Meteor.call('methodName',value.type,value.year,value.idNumber, function(error,result) {
if (error) {
console.log('failed', error);
} else {
this.oResult = result[0];
console.log('successful call', this.oResult);
}
})
}
The object gets printed to the console. But I cannot get it to render by using:
{{oResult}}
oResult is declared using
oResult:Object;
Completely new to ts and ng2.
Update
Okay, I tried NgZone, but that didn't work. I'm getting behaviour I really don't understand.
} else {
console.log('successful call', result[0].topItem);
this.oResult = result[0];
console.log('successful call', this.oResult);
Both console.logs print the object correctly but oResult displays as [object Object]
If I change to:
this.oResult.topItem = result[0].topItem
then I get a Meteor error thrown and the 2nd console.log doesn't print. The error is:
Exception in delivering result of invoking 'methodName': TypeError: Cannot set property 'topItem' of undefined
My server method was working perfectly with ng1. I've tried a synchronous version of http but no change in behaviour has resulted.
Perhaps someone knows of a tutorial demo of http method call using updated angular2-meteor that I can fork?
Angular doesn't recognize the value change if fields are updated by code running outside Angulars zone. Inject zone: NgZone and run the code within zone.run(...). It might also be sufficient to initialize the library within Angular to make it use the async API patched by Angular which notifies Angular about possible changes.
constructor(private zone: NgZone) {
}
onSubmit(value: oSearch): void {
console.log('you submitted value: ', value);
Meteor.call('methodName',value.type,value.year,value.idNumber, function(error,result) {
if (error) {
console.log('failed', error);
} else {
zone.run(function() {
this.oResult = result[0];
console.log('successful call', this.oResult);
});
}
});
}
See also Service events do not affect template correctly for an example.