Introduction
I decided to switch the framework from Oracle Jet to a combination of Angular2 and Meteor. The reason is I just prefer using Typescript and besides that Meteor has some nice functionalities like, offline support or Websockets, that work out of the box.
The first thing I am about to do is reimplement the Google Login button
The first thing I am about to do is reimplement the Google Login button
Create app in Google
Check out this blog to find out how to create a Google App. The two important things you need are the secret and the clientId.
Create a angular2-meteor app
Read this tutorial, if you want to find out more about how to create your first app.
For creating your first app, you can clone this template using git
git clone https://github.com/bsliran/angular2-meteor-base socially
Install needed packages for Google Login
Switch to the root folder of your meteor app and enter the following commands$ meteor npm install
$ meteor add service-configuration
$ meteor add accounts-google
$ meteor add accounts-ui
$ meteor npm install --save angular2-meteor-accounts-ui
$ meteor npm install --save angular2-blaze-template
Add the two modules to your app
Open the file client/imports/app/app.module.ts and make the following adjustment@NgModule({
...
// Modules
imports: [
...
AccountsModule,
Angular2BlazeTemplateModule,
...
],
...
})
Add the Google secret and clientId to your app
Create the file server/service-config.js and add the following lines of codeMeteor.startup(() => {
ServiceConfiguration.configurations.remove({
service: "google"
});
ServiceConfiguration.configurations.insert({
service: "google",
clientId: '....apps.googleusercontent.com',
loginStyle: "popup",
secret: '...'
});
});
Add the Google login to your frontend
Open an existing HTML file and add the following line of code anywhere you want to<blaze-template name="loginButtons"></blaze-template>
Typical scenarios needed while coding
Check if user is logged inTypescript
@InjectUser('user')
export class AppComponent {
user: Meteor.User;
constructor() {
if (Meteor.userId() != null) {
alert('user logged in ;)');
}
}
}
HTML<h1 *ngIf="user">Hello Angular2-Meteor!</h1>
Interesting blog on how to protect URL paths
https://blog.thoughtram.io/angular/2016/07/18/guards-in-angular-2.html#videos
Conclusion
My first experience with Meteor is, that Meteor is a framework, which is quite easy to handle compared to other frameworks.