Importmap config:
pin "application", preload: true
pin "home", preload: true
application layout:
<body id="page-top" ng-app="userApp" ng-strict-di>
<nav class="header shadow" ng-controller="NavbarController as vm" ng-init="vm.init()">
</nav>
<%= javascript_importmap_tags %>
<%= yield :javascript %>
</body>
Home page
<% content_for :javascript do %>
<%= javascript_import_module_tag "home" %>
<% end %>
application.js
// AngularJs
import {} from 'libs/angular/angular.min'
import {} from 'libs/angular/angular-animate.min'
import {} from 'libs/angular/angular-cookies.min'
import {} from 'libs/angular/angular-sanitize.min'
import {} from 'libs/angular/angular-messages.min'
import {} from 'libs/angular/toaster.min'
import {} from 'angular/common'
import {} from 'angular/app'
home.js
import {} from 'angular/controllers/navbar_controller'
when I reload page (command+shift+R) sometime I get an error like
Error: $controller:ctrlreg
A controller with this name is not registered.
The controller with the name 'NavbarController' is not registered.
https://code.angularjs.org/1.6.9/docs/error/$controller/ctrlreg?p0=NavbarController
If I put all home.js to application.js it will be ok. But, I just want to separate many small files and only load what the page uses. What wrong with this code?