【问题标题】:AngularJS style not working on a new enviornmentAngularJS 风格不适用于新环境
【发布时间】:2018-03-04 15:21:58
【问题描述】:

我非常需要你。

我的应用程序在旧环境中运行,然后我将相同的源代码移至新环境。在我看来(猜测)样式表和图像无法在新环境中加载,即使源代码相同。

非常感谢任何建议和帮助。

一些笔记,

  • i.旧的工作环境是 NodeJs 6.11、Angular2 和 Angular-cli 1.0.0
  • 二。新的非工作环境是 NodeJs 8.4、Angular4 和 Angular-cli 1.4.3
  • 三。我把引导程序放在本地 "app/css/bootstrap/dist/css/bootstrap.min.css"

预期的第一页带有样式和徽标。这仍然适用于旧环境:

我在下面得到了关于新环境的简单标记。所有的样式和图像都消失了。右侧的 Firefox 控制台显示那些未加载。会不会和新版的Webpack有关?

我的代码 - app.component.html

我的新的不工作的 package.json

我的 index.html

请帮忙。我是 HTML 和 AngularJS 的初学者。 如果我需要提供更多信息或需要升级某些模块,请告诉我。

最好的问候, 自动运行

【问题讨论】:

    标签: html css twitter-bootstrap angular angular-cli


    【解决方案1】:

    这是继续 Chandru 的回答。有用。请查看我更改的屏幕截图。由于无法在评论中发布截图,希望可以在这里发布。

    【讨论】:

      【解决方案2】:

      在最新版本的 angular-cli 中将您的 css 样式、图像和 javascript 文件移动到 assets 文件夹中。

      使用资产文件夹中的如下图片:

      <img alt="image" class="img-circle" src="assets/iamges/logo.png">
      

      并在 .angular-cli.json 中添加样式表和 javascript 文件

      "styles": [
        <!-- "assets/css/style.css" from assets folder -->
        <!-- "../node_modules/bootstrap/dist/css/bootstrap.css" from node modules -->
        "styles.css"
      ],
      "scripts": [
        <!-- "../node_modules/jquery/dist/jquery.js" from node modules js files -->,
        <!-- "../src/assets/js/javascript.js" from inside assets files-->
      ],
      

      更改后重新启动您的项目。

      【讨论】:

      • 您好 Chandru,感谢您的快速帮助。有用!我明白了,但我没有将我的 css 和图像移动到资产文件夹。我在 angular-cli.json 中指定了我现有的文件夹 app/css 和 app/images。有用。 “资产”:[“资产”,“favicon.ico”,“app/css”,“app/images”],
      猜你喜欢
      • 2014-01-09
      • 2019-03-30
      • 2013-11-13
      • 1970-01-01
      • 1970-01-01
      • 2017-01-22
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多