urigo / angular-meteor-docs Goto Github PK

On http://www.angular-meteor.com/tutorials/socially/angular2/bootstrapping
after installing typings ("npm install typings -g") the following commands fail, because typings is not installed into a directory that is mentioned in the PATH variable.

As a workaround, I included

C:\Users\<USERNAME>\AppData\Local\.meteor\packages\meteor-tool\1.3.2_4\mt-os.windows.x86_32\dev_bundle\bin

on Windows and

/home/<USERNAME>/.meteor/packages/meteor-tool/.1.3.2_4.10vjklo++os.linux.x86_64+web.browser+web.cordova/mt-os.linux.x86_64/dev_bundle/bin

on Linux to the PATH variable.

Within the Angular1 tutorials, Step 0 - Bootstrapping, the tutorial explains us how Meteor.isClient is used:
There are a few ways to tell Meteor to run code only on the client/server/mobile side, let's start with the simplest way - Meteor.isClient variable.

But then we do not need it in the main.js file we create. (Supposably because we put the main.js file within the client folder of our structure, where it will not be executed on the server anyway).

Also a bit earlier in the text, the instruction is to create main.js in the project-root. But in 0.9 the file is, as mentioned above, placed within the client folder.

I think this ambiguity happened after updating the tutorial to meteor 1.3. Am I right?

I would update the doc, but english is not my native language and I don't think I would get it right the first time because I am very new to meteor.

Cheers Matthias

I know you guys are updating the tutorial, but just wanted to let you know that none of the live demos hosted on meteor.com work either.

Should add dependency or add 'npm install angular2' to the guide

I'm new to Angular 2 and Meteor, but to me it looks like the #f="ngForm" (submit)="addParty(f.value)" could be simply (submit)="addParty()", since we are going to access the this.partiesForm in the event handler anyway.
I mean:

  addParty(party) {
    if (this.partiesForm.valid) {
      Parties.insert({
        name: party.name,
        description: party.description,
        location: party.location
      });

      (<Control>this.partiesForm.controls['name']).updateValue('');
      (<Control>this.partiesForm.controls['description']).updateValue('');
      (<Control>this.partiesForm.controls['location']).updateValue('');
    }
  }

could be replaced with:

  addParty() {
    if (this.partiesForm.valid) {
      Parties.insert(this.partiesForm.value);

      (<Control>this.partiesForm.controls['name']).updateValue('');
      (<Control>this.partiesForm.controls['description']).updateValue('');
      (<Control>this.partiesForm.controls['location']).updateValue('');
    }
  }

I would also suggest to change "TypeScript doesn't know that controls properties are of Control type" to "TypeScript thinks that controls properties are of a more general AbstractControl type which requires us to downcast to Control type", as the original version made me needlessly me worried about the abilities of TypeScript.

Hi All & @Urigo ,

I had used this doc to create whatsup clone http://www.angular-meteor.com/tutorials/whatsapp/ionic/methods
entire code is same as given in this tutorials..

after completing all steps i had got this error can someone help me what is the issue behind this ??

Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []
http://errors.angularjs.org/1.4.3/$rootScope/infdig?p0=10&p1=%5B%5D(anonymous function) @ ionic.bundle.js:8895Scope.$digest @ ionic.bundle.js:24548$$Core.$$throttledDigest @ processor.js:61(anonymous function) @ processor.js:61Tracker.Computation._compute @ meteor-client-side.bundle.min.js:2Tracker.Computation @ meteor-client-side.bundle.min.js:2Tracker.autorun @ meteor-client-side.bundle.min.js:2$$Core.autorun @ processor.js:61(anonymous function) @ processor.js:61invoke @ ionic.bundle.js:13277(anonymous function) @ ionic.bundle.js:13099forEach @ ionic.bundle.js:9163createInjector @ ionic.bundle.js:13099doBootstrap @ ionic.bundle.js:10457bootstrap @ ionic.bundle.js:10478angularInit @ ionic.bundle.js:10372(anonymous function) @ ionic.bundle.js:37186trigger @ ionic.bundle.js:11823eventHandler @ ionic.bundle.js:12098
ionic.bundle.js:21157 Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []
http://errors.angularjs.org/1.4.3/$rootScope/infdig?p0=10&p1=%5B%5D
at ionic.bundle.js:8895
at Scope.$digest (ionic.bundle.js:24548)
at Scope.$apply (ionic.bundle.js:24778)
at done (ionic.bundle.js:19191)
at completeRequest (ionic.bundle.js:19363)
at XMLHttpRequest.requestLoaded (ionic.bundle.js:19304)(anonymous function) @ ionic.bundle.js:21157(anonymous function) @ ionic.bundle.js:17936Scope.$apply @ ionic.bundle.js:24780done @ ionic.bundle.js:19191completeRequest @ ionic.bundle.js:19363requestLoaded @ ionic.bundle.js:19304
ionic.bundle.js:8895 Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []
http://errors.angularjs.org/1.4.3/$rootScope/infdig?p0=10&p1=%5B%5D(anonymous function) @ ionic.bundle.js:8895Scope.$digest @ ionic.bundle.js:24548Scope.$apply @ ionic.bundle.js:24778done @ ionic.bundle.js:19191completeRequest @ ionic.bundle.js:19363requestLoaded @ ionic.bundle.js:19304
ionic.bundle.js:21157 Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []
http://errors.angularjs.org/1.4.3/$rootScope/infdig?p0=10&p1=%5B%5D
at ionic.bundle.js:8895
at Scope.$digest (ionic.bundle.js:24548)
at Scope.$apply (ionic.bundle.js:24778)
at done (ionic.bundle.js:19191)
at completeRequest (ionic.bundle.js:19363)
at XMLHttpRequest.requestLoaded (ionic.bundle.js:19304)(anonymous function) @ ionic.bundle.js:21157(anonymous function) @ ionic.bundle.js:17936Scope.$apply @ ionic.bundle.js:24780done @ ionic.bundle.js:19191completeRequest @ ionic.bundle.js:19363requestLoaded @ ionic.bundle.js:19304
ionic.bundle.js:8895 Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []
http://errors.angularjs.org/1.4.3/$rootScope/infdig?p0=10&p1=%5B%5D(anonymous function) @ ionic.bundle.js:8895Scope.$digest @ ionic.bundle.js:24548Scope.$apply @ ionic.bundle.js:24778done @ ionic.bundle.js:19191completeRequest @ ionic.bundle.js:19363requestLoaded @ ionic.bundle.js:19304
ionic.bundle.js:21157 Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []
http://errors.angularjs.org/1.4.3/$rootScope/infdig?p0=10&p1=%5B%5D
at ionic.bundle.js:8895
at Scope.$digest (ionic.bundle.js:24548)
at Scope.$apply (ionic.bundle.js:24778)
at done (ionic.bundle.js:19191)
at completeRequest (ionic.bundle.js:19363)
at XMLHttpRequest.requestLoaded (ionic.bundle.js:19304)(anonymous function) @ ionic.bundle.js:21157(anonymous function) @ ionic.bundle.js:17936Scope.$apply @ ionic.bundle.js:24780done @ ionic.bundle.js:19191completeRequest @ ionic.bundle.js:19363requestLoaded @ ionic.bundle.js:19304
ionic.bundle.js:8895 Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []
http://errors.angularjs.org/1.4.3/$rootScope/infdig?p0=10&p1=%5B%5D(anonymous function) @ ionic.bundle.js:8895Scope.$digest @ ionic.bundle.js:24548Scope.$apply @ ionic.bundle.js:24778done @ ionic.bundle.js:19191completeRequest @ ionic.bundle.js:19363requestLoaded @ ionic.bundle.js:19304
ionic.bundle.js:21157 Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []
http://errors.angularjs.org/1.4.3/$rootScope/infdig?p0=10&p1=%5B%5D
at ionic.bundle.js:8895
at Scope.$digest (ionic.bundle.js:24548)
at Scope.$apply (ionic.bundle.js:24778)
at done (ionic.bundle.js:19191)
at completeRequest (ionic.bundle.js:19363)
at XMLHttpRequest.requestLoaded (ionic.bundle.js:19304)(anonymous function) @ ionic.bundle.js:21157(anonymous function) @ ionic.bundle.js:17936Scope.$apply @ ionic.bundle.js:24780done @ ionic.bundle.js:19191completeRequest @ ionic.bundle.js:19363requestLoaded @ ionic.bundle.js:19304
ionic.bundle.js:8895 Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []
http://errors.angularjs.org/1.4.3/$rootScope/infdig?p0=10&p1=%5B%5D(anonymous function) @ ionic.bundle.js:8895Scope.$digest @ ionic.bundle.js:24548Scope.$apply @ ionic.bundle.js:24778done @ ionic.bundle.js:19191completeRequest @ ionic.bundle.js:19363requestLoaded @ ionic.bundle.js:19304
ionic.bundle.js:8895 Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []
http://errors.angularjs.org/1.4.3/$rootScope/infdig?p0=10&p1=%5B%5D(anonymous function) @ ionic.bundle.js:8895Scope.$digest @ ionic.bundle.js:24548(anonymous function) @ ionic.bundle.js:24712completeOutstandingRequest @ ionic.bundle.js:14221(anonymous function) @ ionic.bundle.js:14493
ionic.bundle.js:21157 Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []
http://errors.angularjs.org/1.4.3/$rootScope/infdig?p0=10&p1=%5B%5D
at ionic.bundle.js:8895
at Scope.$digest (ionic.bundle.js:24548)
at Scope.$apply (ionic.bundle.js:24778)
at ionic.bundle.js:26545
at completeOutstandingRequest (ionic.bundle.js:14221)
at ionic.bundle.js:14493(anonymous function) @ ionic.bundle.js:21157(anonymous function) @ ionic.bundle.js:17936Scope.$apply @ ionic.bundle.js:24780(anonymous function) @ ionic.bundle.js:26545completeOutstandingRequest @ ionic.bundle.js:14221(anonymous function) @ ionic.bundle.js:14493
ionic.bundle.js:8895 Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []
http://errors.angularjs.org/1.4.3/$rootScope/infdig?p0=10&p1=%5B%5D(anonymous function) @ ionic.bundle.js:8895Scope.$digest @ ionic.bundle.js:24548Scope.$apply @ ionic.bundle.js:24778(anonymous function) @ ionic.bundle.js:26545completeOutstandingRequest @ ionic.bundle.js:14221(anonymous function) @ ionic.bundle.js:14493
ionic.bundle.js:21157 Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []
http://errors.angularjs.org/1.4.3/$rootScope/infdig?p0=10&p1=%5B%5D
at ionic.bundle.js:8895
at Scope.$digest (ionic.bundle.js:24548)
at Scope.$apply (ionic.bundle.js:24778)
at done (ionic.bundle.js:19191)
at completeRequest (ionic.bundle.js:19363)
at XMLHttpRequest.requestLoaded (ionic.bundle.js:19304)(anonymous function) @ ionic.bundle.js:21157(anonymous function) @ ionic.bundle.js:17936Scope.$apply @ ionic.bundle.js:24780done @ ionic.bundle.js:19191completeRequest @ ionic.bundle.js:19363requestLoaded @ ionic.bundle.js:19304
ionic.bundle.js:8895 Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []
http://errors.angularjs.org/1.4.3/$rootScope/infdig?p0=10&p1=%5B%5D(anonymous function) @ ionic.bundle.js:8895Scope.$digest @ ionic.bundle.js:24548Scope.$apply @ ionic.bundle.js:24778done @ ionic.bundle.js:19191completeRequest @ ionic.bundle.js:19363requestLoaded @ ionic.bundle.js:19304
ionic.bundle.js:21157 Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []
http://errors.angularjs.org/1.4.3/$rootScope/infdig?p0=10&p1=%5B%5D
at ionic.bundle.js:8895
at Scope.$digest (ionic.bundle.js:24548)
at Scope.$apply (ionic.bundle.js:24778)
at done (ionic.bundle.js:19191)
at completeRequest (ionic.bundle.js:19363)
at XMLHttpRequest.requestLoaded (ionic.bundle.js:19304)(anonymous function) @ ionic.bundle.js:21157(anonymous function) @ ionic.bundle.js:17936Scope.$apply @ ionic.bundle.js:24780done @ ionic.bundle.js:19191completeRequest @ ionic.bundle.js:19363requestLoaded @ ionic.bundle.js:19304
ionic.bundle.js:8895 Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []
http://errors.angularjs.org/1.4.3/$rootScope/infdig?p0=10&p1=%5B%5D(anonymous function) @ ionic.bundle.js:8895Scope.$digest @ ionic.bundle.js:24548Scope.$apply @ ionic.bundle.js:24778done @ ionic.bundle.js:19191completeRequest @ ionic.bundle.js:19363requestLoaded @ ionic.bundle.js:19304
ionic.bundle.js:21157 Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []
http://errors.angularjs.org/1.4.3/$rootScope/infdig?p0=10&p1=%5B%5D
at ionic.bundle.js:8895
at Scope.$digest (ionic.bundle.js:24548)
at Scope.$apply (ionic.bundle.js:24778)
at done (ionic.bundle.js:19191)
at completeRequest (ionic.bundle.js:19363)
at XMLHttpRequest.requestLoaded (ionic.bundle.js:19304)(anonymous function) @ ionic.bundle.js:21157(anonymous function) @ ionic.bundle.js:17936Scope.$apply @ ionic.bundle.js:24780done @ ionic.bundle.js:19191completeRequest @ ionic.bundle.js:19363requestLoaded @ ionic.bundle.js:19304
ionic.bundle.js:8895 Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []
http://errors.angularjs.org/1.4.3/$rootScope/infdig?p0=10&p1=%5B%5D(anonymous function) @ ionic.bundle.js:8895Scope.$digest @ ionic.bundle.js:24548Scope.$apply @ ionic.bundle.js:24778done @ ionic.bundle.js:19191completeRequest @ ionic.bundle.js:19363requestLoaded @ ionic.bundle.js:19304

