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

Question

I am creating a robust application using Angularjs on ES6 and I need to assemble 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 statements of those elements within the angular. The problem is I can’t access a component that’s inside an app submodule, like this:

main file.js

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 to structure these components with submodules?