Question

我第一次在AWS上托管了我的Angular应用程序。配置域，设置安全组。目前它仅托管在HTTP上，因为没有用户或付款信息从站点传输。但是，当我尝试从公共IP访问该站点时，似乎所有javascript都被破坏而且没有运行，因此只有页面上的html组件正在运行。有点痛苦，因为大部分网站是用角度构建的，而大部分的html是通过角度模板构建的。

任何建议都表示赞赏。

我附上了从移动设备（和seo分析仪网站）查看时看到的屏幕截图以及使用此地址从自己的电脑查看时看到的内容

mobile screenshot

fully function screenshot

包含主页的html。

<!DOCTYPE html>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@page session="true"%>

<html  ng-app="landingApp" >
<head>

<link rel="stylesheet" type="text/css" href="./presentationResources/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="./presentationResources/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="./presentationResources/css/bootstrap-custom.css">
<link rel="stylesheet" type="text/css" href="./presentationResources/css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="./presentationResources/css/responsive.css">
<link rel="stylesheet" type="text/css" href="./presentationResources/css/myStyles.css">
<link rel="stylesheet" type="text/css" href="./presentationResources/css/landing.css">
<link rel="stylesheet" type="text/css" href="./presentationResources/css/demoApp.css">
<link rel="stylesheet" type="text/css" href="./presentationResources/css/animation.css">
  <link rel="stylesheet" type="text/css" href="./presentationResources/css/searchFacets.css">
<link rel="stylesheet" type="text/css" href="./presentationResources/css/jquery.bxslider.css">

<link href="https://fonts.googleapis.com/css?family=Lobster|Open+Sans+Condensed:300" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">

 <link rel="shortcut icon" href="./presentationResources/images/favicon.png" type="image/x-icon">

<script type="text/javascript" src="./presentationResources/js/highlighter.js"></script>
<script type="text/javascript" src="./presentationResources/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="./presentationResources/js/jquery-ui.js"></script>
<script type="text/javascript" src="./presentationResources/js/angular.js"></script>
<script type="text/javascript" src="./presentationResources/js/landing.js"></script>
<script type="text/javascript" src="./presentationResources/js/landingAboutUs.js"></script>
<script type="text/javascript" src="./presentationResources/js/landingMainAppDemoSupp.js"></script>
<script type="text/javascript" src="./presentationResources/js/landingMainAppDemo.js"></script>
<script type="text/javascript" src="./presentationResources/js/jquery.bxslider.min.js"></script>

<title>Personnel Tracker</title>
<style>



</style>

<script>



	 $(document).ready(function(){

					 document.getElementById("openByDefault").click();
					 $('.bxslider').bxSlider({
							captions: true
					 });

          var bxViewportHeight = $(".bx-viewport").height();
          console.log("height : "+bxViewportHeight);

          if(bxViewportHeight < 300){
              $(".carouselAndBuzzSection").css("margin-bottom", "20%");
          }else{
              $(".carouselAndBuzzSection").css("margin-bottom", "0%");
          }

    });


</script>

	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="title" content="Personnel Tracker 360" />
  <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<meta name="description" content="Personnel Tracker 360 by Scion Solutions Group empowers organisations to accurately track all aspects of employee management. Matching skillset to current roles and providing performance reporting. " />

</head>
<body>


	<div id="main-box" class="main-box responsive">

<h1 class="pageHeaderLogo responsive"> Personnel Tracker <span>360</span> </h1>
<ul class="tab">
  <li><a href="javascript:void(0)" class="tablinks defaultTab glyphicon glyphicon-blackboard"
				onclick="openTab(event, 'welcomeTab')" id="openByDefault" >
				     <span style="font-family: 'Roboto Condensed',sans-serif !important;">Welcome </span></a></li>

  <li><a href="javascript:void(0)" class="tablinks glyphicon glyphicon-home" onclick="openTab(event, 'appTab')">
		  <span style="font-family: 'Roboto Condensed',sans-serif !important;"> Demo App</span></a></li>

  <li><a href="javascript:void(0)" class="tablinks glyphicon glyphicon-info-sign" onclick="openTabAboutUs(event, 'aboutTab')">
		 <span style="font-family: 'Roboto Condensed',sans-serif !important;">About Us</span></a></li>
	<div class="_stickFigureElement responsive"><img class="imgAnime" src='./presentationResources/images/profilePics/stickfigure2.png' /></div>
</ul>




<div id="welcomeTab" class="tabcontent">
    <welcome-page></welcome-page>
</div>
<div id="appTab" class="tabcontent">
    <app-page-demo></app-page-demo>
</div>
<div id="aboutTab" class="tabcontent">
    <about-us-page></about-us-page>
</div>



	</div>


</body>
</html>

我没有远程引用任何JavaScript。

Answer 1

实际上是由这个IE11问题引起的，我的模板没有出现，结果占网站上大部分的html。

https://github.com/angular/material2/issues/234

使用公共IP访问时，AWS托管站点未运行脚本

1 个答案: