我最近被介绍给Webpack，并且我一直在尝试为Angular 1和Webpack加入ES6的初学者包。到目前为止这么神。我能够创造这样的事情：Angular 1.X，webpack和ngtemplate加载程序问题

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

然而，每当我试图做这样的事情：

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

我：

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;

它与此错误悲惨的失败了我也试过了，并且输出看起来也是一样的。这里的树：

├── 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装载机内部存储路径（或他们的服务来的WebPack）？

有没有什么东西会被误判？

我知道我可以用其他方式来完成这个任务，比如运行任何输出带模板模块的grunt|gulp任务，并将其与其余文件连接起来。不过，我确实喜欢这是如何组合的。

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

来源

2016-04-28 Antonio Laguna

您试图要求的模板与需要它的.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')。

来源

2016-05-01 12:41:18

这当然有道理。但它仍然失败：'./static/js/modules/user/user-create.html中的ERROR 模块构建失败：'。模板只是这样的：'

LoL

' –

'Module build failed：'后没有错误信息：？ –

'模块构建失败： @ ./static/js/modules/user/index.js 15：18-47' –

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

回答

LoL

相关问题