Usemin "Different sources attempting to write to the same destination"

Question

I have an AngularJS app I'm working on usemin tasks for. This app has 2 html pages, both include a block minified into a common.js and the other pages include js minified for those specific pages.

page1.html

<!-- build:js scripts/common.js -->
<!-- bower:js -->
<script src="a.js"></script>
<script src="b.js"></script>
<!-- endbower -->
<!-- endbuild -->

<!-- build:js scripts/page1.js -->
<!-- bower:js -->
<script src="c.js"></script>
<script src="d.js"></script>
<!-- endbower -->
<!-- endbuild -->

page2.html

<!-- build:js scripts/common.js -->
<!-- bower:js -->
<script src="a.js"></script>
<script src="b.js"></script>
<!-- endbower -->
<!-- endbuild -->

<!-- build:js scripts/page2.js -->
<!-- bower:js -->
<script src="e.js"></script>
<script src="f.js"></script>
<!-- endbower -->
<!-- endbuild -->

Gruntfile.js

useminPrepare: {
    html: ['<%= yeoman.app %>/page1.html', '<%= yeoman.app %>/page2.html'],
        options: {
            dest: '<%= yeoman.dist %>'
        }
    },

Usemin is upset because common.js is defined in both files with the error: Fatal error: Different sources attempting to write to the same destination:. I (think) I need to include both page1 and page2 in the useminPrepare in order to correctly get page1.js and page2.js generated. How do people solve this issue?

Answer 1

Usually with angular people create single page applications and create only one "main" index.html for the whole skeleton of the page. This way you have to deal with only one set of files. The different sub-pages are rendered into a given div using ui-router, ng-includes or something else.

Answer 2

The issue for me when i ran into this problem was that the code has to be exactly the same between build/endbuild html comments. Seems it should match on file names, but it seems to match on the content between the the comments. Even tab vs spaces can be an issue.