angular 1.6 es6 es5 browserify "Uncaught Error: [$injector:nomod] Module 'appSuite' is not available!"

Question

I am trying to move an angular 1.6 application from ES5 to ES6. The index html contains the name of the app: ng-app="appSuite" and we normally reference the individual js files with script tags.

I've now changed the html to refer to the bundle file which should have all the sources in because I've added imports to the app.module.js ..

We use grunt and I've added babel and browserify steps. The top of the app.module.js now has:

"use strict";
export default appSuite;             <<< Is this correct ?
import './access.controller.js';
import './apiClient.service.js';

---

After Babel it becomes :

"use strict";

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

require('./access.controller.js');

---

Then the browserify changes it to:

(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";

(function () {
"use strict";

angular.module("appSuite").controller("accessController", accessController);

---

Unfortunately when I run it now gives:

Uncaught Error: [$injector:nomod] Module 'appSuite' is not available!**

Anyone have an idea what I'm missing here or have a way to debug it ? Thanks in advance and Happy Holidays !

Answer 1

You need to have empty dependencies loaded with your module ,

const appSuite= angular.module('appSuite', [])
export default appSuite