Açısal 1.X, webpack ve ngtemplate yükleyici sorunu

Question

Son zamanlarda Webpack’e tanıtıldım ve Angular 1 ve Webpack’i ES6’ya bir Starter Pack’i kullanmaya çalışıyorum. Şimdiye kadar tanrı. Bu gibi şeyler yaratabiliyorum: Bu, kişisel olarak gerçekten çok hoşuma giden bir şeydir. Ancak, sorun ngtemplate-loader ile birlikte gelir. Benim web paketi yapılandırma görünüyor biri böyle: Ben

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; 

Bu hata ile sefil başarısız: Böyle bir şey yapmaya çalıştıklarında

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

, Ve ihtiyaç ile denedi ve çıktı aynı görünüyor. İşte ağaç:

├── 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 

Benim asıl soru, ben ngtemplate-yükleyici içten yolları depolamak (veya WebPack onları sunma) nasıl çalıştığını görmek için yapabileceğim bir şey var mı?

Yanlış olarak ortaya çıkan bir şey var mı?

Şablonla birlikte çıktılar ve dosyaların geri kalanıyla uyuşan herhangi bir grunt|gulp görevini çalıştırmak gibi bunu yapmak için başka yollar kullanabileceğimi biliyorum. Ancak bunun ne kadar karmaşık olduğunu seviyorum.

DÜZENLEME: Bunu herkesin bununla oynayabilmesi için Github'a yükledim.

Answer 1

Gereksinim duyduğunuz şablon, gereksinim duyduğu .js dosyalarının yanında yaşam sürdürmeye çalışıyor. Böylece, bu şablona doğru göreceli yol sadece ./user-create.html'dur. Yalnızca .modules Bir dosya veya klasör adı bir geçerli olduğunu

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

Not yapmak zorunda bu yüzden Ayrıca, webpack yapılandırma zaten .html dosyalar için ngtemplate ve html yükleyiciler tanımlar. Muhtemelen ./modules'u kastediyorsunuz.

relativeTo parametreniz yanlış. Webpack yapılandırmanız grunt'un içinde bulunduğundan, path.resolve(__dirname, './static/js'), /path/to/project/grunt/static/js'a çözülecektir. Bunun yerine path.resolve(__dirname, '../static/js') veya path.resolve('./static/js') kullanmalısınız.