search

Urigo / meteor-client-bundler

https://blog.meteor.com/leverage-the-power-of-meteor-with-any-client-side-framework-bfb909141008
MIT License
193 stars 41 forks source link

Use meteor-client-bundler with angular2-compilers package #3

Closed leonardoespinosa closed 7 years ago

leonardoespinosa commented 7 years ago

Hi,

Im trying to use meteor-client-bundler in my ionic project to connect to the Meteor server with angular2-compilers package. When i execute meteor-client bundle -s sourcedir

I have the following error:

Errors prevented bundling:                    
While processing files with angular2-compilers (for target web.browser):
native: main.html has wrong layout
at Error (native)
at packages/urigo:static-html-compiler/build/src/index.js:34:27
at Array.forEach (native)
at StaticHtmlCompiler.processFilesForTarget (packages/urigo:static-html-compiler/build/src/index.js:19:15)

/usr/lib/node_modules/meteor-client-bundler/node_modules/execa/index.js:268
        throw (result.error || new Error(result.stderr === '' ? result.stdout : result.stderr));
        ^
Error: null
    at Function.module.exports.sync (/usr/lib/node_modules/meteor-client-bundler/node_modules/execa/index.js:268:26)
    at Object.bundle (/usr/lib/node_modules/meteor-client-bundler/lib/bundler.js:72:9)
    at Command.<anonymous> (/usr/lib/node_modules/meteor-client-bundler/cli:37:13)
    at Command.listener (/usr/lib/node_modules/meteor-client-bundler/node_modules/commander/index.js:301:8)
    at emitTwo (events.js:106:13)
    at Command.emit (events.js:191:7)
    at Command.parseArgs (/usr/lib/node_modules/meteor-client-bundler/node_modules/commander/index.js:615:12)
    at Command.parse (/usr/lib/node_modules/meteor-client-bundler/node_modules/commander/index.js:458:21)
    at Object.<anonymous> (/usr/lib/node_modules/meteor-client-bundler/cli:45:9)
    at Module._compile (module.js:570:32)

Too, i try execute meteor-client-bundler configuring the meteor-client.config.json and package.json files in the ionic project like that:

package.json


{
  "name": "ionic-hello-world",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve",
    "meteor-client:bundle": "meteor-client bundle -s sourcedir --url http://192.168.0.6:3000 -c meteor-client.config.json"

  },
  "dependencies": {
    "@angular/common": "2.2.1",
    "@angular/compiler": "2.2.1",
    "@angular/compiler-cli": "2.2.1",
    "@angular/core": "2.2.1",
    "@angular/forms": "2.2.1",
    "@angular/http": "2.2.1",
    "@angular/platform-browser": "2.2.1",
    "@angular/platform-browser-dynamic": "2.2.1",
    "@angular/platform-server": "2.2.1",
    "@ionic/storage": "1.1.7",
    "angular2-moment": "^1.1.0",
    "babel-runtime": "^6.22.0",
    "ionic-angular": "2.0.0",
    "ionic-native": "2.4.1",
    "ionicons": "3.0.0",
    "meteor-rxjs": "^0.4.7",
    "moment": "^2.17.1",
    "rxjs": "5.0.0-beta.12",
    "sw-toolbox": "3.4.0",
    "zone.js": "0.6.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "1.0.0",
    "@types/meteor": "^1.3.31",
    "@types/underscore": "^1.7.36",
    "meteor-typings": "^1.3.1",
    "tmp": "0.0.31",
    "typescript": "2.0.9",
    "typescript-extends": "^1.0.1"
  },
  "cordovaPlugins": [
    "cordova-plugin-whitelist",
    "cordova-plugin-console",
    "cordova-plugin-statusbar",
    "cordova-plugin-device",
    "cordova-plugin-splashscreen",
    "ionic-plugin-keyboard"
  ],
  "cordovaPlatforms": [],
  "description": "qmo_mobile: An Ionic project",
  "config": {
    "ionic_webpack": "./webpack.config.js"
  }
}

meteor-client.config.json

{
  "runtime": {
    "meteorEnv": {},
    "DDP_DEFAULT_CONNECTION_URL": "http://192.168.0.6:3000"
  },
  "import": {
    "meteor-base@1.0.4": [
      "underscore",
      "meteor",
      "modules-runtime",
      "modules",
      "promise",
      "babel-runtime",
      "ecmascript-runtime",
      "ecmascript",
      "base64",
      "ejson",
      "jquery",
      "check",
      "random",
      "tracker",
      "retry",
      "id-map",
      "ordered-dict",
      "geojson-utils",
      "diff-sequence",
      "mongo-id",
      "minimongo",
      "ddp-common",
      "ddp-client",
      "ddp",
      "allow-deny",
      "reactive-var",
      "mongo"
    ],
    "angular2-compilers": []
  },
  "export": {
    "ddp": ["DDP"],
    "meteor": ["Meteor"],
    "mongo": ["Mongo"],
    "tracker": ["Tracker"],
    "underscore": ["_"]
  }
}

