Angular 1.X,webpack和ngtemplate加载程序问题

Angular 1.X, webpack and ngtemplate loader issue

本文关键字:ngtemplate 加载 程序 问题 webpack Angular      更新时间:2023-09-26

我最近被介绍到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加载程序会出现问题。我的网络包配置如下:

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

我的主要问题是,我能做些什么来看看ngtemplateloader是如何在内部存储路径的(或者将它们提供给webpack)吗?

有没有什么地方出了问题?

我知道我可以使用其他方法来完成这项工作,比如运行任何grunt|gulp任务,该任务输出带有模板的模块,并将其与其他文件连接。然而,我确实喜欢它的可堆肥性。

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

您试图要求的模板与需要它的.js文件一起存在。因此,该模板的正确相对路径仅为./user-create.html。此外,您的webpack配置已经为.html文件定义了ngtemplatehtml加载程序,因此您只需要执行

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

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

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