Thanks,
Lokesh

In Step 3.7 of http://www.angular-meteor.com/tutorials/socially/angular2/3-way-data-binding

parties: Mongo.Cursor;

should be changed to

parties: Mongo.Cursor<Object>;

in order to remove the warning

client/app.ts (18, 15): Generic type 'Cursor<T>' requires 1 type argument(s).

In Step 4.9 of http://www.angular-meteor.com/tutorials/socially/angular2/adding-removing-objects-and-angular-event-handling

  (this.partiesForm.controls['name']).updateValue('');
  (this.partiesForm.controls['description']).updateValue('');
  (this.partiesForm.controls['location']).updateValue('');

should be changed to

  (<Control> this.partiesForm.controls['name']).updateValue('');
  (<Control> this.partiesForm.controls['description']).updateValue('');
  (<Control> this.partiesForm.controls['location']).updateValue('');

in order to remove the warnings

client/imports/parties-form/parties-form.ts (41, 44): Property 'updateValue' does not exist on type 'AbstractControl'.

In section 3.4 the top of app.ts has the lines:

import 'reflect-metadata';
import 'zone.js/dist/zone';

but later, these lines disappear in the section which starts

Our app.ts file should now look like this:

The names of files mentioned in chapter Type Declaration Files are not the ones I can see in typings.
After carefully following previous Steps, using latest typings and angular2-meteor, I can see the following content in the typings folder:

./index.d.ts
./globals
./globals/es6-shim
./globals/es6-shim/index.d.ts
./globals/es6-shim/typings.json
./globals/meteor
./globals/meteor/index.d.ts
./globals/meteor/typings.json
./modules
./modules/es6-promise
./modules/es6-promise/index.d.ts
./modules/es6-promise/typings.json

while the chapter mentions things like meteor.d.ts, angular2.d.ts and angular2-meteor.d.ts, none of which I can find here.
I'm almost sure that globals/meteor/index.d.ts plays the same role as meteor.d.ts did, but the angular2.d.ts and angular2-meteor.d.ts are probably hidden somewhere in the ./node_modules, I guess. Probably ./node_modules/angular2-meteor/typings/main.d.ts is one of them?

I'm not proposing changes to this chapter as a pull request, because, honestly, I have no clue how it really works :(

For step 9.5 Update PartiesForm component, please change from

'public': [false] to public: [false]

'public': party.public to public: party.public

to keep the code consistent with the rest of code and simple.

Right now is

name: ['', Validators.required],
description: [''],
location: ['', Validators.required],
'public': [false]

name: party.name,
description: party.description,
location: party.location,
'public': party.public,

In step 7.3 Define parties collection with Party type, http://www.angular-meteor.com/tutorials/socially/angular2/folder-structure

Right now is
export var Parties = new Mongo.Collection('parties');

it should be
export var Parties = new Mongo.Collection<Party>('parties');

The tutorial suggests to use @InjectUser() without params, but:

$ cat ./node_modules/angular2-meteor-accounts-ui/build/annotations.d.ts
export declare function InjectUser(propName: string): (cls: any) => any;
export declare const RequireUser: any;

which I believe is the reason for the warning:

client/imports/parties-form/parties-form.ts (13, 2): Supplied parameters do not match any signature of call target.

I think, that either the d.ts file should mark the parameter as optional, or the string "user" should be passed to InjectUser annotation in the tutorial code.

Step 18, on both the Angular and Angular 2 tutorials seems to be blank here?

Update:

In fact, none of the subsequent steps seem ton be populated?

As barbatus suggests, move original post to here.

Right now, there is not too much info about unit-testing for angular-meteor project, let alone angular2-meteor project.

If possible, please add a unit testing chapter in the tutorial! It will help a lot.

Thanks

On the tutorial site
http://www.angular-meteor.com/tutorials/socially/angular2/bootstrapping
Between steps 0.1 and 0.3 it is mentioned that one should initialize the project with the command

$ npm init

However this does not work for me.
I am on Windows 8.1, where Meteor was previously not installed. This newly installed version of Meteor is 1.3.2.4 and I get as response, that npm can not be found.

As a workaround I used

$ meteor npm init

I would like to suggest to add a note to the tutorial of how to use npm on windows 8.1.

In 17.9 Update the add new party form layout,

<input id="description" class="form-control" ype="text" ngControl="description" placeholder="Description">

should be

<input id="description" class="form-control" type="text" ngControl="description" placeholder="Description">

ype -> type

In step 5,2 of http://www.angular-meteor.com/tutorials/socially/angular2/routing-and-multiple-views

parties: Mongo.Cursor;

