app is not defined after bundling

Question

I am running browserify on my code, it is as follows:

import './app';

//——————————————————————————————————————————————————//
// Components
//——————————————————————————————————————————————————//

import './components/_ntToggleClass';

app is simply

const app = angular.module('app', []);

while files in components are, well, components. But they are using forementioned app:

  app.directive('ntToggleClass', () => {
    ...    }

When I put everything in one file by hand, all worked. But after I used browserify on this, I am getting

Uncaught ReferenceError: app is not defined

When I look inside the code, both var app and the directive are there.

Answer 1

I've slapped together a quick sample on github. This will give you a working repository that runs browserify.

I've removed my previous comments, as I think the repo should answer your questions.

edit: I think I just now got your question, you were trying to create a global variable app to just be used in each other file? This is impossible when using browserify, any variable that isn't required in your file will be returning undefined.

When using browserify, just require whatever you need.