How to add the JS of my Angular Module to SC5

[DanielaValero]

Hello,

I have been trying to figure out how to add the JS of my component to the styleguide, however did not have success so far. At the moment I get this error:

"[ng:areq] Argument 'HelloWorldController' is not a function, got undefined"

This is my config:

gulp task

    .pipe(sc5.generate({
      title: 'Bosch living syleguide',
      server: false,
      appRoot: '/styleguide',
      readOnly: true,

      disableEncapsulation: true,
      sideNav: true,
      extraHead: `<link rel="shortcut icon" href="/favicon.png">
                  <link rel="stylesheet" type="text/css" href="/styleguide/styleguide-custom.css">`,
      overviewPath: 'README.md',
      afterBody: '<script src="/scripts/main.js"></script>',
      customColors: `${paths.styleguideSrc}/styles/_styleguide_variables.scss`,
    }))

component scss

// JS component (Sample)
//
// Markup:
// <a ng-controller="HelloWorldController as ctrl"
// ng-href="[[ctrl.href]]" target="[[ctrl.target]]">
// Directive not working yet
// </a>
//
// Styleguide 2.0

a.helloWorld-primary {
  color: $helloWorld-new-color;
}

I also tried adding my JS to the extraHead but no success, same error. Also tried not adding the JS to the sc5 generate task but using an angular-directive, to avoid copy and paste of the markup, but also got the same error.

// JS component (Sample)
//
// Markup:
// <a ng-controller="HelloWorldController as ctrl"
// ng-href="[[ctrl.href]]" target="[[ctrl.target]]">
// Directive not working yet
// </a>
//
// Styleguide 2.0
// sg-angular-directive:
// name: helloWorld
// template: components/molecules/helloWorld/helloWorld.html
// file: /scripts/main.js

a.helloWorld-primary {
  color: $helloWorld-new-color;
}

I have searched in the issues, googled it, but after lots of hours spent on this I really still don't get it. I wondered if you could help me to find out what is the config I am missing?

Thanks in advance

[KienDangTran]

I have the same concern, pls someone help us !

[kmilov]

you have to add it to the filesConfig property, not in the extraHead or afterBody, then notify sc5 which is your angular module name, something like.

  filesConfig: [{
           "name": "myAngularApp",
           "files": ["scripts/main.js"]
      }],

take care to copy scripts/main.js to you're styleguide build path.

[DanielaValero]

Hi @kmilov

Thank you for your response, however, I am still getting the JS error:

main.js:29198 Error: [ng:areq] Argument 'HelloWorldController' is not a function, got undefined
http://errors.angularjs.org/1.5.5/ng/areq?p0=HelloWorldController&p1=not%20a%20function%2C%20got%20undefined

In my config I am loading

  filesConfig: [{
        name: 'bosch',
        files: ['/scripts/vendor.js', '/scripts/main.js'],
      }],

I also tried adding both files into a single one, but got the same output.

Do you have an idea of what might it be?

[kmilov]

@DanielaValero check that the vendor.js and main.js scripts are being loaded correctly, in the chrome dev tools you should see a call to ozLazyLoading, also, check that the scripts are in a folder /scripts/ in the path where you're generating you're styleguide.

[DanielaValero]

Hi @kmilov

I think I know which is the issue.

The component seems to be initialized before the JS is being loaded, I get the JS properly loaded now, but as it is being lazy loaded, the controller is initialized before the JS appears.

When I load the index page, wait for some minutes, and then navigate to the page of my component, the JS is there. If I load the page directly on the section of my component, the error appears.

Edit: I am also using the interpolateProvider in my app to use a different syntax for the curly braces notation of angular. What is weird is that the interpolateProvider is not only replacing the syntax of the start and end symbol in my app, but also in sc5 (I see {{ section.reference }} instead of the section reference number). What I find estrange is that I am applying this in my ng-app, and also that I am loading my JS and the encapsulation is still enabled, theoretically this should be applied only to my app but not to the whole sc5 too, right? Anyways I have already added a fix for this in my setup, but found it interesting.

Edit 2: Just as a documentation for anyone using webpack with SC5: I solved the problem using the 'filesConfig' settings, and creating a single bundle for my styleguide, I placed it on the dist/ of my styleguide. Still the issue with the initialization of my component before the JS is loaded exists. Maybe there is a missing setting to make?

[kmilov]

@DanielaValero

edit1: I think that you're $interpolateProvider should not affect the sc5 style guide, since the modules are injected via ocLazyLoading. but I'm not pretty sure on this

edit2: yes. the filesConfig is the way to go if you don't want to use the sg-angular-template way in KSS, I found an issue with the lazy loading module load that I fixed in this PR https://github.com/SC5/sc5-styleguide/pull/998 feel free to check out this to see if your error is still happening.