Question

所以这是一个Angular 2-cli项目，这就是问题所在我的第三方css和js在资产文件夹中和所有资产css和js链接到索引页面但是当我改变css和js的路线时，它们无法正确加载...... 当硬重新加载（按回车键）时，当前路径css和js文件在一个页面中正确加载但是当我更改路径并转到另一页时问题仍然存在。请帮我。我能做什么 **

这是代码：

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Some Title</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <!-- Stylesheets -->
  <link rel="stylesheet" href="/src/assets/bootstrap/css/bootstrap.min.css"/><!-- bootstrap grid -->
  <link rel="stylesheet" href="/src/assets/bootstrap/css/bootstrap-theme.min.css"/><!-- bootstrap theme -->
  <link rel="stylesheet" href="/src/assets/css/color-red.css"/><!-- default template color styles -->
  <link rel="stylesheet" href="/src/assets/css/retina.css"/><!-- retina ready styles -->
  <link rel="stylesheet" href="/src/assets/css/animate.css"/><!-- animation for content -->
  <link rel="stylesheet" href="/src/assets/css/colors-header.css"/><!-- header styles -->
  <link rel="stylesheet" href="/src/assets/css/odometer.min.css"><!-- Number counter -->
  <!-- Magnific pop up plugin css -->
  <link rel="stylesheet" href="/src/assets/css/magnific-popup.css"/>
  <!-- Font icons -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"/><!-- Fontawesome icons css -->
  <!-- Google Web fonts -->
  <link href='https://fonts.googleapis.com/css?family=Poppins:300,400,500,700%7CPlayfair+Display:400,700&amp;subset=latin,latin-ext' rel='stylesheet' type='text/css'>
  <!-- Hamburger menu list -->
  <link rel="stylesheet" href="/src/assets/css/jquery.fatNav.min.css">
  <!-- Main stylesheet -->
  <link rel="stylesheet" href="/src/assets/css/style.css"/><!-- template styles -->
  <link rel="stylesheet" href="/src/assets/css/responsive.css"/><!-- responsive styles -->
</head>
<body>
  <app-root> Loading.....</app-root>

  <div class="loading">
    <h1>Loading...</h1>
  </div>

  <script src="/src/assets/js/jquery-2.1.4.min.js"></script><!-- jQuery library -->
  <script src="/src/assets/bootstrap/js/bootstrap.min.js"></script><!-- .bootstrap script -->
  <script src="/src/assets/js/jquery.scripts.min.js"></script><!-- modernizr -->

  <script src="/src/assets/js/isotope.pkgd.min.js"></script> <!-- jQuery isotope -->
  <script src="/src/assets/js/imagesloaded.pkgd.min.js"></script> <!-- jQuery isotope -->
  <script src="/src/assets/js/jquery.magnific-popup.min.js"></script> <!-- Magnific pop up lightbox -->

  <script src="/src/assets/odometer/odometer.min.js"></script><!-- Odometer -->
  <script src="/src/assets/js/jquery-retina.js"></script><!-- retina -->
  <script src="/src/assets/js/jquery.fatNav.js"></script><!-- retina -->
  <script src="/src/assets/js/volcanno.include.js"></script><!-- custom js functions -->

  <script>
    /* <![CDATA[ */
    jQuery(document).ready(function ($) {
      'use strict';
      VolcannoInclude.contactFormAjax('newsletter');
      $.fatNav();
      jQuery(".number-counter-container").waypoint(function () {
        jQuery(".timer-number").each(function () {
          var v = jQuery(this).data("to");
          var o = new Odometer({
            el: this,
            value: 0,
            duration: 15000
          });
          o.render();
          setInterval(function () {
            o.update(v);
          });
        });

      },{
        offset: "80%",
        triggerOnce: true
      });

      // OPEN PORTFOLIO LIGHTBOX GALLERY
      $('.portfolio-item-hover-button').magnificPopup({
        type: 'image',
        gallery: {
          enabled: true
        }
      });
    });
    /* ]]> */
  </script>

</body>
</html>

**

Here's The Snap Of the Directory Structure.

Answer 1

您应该使用Angular CLI提供的angular-cli.json来加载在index.html中加载它们的css文件instad。你的js文件也一样。

Answer 2

最好使用带有加载器插件的webpack将js和css代码注入页面。 webpack将自动执行，你只需要添加'style-loader'和'css-loader'来注入css文件，外部js文件将通过使用例如导入：

import '../js/lib.js'

但是对于外部js文件，您需要为typescript编译器添加ts文件以了解它们。

要加载css样式，你必须在appComponent.ts

中添加它

import '../assets/style.css'

更改路径资产文件夹css或js未加载时的angular2-cli

**

2 个答案: