Having trouble locating the module recommendations on my Angular 1.6 app while using Browserify

My app is not able to find suggestions.module even though it loads am-suggestions-lib.js. I am using angular 1.6 and browserify, but I can't figure out what I'm doing wrong. Here are all the relevant files:

View the tree here

suggestion.module.js

  import {suggestionsComponent} from './suggestions.component';
    import {suggestionComponent} from './suggestion/suggestion.component';
    import {suggestionActionComponent} from './suggestion/suggestion-action/suggestion-action.component';
    import {suggestionViewerComponent} from './suggestion/suggestion-viewer/suggestion-viewer.component';

    export const suggestions =
      angular.module('suggestions')
        .component('suggestions', suggestionsComponent)
        .component('suggestionComponent', suggestionComponent)
        .component('suggestionActionComponent', suggestionActionComponent)
        .component('suggestionViewerComponent', suggestionViewerComponent);

root.module.js

import {suggestions} from './suggestions/suggestions.module';
import {commons} from './commons/commons.module';
import {rootComponent} from './root.component';
import {templates} from './root.templates';

export const app =
  angular
    .module('app', ['templates', 'suggestions', 'commons'])
    .component('rootComponent', rootComponent);

Error message in chrome dev tools when running the app 

am-suggestions-lib.js:116 Uncaught Error: [$injector:nomod] Module 'suggestions' 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.6/$injector/nomod?p0=suggestions
    at am-suggestions-lib.js:116
    at am-suggestions-lib.js:2297
    at ensure (am-suggestions-lib.js:2218)
    at Object.module (am-suggestions-lib.js:2295)
    at Object.9../suggestion/suggestion-action/suggestion-action.component (suggestions.module.js:7)
    at s (_prelude.js:1)
    at _prelude.js:1
    at Object.3../commons/commons.module (root.module.js:1)
    at s (_prelude.js:1)
    at e (_prelude.js:1)

am-suggestions-lib.js

  (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
    'use strict';

    Object.defineProperty(exports, "__esModule", {
      value: true
    });
    var commons = exports.commons = angular.module('commons');

    },{}],2:[function(require,module,exports){
    'use strict';

    Object.defineProperty(exports, "__esModule", {
      value: true
    });
    var rootComponent = exports.rootComponent = {
      templateUrl: 'root.html'
    };

    },{}],3:[function(require,module,exports){
    'use strict';

    Object.defineProperty(exports, "__esModule", {
      value: true
    });
    exports.app = undefined;

    var _suggestions = require('./suggestions/suggestions.module');

    var _commons = require('./commons/commons.module');

    var _root = require('./root.component');

    var _root2 = require('./root.templates');

    var app = exports.app = angular.module('app', ['templates', 'suggestions', 'commons']).component('rootComponent', _root.rootComponent);

    },{"./commons/commons.module":1,"./root.component":2,"./root.templates":4,"./suggestions/suggestions.module":9}],4:[function(require,module,exports){
    "use strict";

    Object.defineProperty(exports, "__esModule", {
      value: true
    });
    var templates = exports.templates = angular.module("root.templates", []).run(["$templateCache", function ($templateCache) {
      $templateCache.put('suggestions/suggestions.html', '<h1>soy root<suggestion></suggestion></h1>');
      $templateCache.put('suggestions/suggestion/suggestion.html', '<h1>soy suggestion<suggestion-viewer></suggestion-viewer><suggestion-action></suggestion-action></h1>');
      $templateCache.put('suggestions/suggestion/suggestion-action/suggestion-action.html', '<div id="suggestion-action"><h1>soy suggestion-action</h1></div>');
      $templateCache.put('suggestions/suggestion/suggestion-viewer/suggestion-viewer.html', '<div id="suggestion-viewer"><h1> Hola soy Suggestions Viewer</h1></div>');
    }]).name;

    },{}],5:[function(require,module,exports){
    'use strict';

    Object.defineProperty(exports, "__esModule", {
      value: true
    });
    var suggestionActionComponent = exports.suggestionActionComponent = {
      templateUrl: 'suggestions/suggestion/suggestion-action/suggestion-action.html'
    };

    },{}],6:[function(require,module,exports){
    'use strict';

    Object.defineProperty(exports, "__esModule", {
      value: true
    });
    var suggestionViewerComponent = exports.suggestionViewerComponent = {
      templateUrl: 'suggestions/suggestion/suggestion-viewer/suggestion-viewer.html'
    };

    },{}],7:[function(require,module,exports){
    'use strict';

    Object.defineProperty(exports, "__esModule", {
      value: true
    });
    var suggestionComponent = exports.suggestionComponent = {
      templateUrl: './suggestions/suggestion/suggestion.html'
    };

    },{}],8:[function(require,module,exports){
    'use strict';

    Object.defineProperty(exports, "__esModule", {
      value: true
    });
    var suggestionsComponent = exports.suggestionsComponent = {
      bindings: {},
      templateUrl: 'suggestions/suggestions.html'
    };

    },{}],9:[function(require,module,exports){
    'use strict';

    Object.defineProperty(exports, "__esModule", {
      value: true
    });
    exports.suggestions = undefined;

    var _suggestions = require('./suggestions.component');

    var _suggestion = require('./suggestion/suggestion.component');

    var _suggestionAction = require('./suggestion/suggestion-action/suggestion-action.component');

    var _suggestionViewer = require('./suggestion/suggestion-viewer/suggestion-viewer.component');

    var suggestions = exports.suggestions = angular.module('suggestions').component('suggestions', _suggestions.suggestionsComponent).component('suggestionComponent', _suggestion.suggestionComponent).component('suggestionActionComponent', _suggestionAction.suggestionActionComponent).component('suggestionViewerComponent', _suggestionViewer.suggestionViewerComponent);

    },{"./suggestion/suggestion-action/suggestion-action.component":5,"./suggestion/suggestion-viewer/suggestion-viewer.component":6,"./suggestion/suggestion.component":7,"./suggestions.component":8}]},{},[3])


    //# sourceMappingURL=am-suggestions.js.map
