Angular CLI + Meteor — No more ejecting Webpack Configuration

This article was published on 2018-07-13 by Arda Tanrikulu @ The Guild Blog

Previously, we have to eject Webpack configuration generated by Angular CLI to modify module aliases for Meteor's special import syntax such as meteor/meteor and meteor/mongo etc.. However, this is not required after the latest release of Meteor Client Bundler. Now, MCB can create stub modules for these imports.

Quick Start

Check out the example in angular-meteor ; https://github.com/Urigo/angular-meteor/tree/master/examples/AngularCLI

How to add Meteor Client to your existing project;

  • After installation of meteor-client-bundler ; 
yarn add meteor-client-bundler --dev
// or
npm install meteor-client-bundler --save-dev
  • Add meteor-client.config.json with the necessary options; 
// meteor-client.config.json
{
  "runtime": {
    "DDP_DEFAULT_CONNECTION_URL": "http://localhost:3000",
    "ROOT_URL": "http://localhost:3000"
  },
  // This option enables the generation of stub modules
  "generateNodeModules": true
}
  • After that; don't forget to add generated meteor-client.js to angular.json ; 
{
  "scripts: ["node_modules/meteor-client.js"]
}
  • Optionally, you can add postinstall script to generate all modules in every node_modules generation; because yarn or npm may remove your generated modules from this directory. 
// package.json
{
  "scripts": {
    "postinstall": "meteor-client bundle -s <PATH-TO-METEOR-PROJECT>"
  }
}
  • Ready to use!

Thank you for reading my blog post about using Angular CLI with new MCB. I'd appreciate your claps to this post if you like it.

28

Tags:

Angularmeteor