CODEWITHSUNDEEP
htmlcsstwitter-bootstrapangularangular-cli
Autorun
Autorun

Reputation: 319

AngularJS style not working on a new enviornment

I am in serious need of your you.

My application is working on an old environment, then I moved the same source code to a new environment. It seems (guessing) to me that the stylesheet and images couldn't be loaded on the new environment even though the source code is the same.

Any suggestion and help are highly appreciated.

Some notes,

Expected first page with style and logo. This is still working on the old env: enter image description here

I got the plain mark-up below on the new environment. All the styles and images are gone. The firefox console on the right hand side showed that those are not loaded. Will it related to the new version of Webpack? enter image description here

My code - app.component.html enter image description here

My new not-working package.json Package.json

My index.html index.html which load the css

Please kindly help. I am a beginner on HTML and AngularJS. Please kindly let me know if I need to provide more information or I need to upgrade some modules.

Best regards, Autorun

Upvotes: 0

Views: 796

Answers (2)

Autorun
Autorun

Reputation: 319

This is to continue on Chandru's answer. It works. Please see the screenshot of my change. Since I can't post screenshot in comment, I hope it is ok to post here.

enter image description here

Upvotes: 0

Chandru
Chandru

Reputation: 11184

Move your css styles, images and javascript files inside the assets folder in the latest version of angular-cli.

use your images like below from assets folder :

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

And add your stylesheet and javascript file inside the .angular-cli.json

"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-->
],

After changes restart your porject.

Upvotes: 1

Related Questions