WearyMonkey / ngtemplate-loader

Include AngularJS templates in the Webpack bundle and preload the template cache.
MIT License
238 stars 78 forks source link

can't get webpack config loader to work #39

Closed bisonfoutu closed 8 years ago

bisonfoutu commented 8 years ago

I'm trying to set up a loader in my webpack.config juste like advised in the readme of the repo, but I can't get it to work.

My project is structured like this:

src/ └── app/    ├── app.js    └── streams/       ├── streams.js       └── templates/          └── streams.html

I'm doing all my requires in streams.js. When I require the template this way it works: //var templateUrl = require('!ngtemplate!html!./templates/streams.html');

My loader is defined like so:

loaders: [
      {
        test: /\.html$/,
        loader: 'ngtemplate?relativeTo=' + (path.resolve(__dirname, './app')) + '/!html'
      }
    ]

I have tried to require my template in various ways, and it does not work:

var templateUrl = require('./templates/streams.html');
var templateUrl = require('streams.html');

I get exactly the same error if I don't have any loader defined for html files.

ERROR in ./src/app/streams/templates/streams.html Module build failed: @ ./src/app/streams/streams.js 4:18-53

Any ideas ?

bisonfoutu commented 8 years ago

I successfully loaded my template with this loader:

{
      test: /\.html$/,
      loader: 'ngtemplate!html',
      exclude: [
        /index.html$/
      ]
}

But now I get this error:

Uncaught Error: [$injector:nomod] Module 'ng' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

EDIT: it seems to happen only if I have more than one entry point in my webpack config. In my case, I have a main entry point set to /src/app/app.js, and another one set to /src/app/streams/streams.js When I remove the second one to only keep app.js, it works perfectly.

EDIT 2: I put all my external library dependencies in a separate vendor bundle. I required the files directly in my webpack.config, like this:

config.entry = {
    vendor: [
      'jquery',
      'bootstrap',
      'angular',
      'angular-animate',
      'angular-ui-router',
      'angular-ui-bootstrap',
      'angular-ui-mask',
      'angular-ui-notification',
      'angucomplete-alt'
    ],
    app: './src/app/app',
    streams: './src/app/streams/streams'
  };

This solved my 'ng' module error. Everything works fine now, closing issue.