我使用角度1.5.3与es6,webpack和玉石模板.

除组件的模板外,一切都按预期工作.

这有效

var cmpnt = {
    template: '<div>test</div>'
}

这也有效(当我手动创建html文件时)

var cmpnt = {
    template: require('./component.html')
}

这不起作用

var cmpnt = {
    template: require('./component.jade')
}

在浏览器控制台中,我得到了

错误：[$injector：unpr]未知提供者：localsProvider< - locals .jade文件存在,我在应用程序的许多其他位置使用require(‘./ template.jade’)没有问题. 有任何想法吗？我可以提供更多信息吗？

jade-loader返回一个函数.您不能将该函数传递给模板,您必须在传递之前调用该函数

var cmpnt = {
    template: require('./component.jade')();
}

请注意require之后的函数调用

在角度或webpack中是否有一些特殊的IE开关,因为当我在 http://localhost:port/上运行我的网站时,它可以工作.此外,当我在Edge或Chrome上的服务器 http://server.domain/mysite/上运行它时,它可以工作.但是当我在IE 11上打开它(兼容模式设置为11)时,我在控制台中收到以下错误：

未处理的Promise拒绝：无法加载函数t(t){var e = this; this.http = t,this.getItems = function(){e.results = null,e.http.get(“api / app / components /my-items.component.html; Zone :;任务：Promise.then;值：无法加载函数t(t){var e = this; this.http = t,this.getItems = function(){e. results = null,e.http.get(“api / app / components / my-items.component.html undefined

对我来说意味着什么的唯一部分是’api /’是完全错误的,并且我已经仔细检查了组件,它清楚地说：

@Component({
    selector: 'my-items',templateUrl: 'app/components/my-items.component.html'
})
export class MyItemsComponent implements OnInit { ...

整个解决方案中没有出现短语’api / app'(包括c#,ts,css,html和js文件)

我的webpack.config.js很简单：

/// <binding ProjectOpened='Watch - Development' />
var path = require('path');
var webpack = require('webpack');
var console = require('console');


module.exports = {
    context: path.join(__dirname,'wwwroot'),//vendor: ['libs/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js'],entry: './app/main.js',output: {
        path: path.join(__dirname,'wwwroot/built'),filename: '[name].bundle.js',},plugins: [
            //new webpack.optimize.CommonsChunkPlugin("vendor","vendor.bundle.js"),// split vendor js into its own file
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',minChunks: function (module,count) {
          // any required modules inside node_modules are extracted to vendor
          var path = module.resource.replace(/\\/g,'/');

          return (/\.js$/.test(path) && (path.indexOf('node_modules/') >= 0 || path.indexOf('libs/') >= 0));
      }

};

这里发生了什么？

我使用2.0.0-rc.1和webpack遇到了同样的问题.在阅读了一些 issues之后,我的解决方案是在浏览器是IE时在我的index.html上包含以下脚本：

es6-shim.min.js
system-polyfills.js
shims_for_IE.js

前两个可以在node_modules中找到,我从here下载了第三个.

我正在使用 Angularjs进行前端开发.最近我开始实现Webpack然后我意识到angular.element($window).scrollTop()停止工作并开始抛出错误,因为“windowElement.width不是函数”.以下是旧代码和webpack的新代码.

旧工作代码：

app.directive("ajnav",['$window','$location',function ($window,$location) {
        return {
            restrict: "E",templateUrl: "/templates/common/AJNav.html",replace: true,scope: {
                SEO: '=',conf: '='
            },link: function (scope,element,attrs) {
                //Bind event change the postion of AJ Nav on scroll
                var windowElement = angular.element($window);
                var onScrollHandler = function () {                    
                    //Get current height of iNav.
                    var iNavHeight = $("#iNavNGI_Header").height();
                    if (windowElement.scrollTop() > iNavHeight) {
                        $(element).addClass('navbar-fixed-top');
                        $(element).removeClass('aj-nav-container-absolute');
                    }
                    else {
                        $(element).removeClass('navbar-fixed-top');
                        $(element).addClass('aj-nav-container-absolute');
                    }
                };
                //Bind event handler on scroll
                windowElement.on('scroll',scope.$apply.bind(scope,onScrollHandler));                
            }

        };
    }]);

使用webpack的新代码抛出错误：

var $= require("jquery");
var angular = require("angular");
var Utilities = require("./../../utilities/Utilities");
var AppUtilities = require("./../../utilities/AppUtilities"); 
module.exports = ['$window',attrs) {
                //Bind event change the postion of AJ Nav on scroll
                var windowElement = angular.element($window);
                var onScrollHandler = function () {
                    //Get current height of iNav.
                    var iNavHeight = $("#iNavNGI_Header").height();
                    if (windowElement.scrollTop() > iNavHeight) {
                        $(element).addClass('navbar-fixed-top');
                        $(element).removeClass('aj-nav-container-absolute');
                    }
                    else {
                        $(element).removeClass('navbar-fixed-top');
                        $(element).addClass('aj-nav-container-absolute');
                    }
                };
                //Bind event handler on scroll
                windowElement.on('scroll',onScrollHandler));                
            }

        };
    }];

Follownig是我得到的异常的堆栈跟踪.

TypeError: windowElement.scrollTop is not a function
    at module.exports.link.onScrollHandler (site.min.js:42181)
    at Scope.$get.Scope.$eval (ite.min.js:25066)
    at Scope.$get.Scope.$apply (site.min.js:25165)
    at eventHandler (site.min.js:12594)

我在我的条目App.js中绑定了这个指令,如下所示

app.directive("ajnav",require("./directives/common/AJNav"));

我尝试了所有可能的选项,但无法修复它.请帮忙.

scrollTop函数是由jquery添加的,你必须在angular之后加载jquery.在这种情况下,您不会将$.fn函数添加到angular.element实例中.在这种情况下你也可以做$.fn.scrollTop.call($window).或$($window).scrollTop()或在角度之前加载jquery,以便您当前的代码按原样运行.

侧注：你不必做$(元素),元素已经是jq(lite / query)包装,它已经有了add / removeClass函数.