should be changed to

parties: Mongo.Cursor<Object>;

in order to remove the warning

client/imports/parties-list/parties-list.ts (13, 13): Generic type 'Cursor<T>' requires 1 type argument(s).

<Control>does not show up in the diff text. Though it does show up if you go look at the code. It seems that anywhere <> is used in the code the diff text is incorrect. This is similar to the other issue I reported.

(<Control>this.partiesForm.controls['name']).updateValue('');
(<Control>this.partiesForm.controls['description']).updateValue('');
(<Control>this.partiesForm.controls['location']).updateValue('');

So from what I'm observing, the methods were used for the functionality to add a new party don't work anymore.

I was unable to get it to work myself, hitting the 'add' button would do nothing and the 'addParty' function wouldn't even get hit. I then, just to confirm it wasn't on my end, Tried doing it with the exact contents of the provided Zip Files and had the same result.

It appears that some change broke that method of calling the addParty function. I'd imagine if the livedemo was rebuilt the same result would be noticed.

When following the instructions in step 5, if you go to a direct URL and load the page it's blank.

This is probably because of the fact that the server doesn't recognize the routes.

Following this answer on SO fixes it, and is probably the simplest answer: http://stackoverflow.com/a/35052147/154392

Should this be in the tutorial? Did I miss something?

On this page, meteor fails to run at step 0.8:

`=> Started proxy.
=> Started MongoDB.
Compiling main app HTML file: client/index.html
Compiling HTML template: client/app.html
=> Errors prevented startup:

While processing files with barbatus:typescript (for target
web.browser):
packages/barbatus:typescript-compiler/typescript-compiler.js:186:13:
Format of the tsconfig is invalid: SyntaxError: Unexpected token ?
at TypeScriptCompiler.parseConfig
(packages/barbatus:typescript-compiler/typescript-compiler.js:186:13)
at TypeScriptCompiler.processConfig
(packages/barbatus:typescript-compiler/typescript-compiler.js:161:30)
at TypeScriptCompiler.processFilesForTarget
(packages/barbatus:typescript-compiler/typescript-compiler.js:22:10)`

As barbatus suggests, move original post to here.

Right now the Step 7 - Folder structure for actual file structure does not describe too much, only says "server" and "client" from meteor side in general.

But if the project it big, what would the folder structure look like from angular2-meteor side?

For client part:

client/
----- styles/
---------- main.css
----- lib/
---------- calendar.pipe.ts
---------- truncate.pipe.ts
----- services/
---------- alert.service.ts
----- components/
---------- home/
--------------- home.component.ts
--------------- home.component.html
--------------- home.component.css
--------------- home.service.ts
---------- about/
--------------- about.component.ts
--------------- about.component.html
--------------- about.component.css
--------------- about.service.ts
----- app.ts

or

client/
----- styles/
---------- main.css
----- lib/
---------- calendar.pipe.ts
---------- truncate.pipe.ts
----- services/
---------- alert.service.ts
----- home/
---------- components/
--------------- home.component.ts
--------------- home.component.html
--------------- home.component.css
--------------- home.service.ts
----- about/
---------- components/
--------------- about.component.ts
--------------- about.component.html
--------------- about.component.css
--------------- about.service.ts
----- app.ts

or something else.
Also, right now socially does not have services, if it has, where it should be.

For other parts:

server/
----- main.ts
collections/
----- methods.ts
public/
----- img/

Some sources:
https://github.com/mgechev/angular2-seed
https://scotch.io/tutorials/angularjs-best-practices-directory-structure
http://meteortips.com/first-meteor-tutorial/structure/

Some of the tutorials are not displaying. For example, the angular2 Step 18 tutorial does not show.

After updating angular2-meteor from 0.5.2 to 0.5.3
import { MeteorComponent } from 'angular2-meteor/meteor_component';
needs change to
import { MeteorComponent } from 'angular2-meteor';

Refer to here

For step 5.4 Clean up app.ts file, right now is

import 'reflect-metadata';
import 'zone.js/dist/zone';
import {Component} from 'angular2/core';
import {bootstrap} from 'angular2-meteor-auto-bootstrap';
import {ROUTER_PROVIDERS, ROUTER_DIRECTIVES, RouteConfig} from 'angular2/router';

@Component({
  selector: 'app',
  directives: [ROUTER_DIRECTIVES]
})
class Socially {}

bootstrap(Socially, [ROUTER_PROVIDERS]);

However, templateUrl: 'client/app.html', should not be deleted in this "clean" step. Otherwise, it will show the error:

EXCEPTION: Component 'Socially' must have either 'template' or 'templateUrl' set.

The correct one should be like below.

client/app.ts

