How to modularize angularjs application?

I know the title is little misleading and Angularjs also support modular programming.

i will give you an example

const LoginController = function($scope){
  //Some Logic Here
}
const login = angular.module("Login", ["ui.router"]);
login.config(function($stateProvider, $urlRouterProvider){
    var states = [
        {
        name: 'login',
        url: '/login',
        template: '<h1>Login Template</h1>',
        controller : LoginController
        }
       ];
        states.forEach((state) => $stateProvider.state(state));
        $urlRouterProvider.otherwise('/');
});



 const app= angular.module("App", ["Login"]);

These are my two modules (In real i have around 8 modules), each modules have hundred of lines of code. So write the whole module in a single file is not possible, i don't like to create a file for each module. I'm looking for a solution something like this

login.controller.js

const LoginController = function($scope){
   //Some Login
}

login.module.js

//Somehow include login.controller.js on here
 require_with_some_magic_method('login.controller.js');

const login = angular.module("Login", ["ui.router"]);
login.config(function($stateProvider, $urlRouterProvider){
    var states = [
        {
        name: 'login',
        url: '/login',
        template: '<h1>Login Template</h1>',
        controller : LoginController
        }
       ];
        states.forEach((state) => $stateProvider.state(state));
        $urlRouterProvider.otherwise('/');
     });

app.js

//Somehow include login.module.js on here
 require_with_some_magic_method('login.module.js');
 const app= angular.module("App", ["Login"]);

How can i achieve that ?, Please guide me Thanks