urigo / angular-meteor-docs Goto Github PK
View Code? Open in Web Editor NEWSource for http://www.angular-meteor.com/
Source for http://www.angular-meteor.com/
Should add dependency or add 'npm install angular2' to the guide
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.
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.
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
Step 18, on both the Angular and Angular 2 tutorials seems to be blank here?
In fact, none of the subsequent steps seem ton be populated?
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
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
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;
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!)
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.
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 :(
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
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.
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,
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.
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.
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
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:
@View
annotation, and where to import it from@
before the word "Component"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
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 E404npm 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.
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
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.
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
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).
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.
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.
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:
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)`
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'.
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.
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/
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'
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');
at: **Meteor.startup(() **
and at: parties.forEach((party)
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
.
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?
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!
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.
Some of the tutorials are not displaying. For example, the angular2 Step 18 tutorial does not show.
<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('');
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.
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.
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
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.
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!
Upon running meteor in step 3 I get the following errors:
Cannot find module 'meteor/mongo'
Cannot find name 'NgZone'
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.
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!)
Error in the console on every load: Router.current(...).data
is not function at Object.Template.layout.helpers.currentApi
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.