我在ASP.NET MVC核心应用程序（angularjs2）中使用了jquery主题。 有些部分正常工作，但有些插件无法正常工作。
像自己的旋转木马没有得到图像和显示任何东西。
我已将images文件夹放在angular app文件夹下的根项目目录下，但无论如何都无法工作。
我在这里放置一些代码示例：
请参阅并提出建议。
index.component.html
<div id="hero">
<div id="owl-main" class="owl-carousel owl-inner-nav owl-ui-sm">
<div class="item" style="background-image: url('app/assets/images/sliders/slider01.jpg');">
<div class="container-fluid">
<div class="caption vertical-center text-left">
<div class="big-text fadeInDown-1">
Save up to a<span class="big"><span class="sign">$</span>400</span>
</div>
<div class="excerpt fadeInDown-2">
on selected laptops<br> & desktop pcs or<br> smartphones
</div>
<div class="small fadeInDown-2">
terms and conditions apply
</div>
<div class="button-holder fadeInDown-3">
<a href="single-product.html" class="big le-button ">shop now</a>
</div>
</div>
<!-- /.caption -->
</div>
<!-- /.container-fluid -->
</div>
<!-- /.item -->
<div class="item" style="background-image: url('../assets/images/sliders/slider01.jpg');">
<div class="container-fluid">
<div class="caption vertical-center text-left">
<div class="big-text fadeInDown-1">
Want a<span class="big"><span class="sign">$</span>200</span>Discount?
</div>
<div class="excerpt fadeInDown-2">
on selected <br>desktop pcs<br>
</div>
<div class="small fadeInDown-2">
terms and conditions apply
</div>
<div class="button-holder fadeInDown-3">
<a href="single-product.html" class="big le-button ">shop now</a>
</div>
</div>
<!-- /.caption -->
</div>
<!-- /.container-fluid -->
</div>
<!-- /.item -->
</div>
<!-- /.owl-carousel -->
</div>
图像文件夹目前在assets文件夹中的app文件夹下可用。
这是具有该插件的父/主布局
<!DOCTYPE html>
<html>
<head lang="en">
<base href="/">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
<link href="app/app.component.css" rel="stylesheet" />
<link href="node_modules/assets/css/style.css" rel="stylesheet" />
<link rel="stylesheet" href="node_modules/assets/css/style.css">
<link rel="stylesheet" href="node_modules/assets/css/colors/green.css">
<link rel="stylesheet" href="node_modules/assets/css/owl.carousel.css">
<link rel="stylesheet" href="node_modules/assets/css/owl.transitions.css">
<link rel="stylesheet" href="node_modules/assets/css/animate.min.css">
<!-- Fonts -->
<link href='//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800' rel='stylesheet' type='text/css'>
<!-- Icons/Glyphs -->
<link rel="stylesheet" href="node_modules/Cartjs/assets/css/font-awesome.min.css">
<!-- Favicon -->
<link rel="shortcut icon" href="node_modules/Cartjs/assets/images/favicon.ico">
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<!-- Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script src="node_modules/assets/js/jquery.js"></script>
<script src="node_modules/assets/js/jquery-migrate-1.2.1.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="//maps.google.com/maps/api/js?key=AIzaSyDDZJO4F0d17RnFoi1F2qtw4wn6Wcaqxao&sensor=false&language=en"></script>
<script src="node_modules/assets/js/gmap3.min.js"></script>
<script src="node_modules/assets/js/bootstrap-hover-dropdown.min.js"></script>
<script src="node_modules/assets/js/owl.carousel.min.js"></script>
<script src="node_modules/assets/js/css_browser_selector.min.js"></script>
<script src="node_modules/assets/js/echo.min.js"></script>
<script src="node_modules/assets/js/jquery.easing-1.3.min.js"></script>
<script src="node_modules/assets/js/bootstrap-slider.min.js"></script>
<script src="node_modules/assets/js/jquery.raty.min.js"></script>
<script src="node_modules/assets/js/jquery.prettyPhoto.min.js"></script>
<script src="node_modules/assets/js/jquery.customSelect.min.js"></script>
<script src="node_modules/assets/js/wow.min.js"></script>
<script src="node_modules/assets/js/buttons.js"></script>
<script src="node_modules/assets/js/scripts.js"></script>
<!-- End Customizable plugins For Sale Cart Portal -->
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<pm-app>Loading App...</pm-app>
</body>
</html>
systemjs.config.js
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// angular bundles
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
},
'angular-in-memory-web-api': {
main: './index.js',
defaultExtension: 'js'
}
}
});
})(this);