search

Urigo / angular-meteor

Angular and Meteor - The perfect stack
https://www.angular-meteor.com/
MIT License
2.36k stars 621 forks source link

Broken tutorial - WhatsApp Clone with Ionic 2 and Meteor CLI help #1882

Closed doron-mil closed 6 years ago

doron-mil commented 6 years ago

Tried countless times to follow all sort of tutorials and installing all the boilerplate projects I found. It seem to be a problem with new 1.6 version and the integration with Angular....

https://forums.meteor.com/t/broken-tutorial-whatsapp-clone-with-ionic-2-and-meteor-cli/42087

impcyber commented 6 years ago

Can you try this: meteor remove angular2-compilers meteor update --release 1.6.0.1 meteor add angular-compilers https://github.com/Urigo/angular-meteor/tree/master/atmosphere-packages/angular-compilers

pbureau commented 6 years ago

If you get this working, could you please share your project config (.meteor/packages, package.json, and tsconfig.json). I have been working on a similar issue for some hours now, but without success.

I will also post my solution if I manage to make it compile and run properly...

impcyber commented 6 years ago

Sure This is from my project w\o ionic: .meteor/packages

# Meteor packages used by this project, one per line.
# Check this file (and the other files in this directory) into your repository.
#
# 'meteor add' and 'meteor remove' will edit this file for you,
# but you can also edit it by hand.

meteor-base@1.2.0             # Packages every Meteor app needs to have
mobile-experience@1.0.5       # Packages for a great mobile UX
mongo@1.3.1                   # The database Meteor supports right now
reactive-var@1.0.11            # Reactive variable for tracker
tracker@1.1.3                 # Meteor's client-side reactive programming library

standard-minifier-css@1.3.5   # CSS minifier run for production mode
standard-minifier-js@2.2.0    # JS minifier run for production mode
es5-shim@4.6.15                # ECMAScript 5 compatibility for older browsers
ecmascript@0.9.0              # Enable ECMAScript2015+ syntax in app code
shell-server@0.3.0            # Server-side component of the `meteor shell` command
angular-compilers
accounts-password
alanning:roles
reywood:publish-composite

package.json

{
 "name": "***",
 "private": true,
 "scripts": {
   "start": "meteor run"
 },
 "dependencies": {
   "@angular/animations": "^5.2.5",
   "@angular/cdk": "^5.2.1",
   "@angular/common": "^5.2.5",
   "@angular/compiler": "^5.2.5",
   "@angular/core": "^5.2.5",
   "@angular/forms": "^5.2.5",
   "@angular/http": "^5.2.5",
   "@angular/material": "^5.2.1",
   "@angular/platform-browser": "^5.2.5",
   "@angular/platform-browser-dynamic": "^5.2.5",
   "@angular/router": "^5.2.5",
   "@babel/runtime": "^7.0.0-beta.40",
   "@covalent/core": "^1.0.0",
   "@covalent/dynamic-forms": "^1.0.0",
   "babel-runtime": "^6.26.0",
   "bcrypt": "^1.0.3",
   "hammerjs": "^2.0.8",
   "meteor-node-stubs": "^0.3.2",
   "meteor-rxjs": "^0.4.8",
   "rxjs": "^5.5.0",
   "zone.js": "^0.8.20"
 },
 "devDependencies": {
   "@angular/compiler-cli": "^5.2.5",
   "@types/hammerjs": "^2.0.35",
   "@types/meteor": "^1.4.13",
   "@types/meteor-publish-composite": "0.0.33",
   "@types/meteor-roles": "^1.2.29",
   "@types/node": "^9.4.6",
   "typescript": "2.6.2"
 }
}

tsconfig.json