I execute the command npm run meteor-client:bundle (like https://angular-meteor.com/tutorials/whatsapp2/ionic/meteor-server-side ) and i have this error:

Errors prevented bundling:                    
While processing files with angular2-compilers (for target web.browser):
native: main.html has wrong layout
at Error (native)
at packages/urigo:static-html-compiler/build/src/index.js:34:27
at Array.forEach (native)
at StaticHtmlCompiler.processFilesForTarget (packages/urigo:static-html-compiler/build/src/index.js:19:15)

/usr/lib/node_modules/meteor-client-bundler/node_modules/execa/index.js:268
        throw (result.error || new Error(result.stderr === '' ? result.stdout : result.stderr));
        ^
Error: null
    at Function.module.exports.sync (/usr/lib/node_modules/meteor-client-bundler/node_modules/execa/index.js:268:26)
    at Object.bundle (/usr/lib/node_modules/meteor-client-bundler/lib/bundler.js:72:9)
    at Command.<anonymous> (/usr/lib/node_modules/meteor-client-bundler/cli:37:13)
    at Command.listener (/usr/lib/node_modules/meteor-client-bundler/node_modules/commander/index.js:301:8)
    at emitTwo (events.js:106:13)
    at Command.emit (events.js:191:7)
    at Command.parseArgs (/usr/lib/node_modules/meteor-client-bundler/node_modules/commander/index.js:615:12)
    at Command.parse (/usr/lib/node_modules/meteor-client-bundler/node_modules/commander/index.js:458:21)
    at Object.<anonymous> (/usr/lib/node_modules/meteor-client-bundler/cli:45:9)
    at Module._compile (module.js:570:32)

npm ERR! Linux 4.4.0-62-generic
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "run" "meteor-client:bundle"
npm ERR! node v6.9.5
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! ionic-hello-world@ meteor-client:bundle: `meteor-client bundle -s sourcedir --url http://192.168.0.6:3000 -c meteor-client.config.json`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the ionic-hello-world@ meteor-client:bundle script 'meteor-client bundle -s sourcedir --url http://192.168.0.6:3000 -c meteor-client.config.json'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the ionic-hello-world package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     meteor-client bundle -s sourcedir --url http://192.168.0.6:3000 -c meteor-client.config.json
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs ionic-hello-world
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls ionic-hello-world
npm ERR! There is likely additional logging output above.

The packages of my meteor project:

# 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.0.4             # Packages every Meteor app needs to have
mobile-experience@1.0.4       # Packages for a great mobile UX
mongo@1.1.14                   # 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.1                 # Meteor's client-side reactive programming library

standard-minifier-css@1.3.2   # CSS minifier run for production mode
standard-minifier-js@1.2.1    # JS minifier run for production mode
es5-shim@4.6.15                # ECMAScript 5 compatibility for older browsers.
shell-server@0.2.1            # Server-side component of the `meteor shell` command

accounts-password@1.3.3
msavin:mongol
jalik:ufs
jalik:ufs-gridfs
accounts-facebook@1.0.11
service-configuration@1.0.11
accounts-ui@1.1.9
accounts-twitter@1.1.12
accounts-google@1.0.11
mys:fonts
check@1.2.4
email@1.1.18
angular2-compilers

This is my projects information:

Meteor project: Meteor version: Meteor 1.4.2.6

Ionic project:

Your system information:

Cordova CLI: 6.5.0 
Ionic Framework Version: 2.0.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.0.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Linux 4.4
Node Version: v6.9.5
Xcode version: Not installed

I appreciate any help! Regards.

DAB0mB commented 7 years ago

I'm very confused, why would you need angular2-compilers if you're only using Meteor as your server? Anyways, like you said, it's that package which is causing you troubles because it requires you to write HTML files and all these stuff. Try using the following command:

$ meteor-client bundle --url http://192.168.0.6:3000 -c meteor-client.config.json

With the following config:

{
  "import": [
    "meteor-base@1.0.4"
  ]
}

Note: Be sure to add any client-related package to the import field above

Make sure you have meteor-client-bundler@1.1.0 installed.

leonardoespinosa commented 7 years ago

Nice! The problem is solved! I execute the command meteor-client bundle --url http://192.168.0.6:3000 -c meteor-client.config.json and modify meteor-client.config.json file. I see my meteor-client-bundler version and i have 0.1.1 version, please keep in mind the version that you mean (1.1.0) is not allowed:

npm ERR! notarget No compatible version found: meteor-client-bundler@1.1.0
npm ERR! notarget Valid install targets:
npm ERR! notarget 0.1.1, 0.1.0, 0.0.4, 0.0.3, 0.0.2, 0.0.1
npm ERR! notarget 
npm ERR! notarget This is most likely not a problem with npm itself.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.

Regards!