Angular 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.我的web pack配置看起来像这样:

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

但是,每当我尝试做这样的事情时:

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;

它失败了这个错误:

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

我也尝试过require,输出似乎是一样的.这是树:

??? 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-loader如何在内部存储路径(或将它们提供给webpack)？

有什么东西可以解决错误吗？

我知道我可以使用其他方法来完成这项工作,例如运行任何grunt|gulp使用模板输出模块的任务,并将其与其余文件连接起来.但是,我确实喜欢这是可组合的.

编辑:我已经上传到Github所以任何人都可以玩这个.

Answer 1

您尝试需要的模板与.js需要它的文件一起存在。因此，该模板的正确相对路径就是./user-create.html. 另外，您的 webpack 配置已经为您的文件定义了加载器ngtemplate，因此您只需要做html.html

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

请注意，这.modules是有效的文件或文件夹名称。你可能是说./modules。

你的relativeTo参数也错了。由于您的 webpack 配置位于 内部grunt，path.resolve(__dirname, './static/js')因此将解析为/path/to/project/grunt/static/js. 您应该使用path.resolve(__dirname, '../static/js')或path.resolve('./static/js')来代替。