Why does using jQuery and CSS plugins give me errors when using in the single...

I had many jQuery and CSS plugins for a single index.html view. I was using it in my application and application was working perfectly. Now I have upgraded my application to ASP.NET Core 2.0 MVC and AngularJs CLI.

Now after the upgrade, I have the one component as index.component.html and index.component.ts.

See my code below. How can I fix this issue, and still achieve the maximum performance?

package.json:

{
"name": "iSol",
"private": true,
"version": "0.0.0",
"scripts": {
"test": "karma start ClientApp/test/karma.conf.js"
},
"devDependencies": {
"@angular/animations": "4.2.5",
"@angular/common": "4.2.5",
"@angular/compiler": "4.2.5",
"@angular/compiler-cli": "4.2.5",
"@angular/core": "4.2.5",
"@angular/forms": "4.2.5",
"@angular/http": "4.2.5",
"@angular/platform-browser": "4.2.5",
"@angular/platform-browser-dynamic": "4.2.5",
"@angular/platform-server": "4.2.5",
"@angular/router": "4.2.5",
"@ngtools/webpack": "1.5.0",
"@types/chai": "4.0.1",
"@types/jasmine": "2.5.53",
"@types/webpack-env": "1.13.0",
"angular2-router-loader": "0.3.5",
"angular2-template-loader": "0.6.2",
"aspnet-prerendering": "^3.0.1",
"aspnet-webpack": "^2.0.1",
"awesome-typescript-loader": "3.2.1",
"bootstrap": "3.3.7",
"chai": "4.0.2",
"css": "2.2.1",
"css-loader": "0.28.4",
"es6-shim": "0.35.3",
"event-source-polyfill": "0.0.9",
"expose-loader": "0.7.3",
"extract-text-webpack-plugin": "2.1.2",
"file-loader": "0.11.2",
"html-loader": "0.4.5",
"isomorphic-fetch": "2.2.1",
"jasmine-core": "2.6.4",
"jquery": "3.2.1",
"json-loader": "0.5.4",
"karma": "1.7.0",
"karma-chai": "0.1.0",
"karma-chrome-launcher": "2.2.0",
"karma-cli": "1.0.1",
"karma-jasmine": "1.1.0",
"karma-webpack": "2.0.3",
"preboot": "4.5.2",
"raw-loader": "0.5.1",
"reflect-metadata": "0.1.10",
"rxjs": "5.4.2",
"style-loader": "0.18.2",
"to-string-loader": "1.1.5",
"typescript": "2.4.1",
"url-loader": "0.5.9",
"webpack": "2.5.1",
"webpack-hot-middleware": "2.18.2",
"webpack-merge": "4.1.0",
"zone.js": "0.8.12"
}
}


home.component.html:

<head>
<!-- Meta -->
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="description" content="">
<meta name="author" content="">
<meta name="keywords" content="MediaCenter, Template, eCommerce">
<meta name="robots" content="all">
<title>MediaCenter - Responsive eCommerce Template</title>
<!-- Bootstrap Core CSS -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<!-- Customizable CSS -->
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/colors/green.css">
<link rel="stylesheet" href="assets/css/owl.carousel.css">
<link rel="stylesheet" href="assets/css/owl.transitions.css">
<link rel="stylesheet" href="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="assets/css/font-awesome.min.css">
<!-- Favicon -->
<link rel="shortcut icon" href="assets/images/favicon.ico">
<!-- HTML5 elements and media queries Support for IE8 : HTML5 shim and Respond.js -->
<!--[if lt IE 9]>
<script src="assets/js/html5shiv.js"></script>
<script src="assets/js/respond.min.js"></script>
<![endif]-->
</head>