{
 "compilerOptions": {
   "allowSyntheticDefaultImports": true,
   "baseUrl": ".",
   "declaration": false,
   "emitDecoratorMetadata": true,
   "importHelpers": true,
   "experimentalDecorators": true,
   "lib": [
     "dom",
     "es2015"
   ],
   "module": "commonjs",
   "moduleResolution": "node",
   "sourceMap": true,
   "target": "es2015",
   "skipLibCheck": true,
   "stripInternal": true,
   "noImplicitAny": false
 },
 "include": [
   "imports/**/*.ts",
   "client/**/*.ts",
   "server/**/*.ts"
 ],
 "exclude": [
   "node_modules"
 ],
 "types": [
   "typings.d",
   "@types/node",
   "@types/meteor",
   "@types/meteor-roles",
   "@types/meteor-publish-composite",
   "@types/hammerjs"
 ],
 "compileOnSave": false,
 "atom": {
   "rewriteTsconfig": false
 }
}

And i've build an example Ionic project https://github.com/Urigo/Ionic2-MeteorCLI-WhatsApp It compiles, but not work in browser, needs configuration for webpack (maybe, i think so ¯_(ツ)_/¯)

.meteor/packages

# Meteor packages used by this project, one per line.
# Check this file (and the other files in this directory) into your repository.
#
# 'meteor add' and 'meteor remove' will edit this file for you,
# but you can also edit it by hand.

meteor-base@1.2.0             # Packages every Meteor app needs to have
mongo@1.3.1                   # The database Meteor supports right now
reactive-var@1.0.11            # Reactive variable for tracker
jquery@1.11.10                  # Helpful client-side library
tracker@1.1.3                 # Meteor's client-side reactive programming library

standard-minifier-css@1.3.5   # CSS minifier run for production mode
standard-minifier-js@2.2.0    # JS minifier run for production mode
es5-shim@4.6.15                # ECMAScript 5 compatibility for older browsers.
ecmascript@0.9.0              # Enable ECMAScript2015+ syntax in app code
shell-server@0.3.0            # Server-side component of the `meteor shell` command

mys:fonts
mobile-status-bar@1.0.14
launch-screen@1.1.1
check@1.2.5
npm-bcrypt@0.9.3
accounts-base@1.4.0
mys:accounts-phone
reywood:publish-composite
jalik:ufs
jalik:ufs-gridfs
angular-compilers
dynamic-import

package.json

{
  "name": "Ionic2-MeteorCLI-WhatsApp",
  "private": true,
  "scripts": {
    "start": "meteor run --settings private/settings.json"
  },
  "dependencies": {
    "@agm/core": "^1.0.0-beta.2",
    "@angular/animations": "^5.2.5",
    "@angular/common": "^5.2.5",
    "@angular/compiler": "^5.2.5",
    "@angular/compiler-cli": "^5.2.5",
    "@angular/core": "^5.2.5",
    "@angular/forms": "^5.2.5",
    "@angular/http": "^5.2.5",
    "@angular/platform-browser": "^5.2.5",
    "@angular/platform-browser-dynamic": "^5.2.5",
    "@angular/platform-server": "^5.2.5",
    "@ionic/storage": "^2.1.3",
    "angular2-google-maps": "^0.17.0",
    "angular2-moment": "^1.1.0",
    "babel-runtime": "6.18.0",
    "bcrypt": "^1.0.3",
    "ionic-angular": "^3.9.2",
    "ionic-native": "^2.9.0",
    "ionicons": "3.0.0",
    "meteor-node-stubs": "~0.2.0",
    "meteor-rxjs": "^0.4.7",
    "moment": "^2.17.1",
    "reflect-metadata": "^0.1.9",
    "rxjs": "^5.5.6",
    "sharp": "^0.19.0",
    "zone.js": "^0.8.20"
  },
  "devDependencies": {
    "@types/meteor": "^1.3.31",
    "@types/meteor-accounts-phone": "0.0.5",
    "@types/meteor-collection-hooks": "^0.8.0",
    "@types/meteor-publish-composite": "0.0.32",
    "@types/underscore": "^1.7.36",
    "meteor-typings": "^1.3.1",
    "typescript": "^2.6.2"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "baseUrl": ".",
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
      "dom",
      "es2015"
    ],
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "target": "es5",
    "skipLibCheck": true,
    "stripInternal": true,
    "noImplicitAny": false,
    "types": [
      "meteor-typings",
      "@types/underscore",
      "@types/meteor-accounts-phone",
      "@types/meteor-publish-composite",
      "@types/meteor-collection-hooks"
    ]
  },
  "include": [
    "client/**/*.ts",
    "server/**/*.ts",
    "imports/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ],
  "compileOnSave": false,
  "atom": {
    "rewriteTsconfig": false
  }
}
impcyber commented 6 years ago

