我最近被介紹給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

相關問題