How do I get templateURLs to work with angular?

Question

Before I get redirected to the countless duplicate questions. I want everyone to know I've checked them and tried their solutions but it doesn't work for me. I think the issue is with my path, but the way our project is setup I can't seem to figure out what's wrong. So I will layout our project and hopefully someone can help me out

We are using the components process and the project is structured like so:

src
   -app
      -components
       -some-component
        components.some-component.module.js
        some-component.html
        some-component.component.js
        some-component.component.spec.js           
config.js
gulpfile.js
karma.conf.js

karma.conf.js

var config = require('./config');
module.exports = function(karmaConfig){
 karmaConfig.set({
  files: [].concat(
    config.source.js.libraries,
    config.source.js.testLibraries,
    config.source.js.apps,
    config.source.js.tests,
    '**/*.html'  // this is me trying path stuff
  },
  frameworks: ['mocha','sinon-chai'],
  ....
  plugins: [
    'karma-firefox-launcher',
    'karma-mocha',
    'karma-sinon-chai',
    'karma-ng-html2js-preprocessor'
  ],
  preprocessor: {
    '**/*.html' : ['ng-html2js']
  },
  ngHtml2JsPreprocessor: {
    stripPrefix: 'src/app',
    moduleName: 'templates',
    cachedIdFromPath: function(filepath){
      console.log('File ' + filepath);
      return filepath;
  }
 });
}

The config.js file is long. It's a central location for all file location paths. I'll provide a section of the file:

module.exports = {
  angular: {
    source: {
      js: {
        app: [
          'src/app/**/*.module.js',
          'src/app/**/*.js',
          '!src/app/**/*.spec.js'
        ]
      }
    }
  }
};

The error I'm getting is Module 'templates' is not available. Like I said I tried all kinds of solutions but can't seem to resolve the problem. Any help will be greatly appreciated and I will update this questions with more detail if needed.

Thank you in advance.

Edit Spec file.

describe('component: some-component', function(){
  beforeEach(module('app.components.some-component'));
  beforeEach(module('templates'));
  .....
});

The some-component.component.js file:

angular
  .module('app.components.some-component')
  .component('someComponent', {
    templateUrl: 'components/some-component/some-component.html',
    ....
    }
  });
function Controller(){/* function code here */}

The error 'Module templates not found' doesn't seem relevant here, none of your code references templateURL or templates. Is it anguiar that is complaining of this? — Mikkel, Oct 24 '16 at 13:55
Sorry I'll add the spec file too. Where I'm actually calling the module — lmcadory, Oct 24 '16 at 14:13
if you replace app.components.some-component by just "app" in your some-component.component.js file, is it working? I had a similar issue but i'm not sur about the answer — Wandrille, Oct 24 '16 at 14:33
So the spec file is looking for a module called 'templates' - where is this? — Mikkel, Oct 24 '16 at 14:37
It's named in the karma.conf.js file under ngHtml2JsPreprocessor @Mikkel — lmcadory, Oct 24 '16 at 14:40

score 0 · Answer 1 · answered Oct 25 '16 at 13:24

0

I don't know what the issue was. I'm still assuming it was a path thing. We implemented Babel and someone how that fixed it. I don't really understand how, but I'm marking this issue as solved.

answered Oct 25 '16 at 13:24

lmcadory

2,149
3
14
15

How do I get templateURLs to work with angular?

1 Answers1