If you are using angular-compiles (not angular2-compilers) you need rewrite styles import from {}node_modules to ../../node_modules And in Ionic project with updated packages you cannot use old version of angular2-google-maps, it need to be replaced with '@agm/core'

https://github.com/SebastianM/angular2-google-maps

pbureau commented 6 years ago

@impcyber thx for the reply, but could you clarify 😕

You mean style import in component templates? At the moment we use statements like:

import template from "./app.component.html";
import style from "./app.component.scss";

@Component({
  selector: "app",
  template,
  styles: [ style ]
})

Is this what you meant?

impcyber commented 6 years ago

@pbureau Unfortunately, if I correctly understood the angular-compiler are oriented to work like AngularCLI and the import templates\styles like modules there does not work, only templateUrl and styleUrls work or inline declartion available.

Here is an example: https://github.com/Urigo/angular-meteor-base Here is an Urigo comment about: Goldstehttps://forums.meteor.com/t/meteor-1-5-dynamic-imports-with-angular-2-typescript/35232/13

pbureau commented 6 years ago

@impcyber the imports for templates\styles seems to be my problem 😕

The point I don't understand is this mechanism was working with angular2-compilers. Could it be broken by the switch to angular-compilers ?

In the thread you pointed, Urigo is not saying anything about the import mechanism isn't he?

impcyber commented 6 years ago

@pbureau Yes, there is nothing about import mechanism. But looking at modern examples, no matter what you use MeteorCLI or angular-cli, they use templateUrl and styleUrls both. And i was a bit discouraged, that repo angular2-compilers forward to angular-compilers: https://github.com/Urigo/angular2-meteor/

But, as i understood this is a new rule for angular compilers: https://github.com/Urigo/angular-meteor/issues/1599#issue-228558817

But templateUrl and styleUrls is the recomended by angular team way to import html/css.

pbureau commented 6 years ago

@impcyber thx, I think you are right, this is the new way to declare templates and styles, and it changed with the angular-compilers switch.

As far as I understand the import template from "./app.component.html"; support was provided by the angular2-meteor package but it is deprecated, and it does not work with the new compiler anyways.

impcyber commented 6 years ago

@pbureau Yes, looks so And as i mentioned about styles from node_modules, i was wrong, you can use @import directly from package e.g. @import '@covalent/core/common/platform.scss';

doron-mil commented 6 years ago

Tried again a lot of combinations. The only one I managed to work good is:

angular-meteor/examples/MeteorCLI/bare/ in this rapository

pbureau commented 6 years ago

I finally managed to get my app working upgrading to angular-compilers from angular2-compilers, and with Meteor 1.6.0.1 The switch to Meteor 1.6.1 seems impossible at the moment (not with my current knowledge of the stack anyways). The critical part for me was to understand that if you just add angular-compilers to your project, Meteor will automatically install the version 0.2.9_2, which is broken

You need to make sure you are using the following versions (in .meteor./versions):

angular-compilers@0.2.8_1 angular-html-compiler@0.2.8 angular-scss-compiler@0.2.8 angular-typescript-compiler@0.2.8_1

impcyber commented 6 years ago

I'm using with 1.6.0.1:

angular-compilers@0.2.9_2
angular-html-compiler@0.2.9
angular-scss-compiler@0.2.9
angular-typescript-compiler@0.2.9_5

And all works fine. How do you determine that 0.2.9_2 is broken?

pbureau commented 6 years ago

@impcyber well when I use the same versions as you are, my project does not compile at all, I get an endless stream of errors when the app is building. I will give it another try... can you share your complete .meteor/versions file?

impcyber commented 6 years ago

