角度1.X、webpackとngtemplateローダーの問題

Question

私は最近Webpackに紹介されています。私はAngular 1と​​WebpackのスターターパックをES6で使用しようとしています。これまでのところ神様。私はこのようなものを作成することができます：

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

これは私が本当に好きです。

ただし、ngtemplate-loaderに問題があります。私は「

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 

：

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; 

それは、このエラーで無残に失敗します。私はこのような何かをしようとするたびに、しかし

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

：私のウェブパックの設定はこのようになります。 veも必要としていて、出力は同じように見えます。ここで木があります：

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

私の主な質問は、私がngtemplate-ローダーが内部パスを保存（またはWebPACKのにそれらを提供する）方法を確認するために何かできることはありますか？

間違っているものがありますか？

テンプレートを使用してモジュールを出力し、残りのファイルと連結するタスクを実行するなど、他の方法でこれを実行することができます。しかし、私はこれがどのように構成可能であるか好きです。

編集：私はこれをGithubにアップロードしました。誰でもこれを再生できます。

Answer 1

必要なテンプレートは、それが必要なファイル.jsの横にあります。したがって、そのテンプレートへの正しい相対パスはちょうど./user-create.htmlです。あなただけ.modulesが有効なファイルまたはフォルダの名前であることを

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

注意をしなければならない必要がありますので、また、お使いのWebPACKの設定は、すでにあなたの.htmlファイル用ngtemplateとhtmlローダーを定義します。おそらく./modulesを意味するでしょう。

relativeToパラメータも間違っています。あなたのwebpack設定がgruntの中にあるので、path.resolve(__dirname, './static/js')は/path/to/project/grunt/static/jsに解決されます。代わりにpath.resolve(__dirname, '../static/js')またはpath.resolve('./static/js')のいずれかを使用する必要があります。