Creating a multi-level structure for components in AngularJS + ES6

I'm creating a robust application using AngularJS on ES6 and need to mount a structure so that the logic of the application components is organized. Basically, my application works with numerous modules, and these are structured in packages for example:

app          -> módulo global da aplicação
 |-foo       -> submódulo
 |  |-bar    -> subcomponente foo.bar
 |-bin       -> submódulo
 |  |-bar    -> subcomponente bin.bar

I'm looking for a way to define the declarations of these elements within the angular. The problem is that I can not access a component that is within an app submodule, like this:

main.js file

import angular from "angular";
import foo from "./foo/foo"; // -> sub-módulo da aplicação
import bin from "./bin/bin"; // -> sub-módulo da aplicação

const app = angular.module("app",[foo,bin]); 

file ./foo/foo.js

import angular from "angular";
import bar from "./bar/bar"; // -> bar componente

export default angular.module("foo",[bar]);

file ./foo/bar/bar.js

import angular from "angular";
import template from "./bar.html";

export default angular.module("bar",[
]).component("bar",{
  templateUrl: __dirname + "/bar.html",
  controller:{
    constructor(){
      this.name = "foo.bar;
    }
  }
});

The direct idea is to work as namespaces as I have in PHP 7 or C #, JAVA, etc. Is there any way I can structure these components with submodules?