import 'reflect-metadata';
import 'zone.js/dist/zone';
import {Component} from 'angular2/core';
import {bootstrap} from 'angular2-meteor-auto-bootstrap';
import {ROUTER_PROVIDERS, ROUTER_DIRECTIVES, RouteConfig} from 'angular2/router';

@Component({
  selector: 'app',
  templateUrl: 'client/app.html',
  directives: [ROUTER_DIRECTIVES]
})
class Socially {}

bootstrap(Socially, [ROUTER_PROVIDERS]);

And delete all content in the client/app.html file in this step.

After running these three

meteor add angular2-compilers
meteor npm install --save angular2-meteor
meteor remove blaze-html-templates

app.ts

import 'reflect-metadata';
import 'zone.js/dist/zone';
import {Component} from 'angular2/core';
import {bootstrap} from 'angular2/bootstrap';

@Component({
  selector: 'app',
  templateUrl: 'client/app.html'
})
class Socially { }
bootstrap(Socially);

app.html

Hello World!

index.html

<body>
<app></app>
</body>

I got error in my terminal;

Unable to resolve some modules:
"crypto" in /socially/node_modules/reflect-metadata/Reflect.js (web.browser)
Consider running: meteor npm install --save meteor-node-stubs

However, the app can run well.
But if I run meteor npm install --save meteor-node-stubs, the error will be gone.

Upon running meteor in step 3 I get the following errors:
Cannot find module 'meteor/mongo'
Cannot find name 'NgZone'

Towards the end of section 3, I was getting the following errors:

 Cannot find namespace 'Mongo' 

I had to do the following to get them to go away:

$ typings install meteor --ambient

PROBLEM 1: In the bootstrap section it should warn you about the fact that lots of warning messages will ensue out of meteor/npm as a result of:

$ meteor npm install --save angular2-meteor
npm WARN peerDependencies The peer dependency [email protected] included from angular2-meteor will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency 
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm WARN peerDependencies The peer dependency es6-shim@^0.35.0 included from angular2 will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency 
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm WARN peerDependencies The peer dependency [email protected] included from angular2 will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency 
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm WARN peerDependencies The peer dependency [email protected] included from angular2 will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency 
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm WARN peerDependencies The peer dependency zone.js@^0.6.6 included from angular2 will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency 
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
[email protected] node_modules/zone.js

[email protected] node_modules/reflect-metadata

[email protected] node_modules/es6-shim

[email protected] node_modules/rxjs

[email protected] node_modules/angular2

[email protected] node_modules/angular2-meteor
├── [email protected] ([email protected], [email protected], [email protected])
├── [email protected] ([email protected])
└── [email protected] ([email protected], [email protected], [email protected], [email protected])

If this isn't what is supposed to happen - am I going off the beaten path? I have started from a blank directory until this point.

PROBLEM 2: A bit further down in section 0.9 the text needs to be fixed as the import is no longer from 'angular2/platform/browser'

First we're importing the dependencies we needed from angular2/core and angular2/platform/browser.
This is not a folder and files in your directory, but a reference to System.js modules aliased as
angular2/core and angular2/platform/browser. They are some of the Angular 2 main modules that are
available as part of the urigo:angular2-meteor package.

PROBLEM 3: In the section 'Typescript Typings"

This section seems to be out of date - in section 0.4 we created 'tsconfig.json' but didn't add a files section. Also we don't get the console messages described in this section any more.

It also says that "on first run, it creates a 'typings' folder - which it doesn't.

Moreover, the line "import {bootstrap} from 'angular2/platform/browser';" is just plain wrong.

The code example presented in "Routing Permissions" section :

import {CanActivate, ComponentInstruction} from '@angular/router-deprecated';

function checkPermissions(instruction: ComponentInstruction) {
  var partyId = instruction.params['partyId'];
  var party = Parties.findOne(partyId);
  return (party && party.owner == Meteor.userId());
}

Component({
  selector: 'party-details'
})
@View({
    templateUrl: 'client/imports/party-details/party-details.html',
    directives: [RouterLink]
})
@CanActivate(checkPermissions)
export class PartyDetails {
  ...
}

seems strange:

• it's not clear from previous parts of the tutorial what is the @View annotation, and where to import it from
• from my previous investigation it seems problematic that there is no slash before "client" in the templateUrl
• it seems strange that there is no @ before the word "Component"
• the PartyDetails should inherit from MeteorComponent at this point of tutorial

Angular2-Meteor Step 17 - CSS, LESS and Bootstrap link is dead.

@only side bar link is dead. Because side bar is

CSS, LESS and Bootstrap, http://www.angular-meteor.com/tutorials/socially/angular2/css-less-and-bootstrap

The correct one should be

