aaronallport/generator-angular-require

Yeoman generator for AngularJS using RequireJS and AMD

generator-angular-require's Issues

main require js config file not having correct bower_components references

Directive templateUrl templates tested from Karma

Hi,

I've been trying to figure this out for a few days, but just can't get the right combination to make this work.

How can I use template files, added via templateUrl in a directive, and test those files with Karma?

I've tried a number of things, and put my changes into a repo here:
https://github.com/scottnath/generator-angular-require-templaturl/tree/test/example

If you look at the commits here:
https://github.com/scottnath/generator-angular-require-templaturl/commits/test/example

You can see the minor changes I added. My notes are below....has anyone got a recipe to make this successfully work?

Thank you for any help,
Scott

---

Notes during my process (not exhaustive for everything I've tried at all):

Links

• Loading a AngularJS Directive TemplateURL into a Unit Test
• TESTING ANGULARJS IN A REQUIREJS ENVIRONMENT

package.json

Added these lines:

"karma-script-launcher": "~0.1.0",
"karma-html2js-preprocessor": "~0.1.0"

ran ``npm install` again

karma.conf.js

added the path to html files into 'files' section:

files: [
...
+   {pattern: 'views/*.html', included: false },
...
],
...
+   preprocessors: {
+       'app/views/**/*.html': ['ng-html2js']
+   },
+   ngHtml2JsPreprocessor: {
+       stripPrefix: 'app/',
+   },

test-main.js

added the templates to this file (as per TESTING ANGULARJS IN A REQUIREJS ENVIRONMENT)

paths: {
...
+   'templates': '../views'
},
shim: {
...
+   'views/test-directive.html': {deps: ['angular']}
...

test require js config file not having correct bower_components references

On newly generated, package.json has "grunt-filerev": "^0.2.2", version doesn't exist

Just got the latest (v0.4.2) of the generator, and on a newly generated app, failing because grunt-filerev ^0.2.2 doesn't exist (latest 0-branch release is 0.2.1)

Update AngularJS version

Update AngularJS version in bower.json of generated projects to 1.2.10

karma doesn't exist when running grunt test

in devDependencies I don't see any (grunt) karma related node_modules. Why does the generator not download it for me?

grunt dist is missing the scripts and views directory

After installing a clean version of angular-require and running the grunt build the dist directory is missing the files from the scripts and styles directory.
The copy command should have included:

       'scripts/{,*/}*',
       'styles/*'

What are people using generator-angular-require for?

What are folks using this generator for?

Do you use generator-angular-require? If so, what for? How? Why?

I'm keen to show some use cases for it so that a community gets built around this to drive its momentum forward.

Love,

Aaron

Task "requirejs:dist" not found

When I run grunt build on a fresh install, it fail with following message:

Warning: Task "requirejs:dist" not found. Use --force to continue.

Error while installing Fontawesome

Hi there
I generated a scaffolding using your generator (latest version of node/grunt/bower/yeoman/generator-angular-require). Everything works fine until I install Fontawesome as a dependency. When running the build I get the following exception:

Running "requirejs:dist" (requirejs) task
>> Error: Error: ENOENT, no such file or directory 'c:\Users\Daniel\workspace\test\.tmp\bower_components\fontawesome\fonts\*.js'

Steps to reproduce:
mkdir test
cd test
yo angular-require test (accept all defaults)
grunt build
grunt
bower install fontawesome --save
grunt

I'm running this on Windows 8.1, tried with Git Bash CLI and cmd. I'm not sure if it is FontAwesome's fault or the generator (I'm pretty new to yeoman). Any idea what causes this error?

Build simple site on gh-pages

Failed to load resource (angular)

Hi all,

when running

yo angular-require
grunt
grunt serve

Chrome gives me the following output in the console:

Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:9000/scripts/angular.js

Uncaught Error: Script error for: angular
http://requirejs.org/docs/errors.html#scripterror

Uncaught Error: Load timeout for modules: angular-route,angular-cookies,angular-sanitize,angular-resource,angular-animate,angular-touch
http://requirejs.org/docs/errors.html#timeout

I have not changed anything and the packages are available in the bower_components directory.

Regards,
schacki

Update readme to contain correct module definitions

Update tests to account for AMD

grunt bower task missing...

Which is, imo, one of the nicer things of using Yeoman.
When installed and included in the gruntfile, there is a different naming convention being used for dependancies which causes a lot of manual renaming, either the yeoman generated dependancies or the ones added by the bower task...

See screenshots of dependancies here:
https://www.dropbox.com/s/asol96cs861aj35/Screenshot%202014-02-17%2012.47.30.png

and bower grunt task here:
https://www.dropbox.com/s/ty9ddwbfc0xxiud/Screenshot%202014-02-17%2012.48.02.png

Typo in Gruntfile.js

Hi all,
when running

yo angular-require

I end up with a Gruntfile that contain these lines:

// Project settings
yeoman: appConfi

Which breaks the grunt tasks.
Regards,
schacki

Add Require.js as a bower dependency, pulled down on project creation

require.js not installed into bower_components

After generating the initial app, requirejs is not installed into bower_components. This I get the following error in the browser console:
GET http://localhost:9000/bower_components/requirejs/require.js 404 (Not Found)

r.js

Optimise JS using r.js

Add in coffeescript versions of created components

Update readme to contain grunt task overview

Add gh-pages branch content

Give this generator its own site page on GH

Clean up according to Yeoman.io blog

See http://yeoman.io/blog/cleanup.html

ngmin not executed??

Hi,

I generated my application scaffold with this yeoman generator and was just in the process of replacing ngmin with ngAnnotate as ngmin seems to be deprecated. Anyway, when doing so it seemed to me that ngmin is never actually executed on the src folder.

...
ngmin: {
  dist: {
    files: [{
      expand: true,
      cwd: '.tmp/concat/scripts',
      src: '*.js',
      dest: '.tmp/concat/scripts'
    }]
  }
},
...

If I understand this configuration correctly, then ngmin is executed on the folder .tmp/concat/scripts but that folder actually doesn't exist when building the project.
I compared it with the original generator-angular where the .tmp/concat/scripts folder is being created correctly and hence also the ngmin task is applied. What copies the file there is the concat task that uses the annotations in the index.html file

<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/controllers/about.js"></script>
<!-- endbuild -->

To fix it, I augmented the existing copy task to properly copy all of the Angular JavaScript source files to .tmp/concat/scripts like

...
copy: {
  ngApp: {
    files: [{
      expand: true,
      dot: true,
      cwd: '<%= yeoman.app %>',
      dest: '.tmp/concat',
      src: [
        'scripts/{,*/}*.js'
      ]
    }]
  },
  ...
}
...

...and then modified the build task to execute a copy:ngApp before.

grunt.registerTask('build', [
  ...
  'autoprefixer',
  // 'concat',
  'copy:angApp',
  // 'ngmin',
  'ngAnnotate',
  'copy:dist',
  ...
  'requirejs:dist'
});

I'm quite sure this can be solved in a more elegant fashion. Any ideas or comments??

Thx :)

(some degree of patience might be required as I'm quite new to grunt and angular)

grunt serve:dist not working

Just did a clean install and tried grunt serve:dist. I get: (in chrome dev tools)
GET http://127.0.0.1:9000/scripts/bootstrap.js 404 (Not Found)

Looking at the bottom of dist/index.html I have:
<script src="bower_components/requirejs/require.js" data-main="scripts/bootstrap.js"></script>
Which doesn't exist. Same thing happens with grunt build(version 0.1.11)

Am I doing something wrong? I don't know how- this is a fresh install.

Add to NPM

when I run 'grunt build', it's has a error

When I run 'grunt build', it's has a warning, the build command stop work. The waring code:

Running "ngAnnotate:dist" (ngAnnotate) task
Warning: Cannot assign to read only property '$methodName' of false Use --force to continue.
Aborted due to warnings.
Execution Time (2015-05-05 07:49:20 UTC)
wiredep:app 135ms ▇ 2%
bower:app 608ms ▇▇▇▇▇ 10%
concurrent:dist 4.9s ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 78%
autoprefixer:dist 295ms ▇▇▇ 5%
ngAnnotate:dist 273ms ▇▇ 4%
Total 6.3s

Grunt command fails immediately after default install (jshint)

There is a lint error in the Grunt template (using doublequotes instead of single). line 379 col 45.

To reproduce

Default install following these steps (after making project dir and switching to it):

npm install -g generator-angular-require
grunt

Leads to the following error:

adewinter@macbook:~/acode/test$ grunt
Running "newer:jshint" (newer) task

Running "newer:jshint:all" (newer) task

Running "jshint:all" (jshint) task

Gruntfile.js
  line 379  col 45  Strings must use singlequote.

✖ 1 problem

Warning: Task "jshint:all" failed. Use --force to continue.

Aborted due to warnings.


Execution Time (2014-04-07 23:14:29 UTC)
loading tasks       5ms  ▇▇▇▇▇▇ 3%
newer:jshint        3ms  ▇▇▇▇ 2%
newer:jshint:all    4ms  ▇▇▇▇▇ 3%
jshint:all        131ms  ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 90%
Total 146ms

Typo in scripts/main.js

Hi all,
when running

yo angular-require

I end up with a Gruntfile that contain these lines:

'angular-animate': ['angular'],,

Which breaks some grunt tasks

Regards
schacki

Grunt error when try run

Hello

I am create new projekt using yo angular-require, and then run grunt
and one bug is line 351 col 45 Strings must use singlequote.
after fix it next problem is :
No newer files to process.
Warning: Task "karma" not found. Use --force to continue.

Aborted due to warnings.

When i fix it i try run grunt serve next grunt server and i have got error

(node) warning: Recursive process.nextTick detected. This will break in the next version of node. Please use setImmediate for recursive deferral.
(node) warning: Recursive process.nextTick detected. This will break in the next version of node. Please use setImmediate for recursive deferral.

util.js:35
var str = String(f).replace(formatRegExp, function(x) {
^
RangeError: Maximum call stack size exceeded

Lazy Loading - Am I doing it wrong?

Hi @aaronallport

I'm trying to figure out if there is a setting I'm missing, or if I just don't correctly understand the underlying concept.

I've noticed that when building out an app using generator-angular-require that when I go to the main page (or any page) that all scripts are being loaded into the browser.

I have created a sample basic app here:
https://github.com/scottnath/generator-angular-require-amd-test

It includes a page1 and a page2, both created using yo angular-require:route.

When I go the the main page "http://localhost:9000/#/" and inspect the Network tab I see that page1.js and page2.js are being loaded.

Am I on the wrong track? Doing something wrong or not doing something I should?

thanks for any help,
Scott

wiredep is looking in the wrong directory for the bower.json file

When I run grunt build, I am getting this error:

Running "wiredep:app" (wiredep) task
Warning: ENOENT, no such file or directory '/Users/tyson/Sites/myApp/app/bower.json' Use --force to continue.

It seems to be looking for app/bower.json instead of looking for it in the root of the project.

When I run grunt test the browser is closing after the test

npm -v generator-angular-require
1.4.28

browsers: ['Chrome'],
// Continuous Integration mode
// if true, it capture browsers, run tests and exit
singleRun: false

How I can fix this problem?

"No uglify targets found" or "require.js blocks are no more supported."

yo angular-require appname
grunt build

gives:

Running "cssmin:generated" (cssmin) task
File dist/styles/vendor.css created.
File dist/styles/main.css created.
>> No "uglify" targets found.
Warning: Task "uglify" failed. Use --force to continue.

Aborted due to warnings.

Using --force will force it to proceed with the build anyway. The generated ./dist/index.html file has the following line:

<script src="bower_components/requirejs/require.js" data-main="scripts/bootstrap"></script>

and (unrelated):

<!--[if lt IE 9]>
    <script src="bower_components/es5-shim/es5-shim.js"></script>
    <script src="bower_components/json3/lib/json3.min.js"></script>
<![endif]-->

So it looks like at least some of the source code has not been minified/uglified/concatenated? I can wrap them in build directives:

<!-- build:js({.tmp,app}) scripts/app.js -->
<script src="bower_components/requirejs/require.js" data-main="scripts/bootstrap.js"></script>
<!-- endbuild -->

but then during building I receive the following error:

Running "useminPrepare:html" (useminPrepare) task
Going through app/index.html to update the config
Looking for build script HTML comment blocks
Fatal error: require.js blocks are no more supported.

maybe relevant: yeoman/grunt-usemin#192 (comment) and yeoman/grunt-usemin#112

generator-angular-require v0.1.9

when I run 'grunt serve', it has an error

when I run grunt serve, it has an error,

songtaodembp:metoyo songtao$ grunt serve
Running "serve" task

Running "clean:server" (clean) task

Running "wiredep:app" (wiredep) task
Warning: ENOENT, no such file or directory '/Users/songtao/projects/metoyo/app/bower.json' Use --force to continue.

Aborted due to warnings.


Execution Time (2014-09-25 09:27:14 UTC)
loading tasks    3ms  ▇ 1%
clean:server     3ms  ▇ 1%
wiredep:app    212ms  ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 95%
Total 223ms

songtaodembp:metoyo songtao$ 

Lazy loading controllers

I might misunderstand some things here...
But, as we build components, I expect that a module will be loaded only when it is accessed.
Let's say we have: ListCtrl.js + List.html + ListDirective.js - I was waiting that all of these would be loaded only when I acces the route: /list.

Is this possible?

I had installed a clean clone of this and it seems to run like an ordinary app. All javascript files are loaded when I land on the first page.

I have a huge application with many dependencies and I would like to split it in modules, then load a module only if an user requests it.

Thanks!

Tests are failing in default generated project

The generated app fails its own tests:

yo angular-require newapp
grunt test

error output:

Running "karma:unit" (karma) task
INFO [karma]: Karma v0.10.9 server started at http://localhost:8080/
INFO [launcher]: Starting browser PhantomJS
WARN [watcher]: Pattern "/home/kanzure/code/ui/test/mock/**/*.js" does not match any file.
INFO [PhantomJS 1.9.7 (Linux)]: Connected on socket sk2nOohQMtYL8nHBtfRS
PhantomJS 1.9.7 (Linux) ERROR
        ReferenceError: Can't find variable: define
        at /home/kanzure/code/ui/app/scripts/app.js:21
PhantomJS 1.9.7 (Linux) ERROR
        ReferenceError: Can't find variable: require
        at /home/kanzure/code/ui/app/scripts/bootstrap.js:1
PhantomJS 1.9.7 (Linux) ERROR
        ReferenceError: Can't find variable: define
        at /home/kanzure/code/ui/app/scripts/controllers/main.js:12
PhantomJS 1.9.7 (Linux): Executed 0 of 0 ERROR (0.202 secs / 0 secs)

Grunt test fails after default install

After installing angular-require with npm and doing a yo install, immediately running grunt test leads to a failure. I'm not sure what the issue is, I think it's something with requirejs but that's mostly a hunch.

How to reproduce

npm install -g generator-angular-require
grunt test

Leads to the following error:

adewinter@macbook:~/acode/test$ grunt test
Running "clean:server" (clean) task
Cleaning .tmp...OK

Running "concurrent:test" (concurrent) task

    Running "compass:dist" (compass) task
    directory .tmp/styles/ 
       create .tmp/styles/main.css (0.008s)
    Compilation took 0.013s

    Running "compass:server" (compass) task
    unchanged app/styles/main.scss
    Compilation took 0.002s

    Done, without errors.


    Execution Time (2014-04-07 23:29:53 UTC)
    compass:dist    357ms  ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 54%
    compass:server  305ms  ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 46%
    Total 666ms

Running "autoprefixer:dist" (autoprefixer) task
Prefixed file ".tmp/styles/main.css" created.

Running "connect:test" (connect) task
Started connect web server on 127.0.0.1:9001.

Running "karma:unit" (karma) task
INFO [karma]: Karma v0.12.4 server started at http://localhost:8080/
INFO [launcher]: Starting browser PhantomJS
INFO [PhantomJS 1.9.7 (Mac OS X)]: Connected on socket 60jLBwtjCP8k61cRhtGx with id 27109581
WARN [web-server]: 404: /base/app/scripts/angular.js
PhantomJS 1.9.7 (Mac OS X) ERROR: 'There is no timestamp for /base/app/scripts/angular.js!'

PhantomJS 1.9.7 (Mac OS X) ERROR
  Error: Script error for: angular
  http://requirejs.org/docs/errors.html#scripterror
  at /Users/adewinter/acode/test/node_modules/requirejs/require.js:141


Warning: Task "karma:unit" failed. Use --force to continue.

Aborted due to warnings.


Execution Time (2014-04-07 23:29:51 UTC)
concurrent:test  2s  ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 48%
karma:unit       2s  ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 50%
Total 4.1s

RequireJS-based tests

Use RequireJS for tests, to resolve "define" and "require" errors when running in PhantomJS via Karma.

Added generator-angular-require to comparison of starters

H Aaron and everyone,

I just came across this project and added it to the following collection of such things that I curate.
http://www.dancancro.com/comparison-of-angularjs-application-starters

Would any of you like to help fill in the details about what it does? If so, let me know and I'll make you an editor to the Google doc, or if you prefer, here are the questions in survey form.

Thanks,
Dan

JQuery... How to add in the require.config so can load before angular?

Hi guys, thanks very much for put togther this awesome generator. I am using it and everything is working as expected. the only situation that I have is that I need to load jquery before angular and I have not found a way to do it. Do you have any idea? I know I can add in the.html file but I would like to have the.html only with require.js.

Bests

Dynamic module dependency injection

Update main generator script to use new format a la generator-angular

Use official Sass Bootstrap

The version of sass bootstrap used in this generator has been deprecated and discontinued now that there is an official sass bootstrap package.

substitute in built require.js file in "dist" folder

Check usemin docs for this

yo angular-require:route extrawork throws new type error

When I'm trying to create a route I get following error:

yo angular-require:route extrawork

path.js:360
throw new TypeError('Arguments to path.join must be strings');
^
TypeError: Arguments to path.join must be strings
at path.js:360:15
at Array.filter (native)
at Object.exports.join (path.js:358:36)
at new ScriptBase.extend.constructor (/usr/local/lib/node_modules/generator-angular-require/route/index.js:15:12)
at Environment.instantiate (/usr/local/lib/node_modules/yo/node_modules/yeoman-generator/lib/env/index.js:267:10)
at Environment.create (/usr/local/lib/node_modules/yo/node_modules/yeoman-generator/lib/env/index.js:244:15)
at Environment.run (/usr/local/lib/node_modules/yo/node_modules/yeoman-generator/lib/env/index.js:303:24)
at init (/usr/local/lib/node_modules/yo/cli.js:114:7)
at pre (/usr/local/lib/node_modules/yo/cli.js:133:3)
at Object. (/usr/local/lib/node_modules/yo/cli.js:163:1)

General questions

Hello,

I've been using your generator for a month and it's been quite helpful. Thanks for the great work.

Nevertheless, since I'm a newbie on Angular, I have a few questions regarding how you structured the scaffolded code.

• I noticed that every Angular component seems to be its own module. For instance, when creating a controller, the angular module is "myApp.controllers.MyController":

angular.module('myApp.controllers.MyController', [])
      .controller('MyController', function ($scope) {
}

Is there a reason that?

• When generating a new Angular entity, it gets automatically inserted into app.js in a way that it gets loaded in the app initialization. Is there a reason for not lazy loading every component?
• In terms of performance, does requirejs brings a great improvement to angular?
• I've read several articles out there showing how to lazy load controllers and others saying NOT to use requirejs as the AMD framework for Angular. I guess you might have a strong opinion about it. Do you mind shedding some light about it?

Thanks in advance for your time.

Cheers,
George

Add coveralls

Manual bootstrap of main application module given RequireJS usage

Configuration modification for Lazy load JS files

I am creating a enterprise level application. Evaluating your generator to lazy load the js files whenever required.

I saw in your sample app, in that all files are loaded on the first page request itself. Well, in Enterprise level application that should not be the case. JS should get loaded whenever require.

How can I modify Grunt or Code so that JS files will get requested from server whenever require not in the one go.