Application not defined after bundling

Question

I launch the browser in my code, it looks like this:

import './app'; //——————————————————————————————————————————————————// // Components //——————————————————————————————————————————————————// import './components/_ntToggleClass'; 

the application is just

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

and the files in components are, well, components. But they use the forementioned app :

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

When I put everything in one file manually, everything worked. But after I used the browser for this, I get

Uncaught ReferenceError: application not defined

When I look at the code, there is var app and a directive.

Answer 1

My friend came using ;-)

I use Babel (I thought it was obvious since I used import not require ) for my coding (more precisely, Babelify with es2015 ), so since I have import , I need to export too.

The solution is very simple, all I had to do was put

 export default app; 

at the end of my app.js file and then import it with

 import app from '../app'; 

into my directives / components, etc.

Answer 2

I hit a quick sample on github . This will give you a working repository that launches the browser.

I deleted my previous comments as I think the repo should answer your questions.

edit: I think I just got your question, did you try to create a global app variable to just be used in every other file? This is not possible when using a browser, any variable that is not required in your file will return undefined .

When using the browser function, what you need is simply required.

Answer 3

I think this is the definition of ordering.

const app = angular.module('app', []); This part should be on top of the bottom:

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