CSS, SASS and Bootstrap, http://www.angular-meteor.com/tutorials/socially/angular2/css-sass-and-bootstrap

Following https://www.angular-meteor.com/tutorials/socially/angular2/bootstrapping the result of the content of "typings" folder is different to https://github.com/Urigo/meteor-angular2.0-socially/tree/master/typings
No browser folder, no browser.d.ts
Have a index.d.ts instead of main.d.ts
Have a globe and a modules folder instead of a main folder.

When run meteor, compile complains a lot about "Cannot find module" like this

client/imports/parties-form/parties-form.ts (2, 27): Cannot find module '@angular/core'.
client/imports/parties-form/parties-form.ts (3, 64): Cannot find module '@angular/common'.
client/imports/parties-form/parties-form.ts (6, 31): Cannot find module 'angular2-meteor'.
client/imports/parties-form/parties-form.ts (7, 28): Cannot find module 'angular2-meteor-accounts-ui'.
client/imports/parties-list/parties-list.ts (1, 29): Cannot find module '@angular/core'.
client/imports/parties-list/parties-list.ts (5, 29): Cannot find module '@angular/router-deprecated'.
client/imports/parties-list/parties-list.ts (6, 30): Cannot find module 'angular2-meteor-accounts-ui'.
client/imports/parties-list/parties-list.ts (7, 33): Cannot find module 'angular2-meteor'.

Can we update the tutorial to put the most up to date commands? Basically whatever command @Urigo did for Urigo/meteor-angular2.0-socially@54506ac

Thank you very much!

Clicking on Next after the Google Maps step into CSS-LESS-Bootstrap doesn't load the page but instead simply replaces the title. I noticed from the commit messages that the tutorial was updated. Perhaps related?

4.4 always results in an error saying Cannot find module import { PartiesForm } from './imports/parties-form/parties-form';.

I've followed the guide exactly up to this point. My folders are correctly spelled (triple checked). I've tried reloading a zip from step 3 and restarting 4, but that doesn't load either. I run into errors with client/app.ts (17, 14): Cannot find namespace 'Mongo'.
collections/parties.ts (1, 26): Cannot find name 'Mongo'.
collections/parties.ts (1, 26): Cannot find name 'Mongo'..

Not sure if I'm doing something wrong here. Also the Step 4 zip doesn't include the imports folder at all. It completely skips it, but is not listed in the Step 4 guide/instructions.

At the end of 0 bootstraping step in socially Angular2 tutorial i got errors like:

=> Started MongoDB.
client/app.ts (3, 25): Cannot find module 'angular2/core'.
client/app.ts (4, 25): Cannot find module 'angular2/platform/browser'.

In webstorm ide i got hints, that the imports will not work because the folders an files were missing.

