[Tutorial updated, no need to read this any more] For people who are following Socially tutorial and met problems

angular
1

UPDATE: New tutorial has updated.

The Socially tutorial has not been updated to Angular 2 RC1 yet.

To run Angular 2 RC1 and Meteor 1.3 successfully, you need:

  1. Remove your old Angular 2 if you are using Angular 2 Beta version:
    npm uninstall --save angular2

  2. And run this to install Angular RC 1:
    npm install --save @angular/core @angular/common @angular/platform-browser @angular/platform-browser-dynamic @angular/router-deprecated

  3. When you import, use new one:

  1. Change
    import { Component } from 'angular2/core';
    to
    import { Component } from '@angular/core';
  2. Change
    import { bootstrap } from 'angular2/platform/browser';
    to
    import { bootstrap } from '@angular/platform-browser-dynamic'; // use this if you do not use meteor features
    or
    import { bootstrap } from 'angular2-meteor-auto-bootstrap'; // use this if you use meteor features
    Check here for the rest of them.
  1. Change
    *ngFor="#party of parties"
    to
    *ngFor="let party of parties"

Also, for people who are using ng2-bootstrap and met problems,
the new version has some breaking changes too:
Be sure to use new ng2-bootstrap components names. Check here for new ng2-bootstrap components names.

5 Likes
2

thank you @Hongbo_Miao ! also a step ahead!

I’ll will update it soon I promise (also if you want to help updating we can chat about how you could do that, mostly you can read about it here: https://github.com/Urigo/meteor-angular-socially/blob/master/EDIT_THIS_TUTORIAL.md )

1 Like
3

I am planning to use Meteor+Angular2+Typescript+Ionic for my mobile app (hybrid cross platform app) but I am not sure whether should I wait for Angular2 official release or not because things are changing continuously as angular2 is coming closer to its stable version and I am not sure that whether learning resources will be available or not for such combination of technologies. Also I am not sure what kind of meteor packages I will able to use with angular2.

It will really be helpful for me if somebody help me in this thing.

4

Forget one more thing, if let’s the tutorial runs well, also need update angular2-meteor-accounts-ui, but right now this package is out of date.

5

Almost all high quality packages can be used perfect with Angular2-Meteor. Some packages related with Blaze cannot be used apparently, and we have our own from Angular side. So we don’t need them too.

Also, now since Meteor 1.3 supports NPM, tooooons of packages you can use from NPM directly. (You cannot feel how happy I am!!)

For me it is already quite stable.

Right now one thing I haven’t done anything with Universal Angular 2 for server rendering.
Another thing I haven’t done anything with file upload.
So you need wait others response.

I cannot give you any suggestion for Ionic, because I am not using it. Hope others can help you.

2 Likes
6

I will go through how to edit the tutorial this weekend! : )

7

I just created this PR#96 with corrections to the tutorial.

However, I did not make changes to the snippet in the meteor-angular-socially repo.

Nonetheless, this will eliminate frustration in the short term until the snippet is fixed.

2 Likes
8

@Hongbo_Miao Thanks for answering my queries. I am going to use Meteor-angular2+Ionic for my mobile apps so I am hoping that good quality resources will be available whenever I’ll face any issues with these technologies in the future. I also want to be part of meteor and angular2 team but lets see how it goes.

9

thanks everyone for whiling to help!
But I haven’t waited and updated the tutorial…

But please contact me anyway because there are more things in the tutorial I would love help with :slight_smile:
Thanks!

1 Like
10

None of the live demo links seem to be reachable. Ex: http://socially-step22.meteor.com

1 Like
11

I found this post for updating angular 2 rc1,
http://www.towfeek.se/2016/05/upgrading-to-angular-2-rc1-from-beta-lessons-learned/

1 Like
12

Does import templateUrl from './foo.html' work in Angular 2 yet?

13

Yeah, but we use like this:

@Component({
    selector: 'foo',
    templateUrl: 'foo.component.html'
})
14

Is templateUrl relative to the folder now? in Angular1 we needed to do it from ‘/imports/…’

15

I think so. But I use like this all the time:

@Component({
  selector: 'foo',
  template: `

  `
})

Because I don’t want to have toooooo many files. ahaha

16

If you don’t like too many files, ReactJS with Meteor seems to have the least files and SLOC for some basic things. Though in ReactJS they use JSX to embed some HTML in the JavaScript code, I found it a little more annoying if the blocks are larger.

Anyway I just tried templateUrl: './foo.html' with no luck. I suspecting something may be wrong with the import logic in the typescript package.

17

My fault, check Socially tutorial Step 0.6

Something like this:

@Component({
  selector: 'app',
  templateUrl: 'client/app.html'
})
18

Yup that’s what I thought, I noted that the import functionality does not work the same way in ecmascript as it is in typescript.

Which means that the component as per your example

needs to know where the template is in relation to the whole application not to itself.

19

It seems related with Angular 2.

20

@Hongbo_Miao, I am facing issues related to route in Routing and Views chapter. It is throwing some error related to Router.registry() but I am not able to figure out that what is happening wrong here. I will request you and other people who are supporting that tutorial to verify all the steps again using angular 2 RC1.