eight04 / angular-datetime

A directive to add the behavior of datetime input on unsupported browsers.
MIT License
93 stars 28 forks source link

Module 'custom-input' is not available #41

Closed mattiLeBlanc closed 7 years ago

mattiLeBlanc commented 7 years ago

I have installed the npm angular-datetime-input package and added it to my component file `import * as angular from 'angular'; import 'angular-datetime-input'; import { FormModule } from './form/form.module';

export const ComponentsModule = angular.module( 'prospaDynamicForm.components', [ FormModule.name, 'datetime', ]); When I the use the directive in my template I get a error about a missingcustom-input` module.

Uncaught Error: [$injector:modulerr] Failed to instantiate module prospaDynamicForm due to: Error: [$injector:modulerr] Failed to instantiate module prospaDynamicForm.components due to: Error: [$injector:modulerr] Failed to instantiate module components.form due to: Error: [$injector:modulerr] Failed to instantiate module custom-input due to: Error: [$injector:nomod] Module 'custom-input' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument. http://errors.angularjs.org/1.6.1/$injector/nomod?p0=custom-input at http://localhost:3000/index.js:24443:12 at http://localhost:3000/index.js:26558:17 at ensure (http://localhost:3000/index.js:26482:38) at module (http://localhost:3000/index.js:26556:14) at http://localhost:3000/index.js:29111:22 at forEach (http://localhost:3000/index.js:24732:20)

This module is used and installed with the datetime package so I can't see why I should have to do anything with it. Anyway, when I import the package myself at the top and inject it, it doesn't resolve the issue. Any idea what is going on?

Angular 1.5 using Typescript (babel)

eight04 commented 7 years ago

I don't use TypeScript, also I don't know how does it resolve dependencies. In node.js, require("custom-input") returns an object exported by custome-input/index.js. If you need the Angular module, you have to require("custom-input/build/custom-input").

There is also a custom-input/dist/custom-input.js, which can be used in the browser.

mattiLeBlanc commented 7 years ago

Its just like es6, you use imports at the top of your module.

eight04 commented 7 years ago

Then, does import "custom-input/build/custom-input" work?

mattiLeBlanc commented 7 years ago

I did try adding import 'custom-input'; which is a valid import for the package but that didn't resolve. Also since custom-input is a dependency of your module and already included, I find it hard to believe that I have to import it myself. I am a bit puzzled.

eight04 commented 7 years ago

A "valid import" doesn't means that it will do anything to AngularJS. To make a module work with AngularJS, you have to register a module with angular.module() likes your

angular.module( 'prospaDynamicForm.components', ...

custom-input itself is not a AngularJS module, which means:

  1. It can work without Angular
  2. It does nothing to Angular

So what you are going to do is, to register a Angular module for it:

import customInput from 'custom-input';
angular
    .module('custom-input', [])
    .factory('customInput', () => customInput);

And that is what custom-input/build/custom-input.js do.

eight04 commented 7 years ago

When you say

custom-input is a dependency of your module and already included

Which may represent 2 things:

  1. custom-input is inside the dependency list in package.json

    If it is inside package.json, it just tells npm that "Please download custom-input after downloading angular-datetime-input, because angular-datetime-input needs it". Still, it does nothing to Angular.

  2. custom-input is inside the dependency list in angular-datetime-input's angular module

    What it does is to tell Angular: "I need to use custom-input, you should initiate it first for me". But unless you have registered a custom-input module, Angular will just tell you that 'custom-input' is not in its registry.

mattiLeBlanc commented 7 years ago

src: dist/datetime.js angular.module("datetime", ["custom-input"]);

aren't you adding it yourself to your own module? So why would I have to add it if I install your module and add this as a dependency? Isn't it the whole deal with modules that they are little sell sufficient shells with their own dependencies? Anyway, if it is something we need to do because your module requires it, please add it to the readme file?

Cheers