These are chat archives for AngularClass/NG6-starter

13th
Dec 2015
Eric McNiece
@emcniece
Dec 13 2015 19:23

Hi folks, quick question: I'm unable to get dependencies added to a component. Currently trying to add a Leaflet map to my custom "map" component (created from the gulp generator):

/* client/app/common/map/map.js */
import angular from 'angular';
import uiRouter from 'angular-ui-router';
import nemLogging from 'angular-simple-logger';
import uiLeaflet from 'ui-leaflet';
import mapComponent from './map.component';

let mapModule = angular.module('map', [
  uiRouter,
  nemLogging
  //uiLeaflet
])

.directive('map', mapComponent);

export default mapModule;

When this runs, I get hit with an error: Error: [ng:areq] Argument 'module' is not a function, got Object. This error disappears with the removal of the nemLogging module, but it also shows up when I add uiLeaflet. Am I adding these dependencies in the wrong place?

Sergey Protko
@fesor
Dec 13 2015 19:26
Module should export it’s name to do this. For example this handled for angular-ui-router and angular-ui-bootstrap modules, so just check what this modules are exports.
just set brakepoint before module seter and check variables uiLeaflet and nemLogging to be a string. It if’s not, check is it angular modules.
(or you can check this via console.log)
If uiLeaflet is something different, what can you do is just import dependency and hardcode their names
Agustin N. R. Ramirez
@agustin107
Dec 13 2015 19:28
Try with this: nemLogging.name
And uiLeaflet.name
Eric McNiece
@emcniece
Dec 13 2015 19:29
Thx! I'll try these sugestions... ty so much for the fast replies
quick note:
/**
 *  angular-simple-logger
 *
 * @version: 0.1.5
 * @author: Nicholas McCready
 * @date: Wed Oct 21 2015 12:47:46 GMT-0400 (EDT)
 * @license: MIT
 */
var angular = require('angular');

angular.module('nemLogging', []);

angular.module('nemLogging').provider('nemDebug', function (){
Sergey Protko
@fesor
Dec 13 2015 19:29
@agustin107 not sure, i think the just don’t export anything
so what should be done:
/* client/app/common/map/map.js */
import angular from 'angular';
import uiRouter from 'angular-ui-router';
import 'angular-simple-logger';
import  'ui-leaflet';
import map from './map.component';

export default angular
   .module('map', [
    uiRouter,
    ‘nemLogging’ //not sure how it named
    'ui-leaflet'
  ])
  .directive({map})
  .name;
Agustin N. R. Ramirez
@agustin107
Dec 13 2015 19:30
Ah right. I think to export that modules. Sorry
Then, you only to addt that modules with names of modules
Eric McNiece
@emcniece
Dec 13 2015 19:32
oh wow that worked
Sergey Protko
@fesor
Dec 13 2015 19:33
I don’t like this by sometime with third party stuff you just need to go that way..
Agustin N. R. Ramirez
@agustin107
Dec 13 2015 19:34
The name of module: 'angular-simple-logger' is nemLogging
Eric McNiece
@emcniece
Dec 13 2015 19:34
@agustin107 correct
Agustin N. R. Ramirez
@agustin107
Dec 13 2015 19:35
What thing @fesor ?
Eric McNiece
@emcniece
Dec 13 2015 19:35
works:
import angular from 'angular';
import uiRouter from 'angular-ui-router';
import  'angular-simple-logger';
//import uiLeaflet from 'ui-leaflet';
import mapComponent from './map.component';

let mapModule = angular.module('map', [
  uiRouter,
  'nemLogging'
  //uiLeaflet
])

.directive('map', mapComponent);

export default mapModule;
Agustin N. R. Ramirez
@agustin107
Dec 13 2015 19:35
import 'angular-simple-logger';
Try delete this line
Because bower, automatically add this module at the end of html body
Eric McNiece
@emcniece
Dec 13 2015 19:37
@agustin107 fail: Error: [$injector:nomod] Module 'nemLogging' is not available!
Agustin N. R. Ramirez
@agustin107
Dec 13 2015 19:38
I said nothing then jajaja
Sergey Protko
@fesor
Dec 13 2015 19:38
@agustin107 NG6-starter uses NPM by default, not bower.
also this is dependency of our module, not ui leaflet
(even if it should be their dependency)
Agustin N. R. Ramirez
@agustin107
Dec 13 2015 19:40
That weird
Sergey Protko
@fesor
Dec 13 2015 19:40
Not, it isn't
ui leaflet doesn’t use any module system, and to handle all dependencies correclty we should specify it by our own hands….
Agustin N. R. Ramirez
@agustin107
Dec 13 2015 19:41
But, are you using package of Node ?
Eric McNiece
@emcniece
Dec 13 2015 19:41
was installed with npm i ui-leaflet --save
Agustin N. R. Ramirez
@agustin107
Dec 13 2015 19:42
Because, on My project, i use package of bower
The, bower automatically include on my html body
Sergey Protko
@fesor
Dec 13 2015 19:42
@agustin107 and in your case bower already handles all the dependencies
Agustin N. R. Ramirez
@agustin107
Dec 13 2015 19:42
Sorry for my english
Sergey Protko
@fesor
Dec 13 2015 19:42
for my english too)
Agustin N. R. Ramirez
@agustin107
Dec 13 2015 19:42
Jajajaj
Eric McNiece
@emcniece
Dec 13 2015 19:42
lol you guys are fine
Agustin N. R. Ramirez
@agustin107
Dec 13 2015 19:42
:)
Eric McNiece
@emcniece
Dec 13 2015 19:43
thank you so much! really really appreciate the help
Sergey Protko
@fesor
Dec 13 2015 19:43
@agustin107 the main difference is that bower is package manager, not module manager
Agustin N. R. Ramirez
@agustin107
Dec 13 2015 19:43
U r welcome
Yes! It's correcta
Thanks @fesor
Sergey Protko
@fesor
Dec 13 2015 19:44
in NPM world you should always require dependencies manually, dependencies in package.json are just packages with modules.
in case of ui leaflet there is no such thing as require ‘angular-simple logger so we should handle it by ourself
Agustin N. R. Ramirez
@agustin107
Dec 13 2015 19:45
I expressed wrong
Thinking in the optimization, which is better?
When building..
Sergey Protko
@fesor
Dec 13 2015 19:47
it’s depends)
webpack has pretty powerfull chunking system, but it requires to read a lot of docs to make all good. And also it has very light overhead.
Personaly I just inline module loader into html and then webpack handles all for me
I have two chunks of vendors bundles (angular and all things that doesn’t changes frequently), frequently changing dependencies (some small stuff) and my application bundle.
Agustin N. R. Ramirez
@agustin107
Dec 13 2015 19:51
That point of View and techniques, it's good..
Sergey Protko
@fesor
Dec 13 2015 19:51
I switched to webpack since it alot easier to handle dependencies and bundle only what is used. For example, I use es6/7 features and I can bundle form core-js only polyfils that I need
Agustin N. R. Ramirez
@agustin107
Dec 13 2015 19:51
Thanks for sharing
Sergey Protko
@fesor
Dec 13 2015 19:52
import ‘core-js/modules/module.array.find’;

[1, 2, 3, 4].find(item => item === 2) // 2
Agustin N. R. Ramirez
@agustin107
Dec 13 2015 19:56
Perfect, i understand..
Thanks again..
Sergey Protko
@fesor
Dec 13 2015 19:56
))