AngularJS样式不适用于新的环境

时间:2017-09-23 01:02:11

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

我非常需要你。

我的应用程序正在处理旧环境,然后我将相同的源代码移动到新环境中。对我来说似乎(猜测)即使源代码是相同的,样式表和图像也无法加载到新环境中。

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

一些说明,

  • 我。旧的工作环境是NodeJs 6.11,Angular2和 Angular-cli 1.0.0
  • II。新的非工作环境是NodeJs 8.4,Angular4和 Angular-cli 1.4.3
  • III。我把引导程序放在本地 "应用程序/ CSS /引导/ DIST / CSS / bootstrap.min.css"

预计带有样式和徽标的首页。这仍然适用于旧的环境: enter image description here

我在新环境下得到了简单的标记。所有的风格和图像都消失了。右侧的firefox控制台显示那些没有加载。它会与Webpack的新版本有关吗? enter image description here

我的代码 - app.component.html enter image description here

我新的not-working package.json Package.json

我的index.html index.html which load the css

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

祝你好运, 自动运行

2 个答案:

答案 0 :(得分:1)

将最新版本的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-->
],

更改后重启您的项目。

答案 1 :(得分:0)

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

enter image description here