@pbureau paste the first error message here full versions list:

accounts-base@1.4.2
accounts-password@1.5.0
alanning:roles@1.2.16
allow-deny@1.1.0
angular-compilers@0.2.9_2
angular-html-compiler@0.2.9
angular-scss-compiler@0.2.9
angular-typescript-compiler@0.2.9_5
autoupdate@1.3.12
babel-compiler@6.24.7
babel-runtime@1.1.1
base64@1.0.10
binary-heap@1.0.10
boilerplate-generator@1.3.1
callback-hook@1.0.10
check@1.2.5
ddp@1.4.0
ddp-client@2.2.0
ddp-common@1.3.0
ddp-rate-limiter@1.0.7
ddp-server@2.1.1
diff-sequence@1.0.7
dynamic-import@0.2.1
ecmascript@0.9.0
ecmascript-runtime@0.5.0
ecmascript-runtime-client@0.5.0
ecmascript-runtime-server@0.5.0
ejson@1.1.0
email@1.2.3
geojson-utils@1.0.10
hot-code-push@1.0.4
http@1.3.0
id-map@1.0.9
launch-screen@1.1.1
livedata@1.0.18
localstorage@1.2.0
logging@1.1.19
matb33:collection-hooks@0.8.4
meteor@1.8.2
meteor-base@1.2.0
minifier-css@1.2.16
minifier-js@2.2.2
minimongo@1.4.3
mobile-experience@1.0.5
mobile-status-bar@1.0.14
modules@0.11.4
modules-runtime@0.9.2
mongo@1.3.1
mongo-dev-server@1.1.0
mongo-id@1.0.6
npm-bcrypt@0.9.3
npm-mongo@2.2.34
ordered-dict@1.0.9
promise@0.10.2
random@1.0.10
rate-limit@1.0.8
reactive-var@1.0.11
reload@1.1.11
retry@1.0.9
reywood:publish-composite@1.5.2
routepolicy@1.0.12
service-configuration@1.0.11
sha@1.0.9
shell-server@0.3.1
srp@1.0.10
standard-minifier-css@1.3.5
standard-minifier-js@2.2.3
tmeasday:check-npm-versions@0.3.2
tracker@1.1.3
underscore@1.0.10
url@1.1.0
webapp@1.4.0
webapp-hashing@1.0.9
pbureau commented 6 years ago

@impcyber here is the first errors I get when compiling with version 0.2.9_2:

client/imports/app/kyo-buyer/aisles/grid/aisle/aisle.component.ts (17, 1): Argument of type '{ selector: string; templateUrl: string; host: { 'class': string; }; styleUrl: string; }' is not assignable to parameter of type 'Component'. Object literal may only specify known properties, and 'styleUrl' does not exist in type 'Component'. client/imports/app/kimayo-admin-panel/admin-section-buyer-info/admin-buyer-aisles/admin-buyer-aisles.component.ts (13, 1): Argument of type '{ selector: string; templateUrl: string; styleUrl: string; }' is not assignable to parameter of type 'Component'. Object literal may only specify known properties, and 'styleUrl' does not exist in type 'Component'. client/imports/app/kimayo-admin-panel/admin-section-buyer-info/admin-dialog-aisle/admin-dialog-aisle.component.ts (11, 1): Argument of type '{ selector: string; templateUrl: string; styleUrl: string; }' is not assignable to parameter of type 'Component'. Object literal may only specify known properties, and 'styleUrl' does not exist in type 'Component'.

But actually I just realized that despite the errors, my app is actually starting and seems to be running properly, which is even more confusing to me :confused:

One strange thing in your versions file, it is missing the es5-shim@4.6.15 module, is it something you have removed on purpose?

impcyber commented 6 years ago

@pbureau as you can see here https://angular.io/api/core/Component there is not 'styleUrl: string' argument, there is a 'styleUrls: string[]' and it must be an array of strings.

I don't have es5-shim, because i don't need compatibility with legacy browsers

pbureau commented 6 years ago