import {Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';

I saw, that in package.json was a diffrence between mine and the repos here.

mine:

  "dependencies": {
    "@angular/core": "^2.0.0-rc.1",
...

repos:

"dependencies": {
"angular2": "2.0.0-rc.1",

https://github.com/Urigo/meteor-angular2.0-socially/blob/master/package.json#L7

I solved this by installing @angular/platform-browser-dynamic with the following command (according angular2 quickstart tutorial):

meteor npm install @angular/platform-browser-dynamic --save

afterwartds I had to update the imports with:

import {Component} from '@angular/core';
import {bootstrap} from '@angular/platform-browser-dynamic';

What is the reason for the diffrence?

Best Regards
Simon

When running meteor npm install --save angular2-meteor-accounts-ui following the tutorial, the terminal shows:

npm ERR! Darwin 15.4.0
npm ERR! argv "node" "/Users/hongbo-miao/.meteor/packages/meteor-tool/.1.3.0_3.1kequoz++os.osx.x86_64+web.browser+web.cordova/mt-os.osx.x86_64/dev_bundle/bin/npm" "install" "--save" "angular2-meteor-accounts-ui"
npm ERR! node v0.10.43
npm ERR! npm v2.14.22
npm ERR! code E404

npm ERR! 404 Registry returned 404 for GET on https://registry.npmjs.org/angular2-meteor-accounts-ui
npm ERR! 404
npm ERR! 404 'angular2-meteor-accounts-ui' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404 It was specified as a dependency of 'socially'
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

Hi, I stucked at the step 1.14 of whatsapp meteor angular tutorial. None of messages apperead. I spend a couple of minutes to diff my project with tutorial's project on github(https://github.com/DAB0mB/angular-meteor-whatsapp). Looks like missing is mention about adding line controller: 'ChatsCtrl as chats' in client/scripts/lib/routes.js.
Hope I helped somebody with same issue.

Error in the console on every load: Router.current(...).data is not function at Object.Template.layout.helpers.currentApi

The section about 'TypeScript Configuration and IDEs' talks about tsconfig.json containing only the 'files' property, but in the Step 0, I was instructed to put :

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "module": "commonjs",
    "target": "es5",
    "isolatedModules": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "removeComments": false,
    "noImplicitAny": false,
    "sourceMap": true
  },
  "filesGlob": [
    "client/**/*.ts",
    "server/**/*.ts",
    "typings/**/*.d.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

in it. Something is wrong here.

Site: http://www.angular-meteor.com/tutorials/socially/angular2/3-way-data-binding
In the Section "Blaze-like Binding to Angular", Code block 3.7

The Program breaks, because of

parties: Mongo.Cursor<Object>;

Meteor won't start the Server after this with error message

Cannot find namespace 'Mongo'.

https://gist.github.com/radonthetyrant/a1ebec141a9f4e93f7d708e73429ba90.js

In the document client/parties-form/parties-form.ts of source code:

(<Control>this.partiesForm.controls['name']).updateValue('');
(<Control>this.partiesForm.controls['description']).updateValue('');
(<Control>this.partiesForm.controls['location']).updateValue('');

These are correct.

However, in the tutorial, Step 4.9 Add addParty method into the component, it shows:

(this.partiesForm.controls['name']).updateValue('');
(this.partiesForm.controls['description']).updateValue('');
(this.partiesForm.controls['location']).updateValue('');

<Control> is missing.

In Step 17 - CSS, LESS and Bootstrap, meteor npm install bootstrap4-webpack-package --save

The terminal shows:

npm ERR! 404 Registry returned 404 for GET on https://registry.npmjs.org/bootstrap4-webpack-package
npm ERR! 404
npm ERR! 404 'bootstrap4-webpack-package' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)

http://www.angular-meteor.com/tutorials/socially/angular2/css-less-and-bootstrap is a dead link.

Try to go here: http://www.angular-meteor.com/tutorials/socially/angular2/google-maps and click 17. CSS, LESS and Bootstrap or Next, the content showing is actually not the content from 17. CSS, LESS and Bootstrap.

In Step 12 - Search, sort, pagination and reactive vars, when run
meteor npm install angular2-pagination --save

The terminal shows:

npm ERR! 404 Registry returned 404 for GET on https://registry.npmjs.org/angular2-pagination
npm ERR! 404
npm ERR! 404 'angular2-pagination' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)

at: **Meteor.startup(() **
and at: parties.forEach((party)

In 16.1 Extend party location with lat and lng coordinates, right now is:

  name: string;
  description?: string;
  location: string;
  location: {
    name: string;
    lat?: number;
    lng?: number;
  };
  invited?: Array<string>;
  rsvps?: Array<RSVP>;
}

need remove duplicated location: string;

Hello -

Looks like the typings has been updated and the api has changed with 1.0. On step 0, the angular2-meteor tutorial calls for:

$ npm install typings -g
$ typings init
$ typings install es6-promise --save
$ typings install es6-shim --ambient --save
$ typings install registry:env/meteor --ambient

It looks like --ambient has changed to --global and installing from DefinitelyTyped requires that you explicitly to call it out as the source via ~dt. Here's what I ended up going with:

$ npm install typings -g
$ typings init
$ typings install es6-promise --save
$ typings install dt~es6-shim --global --save
$ typings install registry:env/meteor --global

Side note: Is there a reason we don't save the meteor typings to typings.json?

If these changes look good, let me know and I'll create a PR.

Thank you!

Hi,
I'm just digging through the docs. Would it be a benefit for the user using

@Component({
    moduleId: module.id,
    selector: 'some-selector'
    (...)
})

It would save some writing in most of the cases. But currently I get a compile error in the console:
Cannot find name 'module'

the line
let type = args[0];
is not working for me. it is taking the first character ie., y,m and n from yes,maybe or no

Yes - {{party | rsvp:'yes'}}
Maybe - {{party | rsvp:'maybe'}}
No - {{party | rsvp:'no'}}

I replaced the line with
let type = args;
and it works fine.

There is a paragraph in the "Routing Permissions" section:

This can be easily done again with help of "angular2-meteor-accounts-ui" package that has a simple RequireUser annotation. Just place it above PartyDetails and you will see if a user is not logged-in to the system, that user won't be able to access the route.

which seems very odd, because I already have added the RequireUser annotation, as I was kindly asked in the "RequireUser" section.
What's even more puzzling to me, is this does not sound like a perfect solution, which was promissed in a previous paragraph:

An ideal way to implement this would be to restrict redirecting to the party details page when someone clicks on a party link. In this case, we don't need to check access manually in the party details component itself because the route request is denied early on.

Based on the paragraph above, I was expecting a change to be applied somewhere near the RouteConfig in app.ts, and not in the PartyDetails.