Kątowa ładowarka 1.X, pakiet podręczny i ładowarka Ngtemplate

Question

Niedawno wprowadzono mnie do pakietu Webpack i próbowałem umieścić pakiet startowy dla Angular 1 i Webpacka z ES6. Jak dotąd, bóg. Jestem w stanie stworzyć takie rzeczy:

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 
]); 

Którą osobiście bardzo lubię.

Jednak problem pochodzi z programu ładującego ngtemplate. Moja paczka web config wygląda to jedno:

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'] 
     } 
     } 
    ] 
    } 

Jednak, gdy staram się zrobić coś takiego:

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; 

To nie zdało egzaminu z tego błędu:

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 ve próbowano z wymaganiem również i wynik wydaje się być taki sam. Oto drzewo:

├── 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 

Moje główne pytanie brzmi, czy mogę coś zrobić, aby zobaczyć, jak ngtemplate-ładowarka jest przechowywanie ścieżki wewnętrznie (lub służąc im WebPack)?

Czy coś jest nie tak?

Wiem, że mogłem użyć innych sposobów, aby to zrobić, np. Uruchomić dowolne zadanie grunt|gulp, które wyprowadza moduł z szablonem i połączyć go z resztą plików. Jednak podoba mi się, jak to jest możliwe do skomponowania.

EDYCJA: Przesłałem to do Github, aby każdy mógł się z tym bawić.

Answer 1

Szablon, którego próbujesz wymagać, znajduje się obok plików .js, które tego wymagają. Dlatego poprawna ścieżka względna do tego szablonu to tylko ./user-create.html. Również Twój WebPack config już definiuje ngtemplate i html ładowarki dla .html plików więc nie powinno być tylko zrobić

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

.modules Zauważ, że jest ważny plik lub nazwę folderu. Prawdopodobnie miałeś na myśli ./modules.

Parametr relativeTo jest również niepoprawny. Ponieważ konfiguracja twojego pakietu internetowego znajduje się wewnątrz grunt, path.resolve(__dirname, './static/js') zostanie rozwiązana na /path/to/project/grunt/static/js. Zamiast tego należy użyć wartości path.resolve(__dirname, '../static/js') lub path.resolve('./static/js').