@impcyber damn it... you are right :astonished: I have been too quick when I changed the styles imports (I will never understand why js is so permissive, this should have broken my code). Actually the new config is a lot less permissive (which is good), but now it is like the compiler will not recognize the meteor typings and I get a bunch of:

server/accounts/auth.ts (2, 26): Cannot find module 'meteor/accounts-base'.
server/accounts/auth.ts (48, 5): Cannot find name 'process'.
server/accounts/emails.ts (2, 26): Cannot find module 'meteor/accounts-base'.
server/accounts/emails.ts (4, 24): Cannot find module 'meteor/base64'.
server/accounts/emails.ts (19, 61): Cannot find name 'Assets'.
server/accounts/emails.ts (20, 65): Cannot find name 'Assets'.
server/accounts/users.ts (36, 21): Cannot find name 'Mongo'.
server/accounts/users.ts (58, 12): Cannot find name 'Accounts'.
server/fake-data/fake-products.ts (53, 10): Cannot find name 'Accounts'.
server/imports/server-main/main.ts (13, 10): Cannot find name 'Accounts'.
server/imports/server-main/main.ts (26, 7): Cannot find name 'Accounts'
impcyber commented 6 years ago

@pbureau did you installed @types/* for packages and include it to tsconfig.json in compilerOptions.types: [ ... ]? for example:

"compilerOptions": {
...
    "types": [
      "@types/meteor"
    ]
...
}
pbureau commented 6 years ago

@impcyber in my package.json I have:

    "@angular/compiler-cli": "5.1.3",
    "@types/chai": "4.0.8",
    "@types/meteor": "1.4.12",
    "@types/mocha": "2.2.44",
    "@types/sinon": "4.0.0",
    "@types/node": "^8.9.4",

In tsconfig.json:

 "types": [
    "typings.d",
    "@types/node",
    "@types/meteor", 
    "@types/hammerjs"
  ],

But actually, it is like none of the @types modules are loaded by the compiler. I also get a:

both/collections/images.collection.ts (9, 22): Cannot find module 'path'

But path is declared in@types/node

impcyber commented 6 years ago

@pbureau add to package.json:

@types/node
@types/hammerjs

then run npm install

if not help, try remove node_modules and run npm install

pbureau commented 6 years ago

@impcyber sry I edited my comment, I actually have @types/node installed :-(

impcyber commented 6 years ago

@pbureau Anyway, update @types/node to version ^9.4.6and @types/meteor to version ^1.4.13 And if not help, remove node_modules and run npm install

pbureau commented 6 years ago

@impcyber thx for the tip, upgrading is not solving the issue. It must be something with my imports, or the declaration file, because: import { Meteor } from 'meteor/meteor'; will work, but

import { Accounts } from 'meteor/accounts-base'; will generate the error...

impcyber commented 6 years ago

@pbureau the account-base typing is built-in meteor https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/meteor/accounts.d.ts#L131 it's too strange, maybe something wrong with imports.

for test, try to add temporary this code in typings.d.ts (will this change the error message?):

declare module "meteor/accounts-base" {
    module Accounts {}
}
pbureau commented 6 years ago

@impcyber I tried to add the declaration in typings.d.ts, and it does not change the error. It is almost as if the account-base package was completely ignored. I checked the node_modules/@types/meteor/accounts.d.ts is present and correct.

impcyber commented 6 years ago

@pbureau did you restart your IDE and run meteor again after this changes?

pbureau commented 6 years ago

regarding this issue and #1884, i confirm angular-compilers is working with:

angular-compilers@0.2.9_2
angular-html-compiler@0.2.9
angular-scss-compiler@0.2.9
angular-typescript-compiler@0.2.9_5

I had to rebuild a project using the angular-meteor example bare/ project as a starting point, I believe my problems were related with the directory structure we have been using so far, even though the exact cause of the problem is still unclear to me.

@impcyber thx for the support, it seems there is not much activity going on at the moment....

mfechner commented 6 years ago

I had exactly the same problems but got it working. Maybe it helps someone else: https://gitlab.fechner.net/mfechner/angularcli-meteor