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

Question

So This is a Angular 2-cli project and Here's the Problem my third party css and js are in assets folder and all assets css and js link to index page but when i change the route of css and js, they don't load properly... and when hard reload(press enter in url) the current route css and js file loads up properly in one page but again when i change route and go to the other page the problem still persists. 所以这是一个Angular 2-cli项目，这是问题我的第三方css和js在资源文件夹中，所有资产css和js链接到索引页面但是当我改变css和js的路由时，它们没有正确加载...当硬重载（按回车键）时，当前路径css和js文件在一个页面中正确加载但是当我改变路线并转到另一页时问题仍然存在。 please help me. 请帮我。 what i can i do ** 我该怎么办**

Here's The Code : 这是代码：

<!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

You should use the angular-cli.json provided by Angular CLI to load the css files instad of loading them in your index.html. 您应该使用Angular CLI提供的angular-cli.json来加载在index.html中加载它们的css文件instad。 Same goes for your js files. 您的js文件也是如此。

Answer 2

it`s better to use webpack with loaders plugin to inject your js and css codes to the page. 最好使用带有加载器插件的webpack将js和css代码注入页面。 webpack will do it automatically, you just need to add 'style-loader' and 'css-loader' to inject css files and external js files will import by using for example : webpack将自动执行，你只需要添加'style-loader'和'css-loader'来注入css文件，外部js文件将通过使用例如导入：

import '../js/lib.js'

but for external js files you need to add ts file for typescript compiler to know them. 但对于外部js文件，您需要为typescript编译器添加ts文件以了解它们。

to loading css style you have to add this in you appComponent.ts 要加载css样式，你必须在appComponent.ts中添加它

import '../assets/style.css'

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

问题描述

2 个解决方案

解决方案1
0 2017-03-21 17:33:17

解决方案2
0 2017-05-16 19:09:43

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

问题描述

** **

2 个解决方案

解决方案1 0 2017-03-21 17:33:17

解决方案2 0 2017-05-16 19:09:43

解决方案1
0 2017-03-21 17:33:17

解决方案2
0 2017-05-16 19:09:43