<div class="wrapper">
<!-- ============================================================= TOP NAVIGATION ============================================================= -->
<nav class="top-bar animate-dropdown">
<div class="container">
<div class="col-xs-12 col-sm-6 no-margin">
<ul>
<li><a href="index.html">Home</a></li>
<li class="dropdown">
<img scr="assets/images/logo.png" />
<a class="dropdown-toggle" data-toggle="dropdown" href="#change-colors">Change Colors</a>
<ul class="dropdown-menu" role="menu">
<li role="presentation"><a role="menuitem" class="changecolor green-text" tabindex="-1" href="#" title="Green color">Green</a></li>
<li role="presentation"><a role="menuitem" class="changecolor blue-text" tabindex="-1" href="#" title="Blue color">Blue</a></li>
<li role="presentation"><a role="menuitem" class="changecolor red-text" tabindex="-1" href="#" title="Red color">Red</a></li>
<li role="presentation"><a role="menuitem" class="changecolor orange-text" tabindex="-1" href="#" title="Orange color">Orange</a></li>
<li role="presentation"><a role="menuitem" class="changecolor navy-text" tabindex="-1" href="#" title="Navy color">Navy</a></li>
<li role="presentation"><a role="menuitem" class="changecolor dark-green-text" tabindex="-1" href="#" title="Darkgreen color">Dark Green</a></li>
</ul>
</li>
<li><a href="blog.html">Blog</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="contact.html">Contact</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#pages">Pages</a>
<ul class="dropdown-menu" role="menu">
<li><a href="index.html">Home</a></li>
<li><a href="index-2.html">Home Alt</a></li>
<li><a href="category-grid.html">Category - Grid/List</a></li>
<li><a href="category-grid-2.html">Category 2 - Grid/List</a></li>
<li><a href="single-product.html">Single Product</a></li>
<li><a href="single-product-sidebar.html">Single Product with Sidebar</a></li>
<li><a href="cart.html">Shopping Cart</a></li>
<li><a href="checkout.html">Checkout</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact Us</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="blog-fullwidth.html">Blog Full Width</a></li>
<li><a href="blog-post.html">Blog Post</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="terms.html">Terms & Conditions</a></li>
<li><a href="authentication.html">Login/Register</a></li>
<li><a href="404.html">404</a></li>
<li><a href="wishlist.html">Wishlist</a></li>
<li><a href="compare.html">Product Comparison</a></li>
<li><a href="track-your-order.html">Track your Order</a></li>
</ul>
</li>
</ul>
</div><!-- /.col -->
<div class="col-xs-12 col-sm-6 no-margin">
<ul class="right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#change-language">English</a>
<ul class="dropdown-menu" role="menu">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Turkish</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Tamil</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">French</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Russian</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#change-currency">Dollar (US)</a>
<ul class="dropdown-menu" role="menu">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Euro (EU)</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Turkish Lira (TL)</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Indian Rupee (INR)</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Dollar (US)</a></li>
</ul>
</li>
<li><a href="authentication.html">Register</a></li>
<li><a href="authentication.html">Login</a></li>
</ul>
</div><!-- /.col -->
</div><!-- /.container -->
</nav><!-- /.top-bar -->
</div><!-- /.wrapper -->
<!-- JavaScripts placed at the end of the document so the pages load faster -->
<script src="assets/js/jquery-1.10.2.min.js"></script>
<script src="assets/js/jquery-migrate-1.2.1.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="//maps.google.com/maps/api/js?key=AIzaSyDDZJO4F0d17RnFoi1F2qtw4wn6Wcaqxao&sensor=false&amp;language=en"></script>
<script src="assets/js/gmap3.min.js"></script>
<script src="assets/js/bootstrap-hover-dropdown.min.js"></script>
<script src="assets/js/owl.carousel.min.js"></script>
<script src="assets/js/css_browser_selector.min.js"></script>
<script src="assets/js/echo.min.js"></script>
<script src="assets/js/jquery.easing-1.3.min.js"></script>
<script src="assets/js/bootstrap-slider.min.js"></script>
<script src="assets/js/jquery.raty.min.js"></script>
<script src="assets/js/jquery.prettyPhoto.min.js"></script>
<script src="assets/js/jquery.customSelect.min.js"></script>
<script src="assets/js/wow.min.js"></script>
<script src="assets/js/buttons.js"></script>
<script src="assets/js/scripts.js"></script>


home.component.ts:

import { Component } from '@angular/core';
import * as $ from 'jquery';

@Component({
selector: 'home',
templateUrl: './home.component.html'
})
export class HomeComponent {
public name = 'gfggfg';

}

Continue reading...