在 webpack 中使用 angular-ui-bootstrap

Posted 2023-02-19

【中文标题】在 webpack 中使用 angular-ui-bootstrap

【英文标题】：Using angular-ui-bootstrap with webpack

【发布时间】：2016-12-09 00:28:34

【问题描述】：

我尝试在 Webpack 中使用 https://github.com/angular-ui/bootstrap：

import angular from 'angular';
import uiRouter from 'angular-ui-router';
import createComponent from './create.component';
import tabs from 'angular-ui-bootstrap/src/tabs/index';

let createModule = angular
    .module('create', [
        uiRouter,
        tabs
    ])
    .component('partnerCreate', createComponent);

export default createModule;

我在浏览器控制台中出现错误：

angular.js:11881 XMLHttpRequest cannot load http://localhost:3300uib/template/tabs/tabset.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.(anonymous function) @ angular.js:11881sendReq @ angular.js:11642serverRequest @ angular.js:11352processQueue @ angular.js:16170(anonymous function) @ angular.js:16186$eval @ angular.js:17444$digest @ angular.js:17257$apply @ angular.js:17552bootstrapApply @ angular.js:1754invoke @ angular.js:4709doBootstrap @ angular.js:1752bootstrap @ angular.js:1772angularInit @ angular.js:1657(anonymous function) @ angular.js:31468i @ jquery.min.js:2fireWith @ jquery.min.js:2ready @ jquery.min.js:2K @ jquery.min.js:2
angular.js:13708 Error: [$compile:tpload] Failed to load template: uib/template/tabs/tabset.html (HTTP status: -1 )
http://errors.angularjs.org/1.5.7/$compile/tpload?p0=uib%2Ftemplate%2Ftabs%2Ftabset.html&p1=-1&p2=
    at angular.js:68
    at handleError (angular.js:19195)
    at processQueue (angular.js:16170)
    at angular.js:16186
    at Scope.$eval (angular.js:17444)
    at Scope.$digest (angular.js:17257)
    at Scope.$apply (angular.js:17552)
    at bootstrapApply (angular.js:1754)
    at Object.invoke (angular.js:4709)
    at doBootstrap (angular.js:1752)

这是我对 Webpack 加载器的配置：

loaders: [
    
        test: /\.js$/, 
        exclude: [/app\/lib/, /node_modules/], 
        loader: 'ng-annotate!babel',
    , 
    test: /\.jade$/, loader: 'jade',
    test: /\.json$/, loader: 'json', 
    test: /\.less$/, loader: 'style!css!less', 
    test: /\.css$/, loader: 'style!css',
    
        test: /\.(eot|woff|woff2|ttf|svg|png|jpg)(\?[a-z0-9=\.]+)?$/, 
        loader: 'url-loader?limit=30000&name=[name]-[hash].[ext]',
     
]

谁能解释我做错了什么？

【问题讨论】：

这是我对 Webpack 加载器的配置：loaders: [ test: /\.js$/, exclude: [/app\/lib/, /node_modules/], loader: 'ng-annotate!babel', test: /\.jade$/, loader: 'jade', test: /\.json$/, loader: 'json', test: /\.less$/, loader: 'style!css!less', test: /\.css$/, loader: 'style!css', test: /\.(eot|woff|woff2|ttf|svg|png|jpg)(\?[a-z0-9=\.]+)?$/, loader: 'url-loader?limit=30000&name=[name]-[hash].[ext]' ]

【参考方案1】：

这里只是冒险猜测，但可能会为您的 XHR 请求添加一个前导斜杠或检查您的代理设置（webpack 开发服务器或浏览器同步？）

angular.js:11881 XMLHttpRequest 无法加载 http://localhost:3300uib/template/...

不是一个有效的 URL...