Problema angolare 1.X, webpack e ngtemplate loader

Question

Sono stato presentato di recente a Webpack e ho cercato di inserire un pacchetto iniziale per Angular 1 e Webpack con ES6. Fin qui, dio. Sono in grado di creare cose come questa:

import angular from 'angular'; 
import uiRouter from 'angular-ui-router'; 
import ngAnimate from 'angular-animate'; 
import ngAria from 'angular-aria'; 
import ngMessages from 'angular-messages'; 
import ngMaterial from 'angular-material'; 

import UserModule from './modules/user'; 

const MODULE_NAME = 'nukehome'; 

const ngModule = angular.module(MODULE_NAME, [ 
    uiRouter, 
    ngAnimate, 
    ngAria, 
    ngMessages, 
    ngMaterial, 
    UserModule.name 
]); 

che mi piace personalmente davvero.

Tuttavia, il problema si presenta con ngtemplate-loader. My Web pacchetto di configurazione assomiglia a questo:

webpack: { 
    context: '<%= ui %>/js', 
     entry: ['babel-polyfill', './index.js'], 
     output: { 
    path: '<%= build %>/js', 
     filename: '<%= package.name %>.js' 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.html$/, 
     loader: 'ngtemplate?relativeTo=' + (path.resolve(__dirname, './static/js')) + '/!html' 
     }, 
     { 
     test: /\.js$/, 
     exclude: /(node_modules|bower_components)/, 
     loader: 'ng-annotate', 
     query: { 
      map: false 
     } 
     }, { 
     test: /\.js$/, 
     exclude: /(node_modules|bower_components)/, 
     loader: 'babel', 
     query: { 
      cacheDirectory: true, 
      presets: ['es2015'] 
     } 
     } 
    ] 
    } 

Tuttavia, ogni volta che provo a fare qualcosa di simile:

import angular from 'angular'; 
import uiRouter from 'angular-ui-router'; 

import userCreateTemplate from './user-create.html'; 

const MODULE_NAME = 'nukehome.user'; 

const ngModule = angular.module(MODULE_NAME, [ 
    uiRouter 
]); 

ngModule.config(function($stateProvider, $urlRouterProvider) { 
    $stateProvider 
     .state('user', { 
     url: '/user/', 
     templateUrl: userCreateTemplate, 
     controller: function() { 
      console.log('Hi user'); 
     } 
     }); 

    $urlRouterProvider.otherwise('/404/'); 
}); 

export default ngModule; 

Si fallisce miseramente con questo errore:

ERROR in ./static/js/modules/user/index.js 
Module not found: Error: Cannot resolve module '.modules/user/user-create.html' in /Users/alaguna/project/static/js/modules/user 
@ ./static/js/modules/user/index.js 15:18-75 

I' ho provato con richiedono troppo e l'output sembra essere lo stesso. Ecco l'albero:

├── Gruntfile.js 
├── app.js 
├── bin 
│ └── www 
├── config 
│ └── config.json 
├── content 
│ └── data 
│  └── nukehome.db 
├── core 
│ ├── models 
│ │ ├── device.js 
│ │ ├── index.js 
│ │ └── user.js 
│ └── server 
│  ├── auth.js 
│  └── utils 
│   └── gravatar.js 
├── grunt 
│ ├── develop-tasks.yaml 
│ ├── scripts-tasks.yaml 
│ ├── styles-tasks.yaml 
│ └── webpack.js 
├── package.json 
├── public 
│ ├── css 
│ │ └── nukehome.css 
│ └── js 
│  └── nukehome.js 
├── static 
│ ├── css 
│ │ └── nukehome.css 
│ ├── js 
│ │ ├── app.controller.js 
│ │ ├── index.js 
│ │ └── modules 
│ │  └── user 
│ │   ├── index.js 
│ │   └── user-create.html 
│ └── scss 
│  └── nukehome.scss 
└── views 
    ├── error.hbs 
    ├── index.hbs 
    └── layout.hbs 

mia domanda principale è, c'è qualcosa che posso fare per vedere come ngtemplate-loader sta memorizzando i percorsi internamente (o servono a webpack)?

C'è qualcosa che sembra sbagliato?

So che potrei usare altri modi per eseguire questa operazione, ad esempio eseguire qualsiasi attività grunt|gulp che restituisce un modulo con il modello e concatenarlo con il resto dei file. Comunque mi piace come sia componibile.

MODIFICA: l'ho caricato su Github così chiunque può giocare con questo.

Answer 1

Il modello che si sta tentando di richiedere è disponibile accanto ai file .js che lo richiedono. Pertanto, il percorso relativo corretto per quel modello è solo ./user-create.html. Inoltre, il config webpack definisce già ngtemplate e html caricatori per i file .html così si dovrebbe avere a che fare solo

import userCreateTemplate from './user-create.html'; 

Nota che .modules è una valida un file o della cartella. Probabilmente intendevi lo ./modules.

Anche il parametro relativeTo è errato. Poiché la configurazione del webpack si trova all'interno di grunt, path.resolve(__dirname, './static/js') verrà risolto in /path/to/project/grunt/static/js. È necessario utilizzare path.resolve(__dirname, '../static/js') o path.resolve('./static/js').