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

我也试过过需要，输出似乎是一样的。这是树：

├── 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')代替。

Angular 1.X，webpack和ngtemplate加载器问题

1 个答案: