Vấn đề tải 1.X, webpack và ngtemplate góc

Question

Gần đây tôi đã được giới thiệu với Webpack và tôi đã cố gắng đưa gói khởi động cho Angular 1 và Webpack với ES6. Cho đến nay rất thần. Tôi có thể tạo ra những thứ như sau:

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

Cá nhân tôi thực sự thích.

Tuy nhiên, vấn đề đi kèm với bộ nạp ngtemplate. My gói web cấu hình trông như thế này một:

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

Tuy nhiên, bất cứ khi nào tôi cố gắng làm một cái gì đó như thế này:

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; 

Nó thất bại thảm hại với lỗi này:

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 

tôi đã cố gắng với yêu cầu quá và đầu ra có vẻ là như nhau. Dưới đây là các cây:

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

câu hỏi chính của tôi là, liệu có bất cứ điều gì tôi có thể làm gì để xem làm thế nào ngtemplate-loader được lưu trữ các con đường nội bộ (hoặc phục vụ họ webpack)?

Có điều gì đó xảy ra không đúng không?

Tôi biết tôi có thể sử dụng các cách khác để thực hiện việc này, chẳng hạn như chạy bất kỳ tác vụ grunt|gulp nào xuất ra mô-đun có mẫu và kết hợp nó với phần còn lại của tệp. Tuy nhiên tôi làm như thế nào composable này được.

CHỈNH SỬA: Tôi đã tải video này lên Github để mọi người có thể chơi trò chơi này.

Answer 1

Mẫu bạn đang cố gắng yêu cầu cuộc sống cùng với các tệp .js yêu cầu tệp đó. Do đó, đường dẫn tương đối chính xác cho mẫu đó chỉ là ./user-create.html. Ngoài ra, cấu hình webpack của bạn đã định nghĩa ngtemplate và html bộ tải cho .html tập tin của bạn, do đó bạn chỉ nên phải làm

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

Lưu ý rằng .modules là một giá trị một tập tin hoặc tên thư mục. Bạn có thể có nghĩa là ./modules.

Thông số relativeTo của bạn cũng sai. Vì cấu hình webpack của bạn nằm bên trong số grunt, path.resolve(__dirname, './static/js') sẽ giải quyết thành /path/to/project/grunt/static/js. Thay vào đó, bạn nên sử dụng path.resolve(__dirname, '../static/js') hoặc path.resolve('./static/js').