javascript - Angular 1.X、webpack 和 ngtemplate 加载器问题

Question

最近有人向我介绍了 Webpack，我一直在尝试为 Angular 1 和带有 ES6 的 Webpack 制作一个入门包。到目前为止，上帝。我能够创建这样的东西:

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 会带来问题。我的网络包配置如下所示:

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 配置已经为您的 .html 文件定义了 ngtemplate 和 html 加载器，因此您只需要做

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

请注意，.modules 是一个有效的文件或文件夹名称。您可能是指 ./modules。

您的relativeTo 参数也是错误的。由于您的 webpack 配置位于 grunt 内部，path.resolve(__dirname, './static/js') 将解析为 /path/to/project/咕噜声/静态/js。您应该改用 path.resolve(__dirname, '../static/js') 或 path.resolve('./static/js')。