Problems with CSS loading and Angular UI Bootstrap directives

[rombernardino]

• [X] I understand that GitHub issues are not for tech support, but for questions specific to this generator, bug reports, and feature requests.

Item	Version
generator-angular-fullstack	4.2.2
Node	6.11.2
npm	3.10.10
Operating System	Ubuntu 16.04 LTS

Item	Answer
Transpiler	Babel
Markup	HTML
CSS	SCSS
Router	ui-router
Client Tests	Jasmine
DB	MongoDB
Auth	Y
socket.io	Y

Hello!

I'm struggling with two things:

• I'm not able to use AdminLTE, since its CSS files don't load. Even using a SASS port of it, it just doesn't load those files. Could this be a problem with the CSS loader?

• The animations of directives of Angular UI Bootstrap are not smooth like they are supposed to be. It looks like there's not jQuery to make the toggle animation. I had problems using jQuery but doing this #2445 apparently solved the problem, even though, sometimes it looks like there's no jQuery being used in the project. Could this be a jQuery issue too?

Thanks in advance!

[Awk34]

How are you loading your CSS files?

I'm not sure about the animations. I've never seen that before. Maybe try something more general, like Stack Overflow?

[rombernardino]

I load the default way. The only thing (I tried) to add was adding the Admin LTE and a SASS version of it, following the default way, without success.

For example, I have this:

var config = {};

  /**
   * Entry
   * Reference: http://webpack.github.io/docs/configuration.html#entry
   * Should be an empty object if it's generating a test build
   * Karma will set this when it's a test build
   */
if(TEST) {
  config.entry = {};
} else {
  config.entry = {
    app: './client/app/app.js',
    polyfills: './client/polyfills.js',
    vendor: [
      'jquery',
      'angular',
      'angular-animate',
      'angular-aria',
      'angular-cookies',
      'angular-resource',
      'admin-lte',

      'angular-sanitize',
      'angular-socket-io',
      'angular-ui-bootstrap',
      'angular-ui-router',
      'lodash'
    ]
  };
}

But it won't load, along the Angular-UI resources.

Thank you!

[rombernardino]

I clicked unintentionally on "Close and comment" instead of just "Comment". Sorry for it.

[Aciid]

Interested as well to see how angular modules styles are supposed to be loaded with fullstack. I'm using the above method with webpack, but ui-grid.css is not being loaded from angular-ui-grid.

Substituing to myComponent/myComponent.scss @import '~angular-ui-grid/ui-grid.css';

Works like a charm

[rombernardino]

@Aciid, the problem here is that the JS files are not loading. I tried to import the dependencies inside the modules but still not working. Like:

import uiBootstrap from 'angular-ui-bootstrap';

export default angular.module('testApp.main', [uiBootstrap]) .config(routing) .component('main', { template: require('./main.html'), controller: MainController }) .name;

@Awk34, I tried to use the uib-accordion in a fresh installation of the generator, imported the dependencies, but still couldn't make it work.

Could it be the way the dependencies are being loaded? Does anybody else had the same problem using Angular UI or any other external dependencies?