angularjsbrowserify

Answer №1

One issue I encountered was forgetting to include [] in the module declaration. After fixing this, my jade code still wasn't displaying correctly on the view.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to create 'WebSocket' instance: The provided URL, '[object Object]', is not valid

I attempted to establish a connection to the websocket in React router in order to retrieve data. However, I encountered an error message Uncaught SyntaxError: Failed to construct 'WebSocket': The URL '[object Object]' is invalid. in th ...

reactjsnpmwebpackbrowserifyreact-router

Having difficulty removing new or existing lines on StackBlitz

I attempted to experiment with React on StackBlitz, but I encountered a problem where I couldn't delete any lines of code. It seems that while I can add new lines of code, deleting them is not an option. Even when logging in with GitHub, the issue per ...

javascriptangularjsreactjstypescriptstackblitz

When attempting to call a bundle file using browserify from React, an unexpected character '�' Syntax error is thrown: react_app_testing/src/HashBundle.js: Unexpected character '�' (1:0

Hey there, I'm currently struggling with an unexpected unicode character issue. Let me provide some context: I've created a simple class called HashFunction.js that hashes a string: var crypto = require('crypto') module.exports=class H ...

javascriptreactjsnpmbrowserify

Tips for loading a partial view page in a specific element using Angular JS after clicking a button

I'm facing an issue with my AngularJS partial view page not loading after a button click. I've set up the initial rendering page, but when we click the button, the partial view page doesn't render properly because the angular modules are not ...

javascriptreactjsangularjsasp.net-mvcpartial-views

Is there a way to insert rows and columns into the table headers using React Material UI?

I am new to working with material UI and I am having trouble figuring out how to add columns in the table header. The image below shows what I am trying to achieve - under "Economics", there should be 3 columns, each of which will then have two more column ...

reactjsangularjshtml-tablematerial-uimaterial-design

To generate an npm package, you must convert several ES6 files into multiple ES5 files

I have developed various React components. Within my project folder, I have a collection of ES6 files including: components/A.js components/Button.js My goal is to import these components into my future projects in the following way: import A from &ap ...

reactjsnpmwebpackecmascript-6browserify

Is it possible to eliminate process.env.NODE_ENV using browserify/envify?

Currently, I am utilizing ReactJS through NPM and Browserify, but I am encountering difficulties while attempting to build it in production mode as mentioned in the readme. The code I have for setting up browserify is: var browserify = require('brows ...

javascriptnode.jsreactjsbrowserify