我在angular-cli基础知识方面遇到了一些问题。在一个基本项目中，我有一个使用一些js脚本的索引页。
示例：
通过这种方式我的页面工作正常。
如果我移动app.component.ts中的代码并使用<app-root></app-root>将其注入，则js脚本无法运行。
我错过了什么吗？
我的index.html
<head>
<!-- head stuff and css imports-->
</head>
<body id="page-top">
<!-- APP ROOT -->
<app-root>Loading...</app-root>
<!-- jQuery 3 -->
<script src="assets/bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="assets/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Plugin JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="assets/scrollreveal/scrollreveal.min.js"></script>
<script src="assets/magnific-popup/jquery.magnific-popup.min.js"></script>
<!-- Theme JavaScript -->
<script src="assets/js/creative.min.js"></script>
</body>
我的app.component.html
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
</button>
<a href="#page-top" class="page-scroll">
<img src="assets/img/prov/LogoPollicIoT_Verde.png" alt="brand" class="navbar-brand">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<a class="page-scroll" href="#about">About</a>
</li>
<li>
<a class="page-scroll" href="#services">Services</a>
</li>
<li>
<a class="page-scroll" href="#portfolio">Portfolio</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
<li>
<a class="page-scroll" href="#page-top">Login</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<header>
<div class="header-content">
<div class="row">
<div class="col-lg-7 col-md-7 text-center">
<div class="header-content-inner header-image">
</div>
</div>
<div class="col-lg-4 col-lg-offset-1 text-center">
<div>
<div>
<div class="col-lg-12">
<img src="assets/img/prov/LogoPollicIoT_Verde.png" class="img-responsive" alt="">
</div>
<h3 id="homeHeading" class="colorBlack"></h3>
<hr>
<p class="colorBlack"></p>
</div>
<div class="well well-sm form-background-color">
<h2>Log in</h2>
<form>
<div class="form-group">
<input type="email" class="form-control" placeholder="Email" ng-model="user.email">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password" ng-model="user.password" ng-minlength="6">
</div>
<div class="alert alert-danger" ng-if="home.error">
<strong>There was an error: </strong> {{error.error}}{{error.error}}
<br>Error...
</div>
<button class="btn btn-primary" ng-click="home.login()">Log in</button>
<a class="btn btn-default" ng-click="home.signup()">Sign Up</a>
</form>
</div>
</div>
</div>
</div>
<a href="#about" class="btn btn-primary btn-xl page-scroll">Find out more</a>
</div>
</header>
<!-- other stuff as section-->
这是索引html和注入的组件的代码。 js创意和其他用于一些平滑的动作，如果不在主要部分，更改导航栏等。