I have a project in simple html and I want to convert the project to Angular v18. Please tell me how I can use all my different CSS files in my projects and also js file and also tell me how to use static images in project

<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="assets/css/jquery-ui.min.css" rel="stylesheet" type="text/css">
<link href="assets/css/animate.css" rel="stylesheet" type="text/css">
<link href="assets/css/css-plugin-collections.css" rel="stylesheet" />
<link id="menuzord-menu-skins" href="assets/css/menuzord-skins/menuzord-boxed.css" rel="stylesheet" />
<link href="assets/css/style-main.css" rel="stylesheet" type="text/css">
<link href="assets/css/preloader.css" rel="stylesheet" type="text/css">
<link href="assets/css/custom-bootstrap-margin-padding.css" rel="stylesheet" type="text/css">
<link href="assets/css/responsive.css" rel="stylesheet" type="text/css">
<link href="assets/js/revolution-slider/css/settings.css" rel="stylesheet" type="text/css" />
<link href="assets/js/revolution-slider/css/layers.css" rel="stylesheet" type="text/css" />
<link href="assets/js/revolution-slider/css/navigation.css" rel="stylesheet" type="text/css" />
<link href="assets/css/colors/theme-skin-blue-gary.css" rel="stylesheet" type="text/css"><script src="assets/js/jquery-2.2.0.min.js"></script>

<script src="assets/js/jquery-ui.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/jquery-plugin-collection.js"></script>
<script src="assets/js/revolution-slider/js/jquery.themepunch.tools.min.js"></script>
<script src="assets/js/revolution-slider/js/jquery.themepunch.revolution.min.js"></script>

I have a project in simple html and I want to convert the project to Angular v18. Please tell me how I can use all my different CSS files in my projects and also js file and also tell me how to use static images in project

<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="assets/css/jquery-ui.min.css" rel="stylesheet" type="text/css">
<link href="assets/css/animate.css" rel="stylesheet" type="text/css">
<link href="assets/css/css-plugin-collections.css" rel="stylesheet" />
<link id="menuzord-menu-skins" href="assets/css/menuzord-skins/menuzord-boxed.css" rel="stylesheet" />
<link href="assets/css/style-main.css" rel="stylesheet" type="text/css">
<link href="assets/css/preloader.css" rel="stylesheet" type="text/css">
<link href="assets/css/custom-bootstrap-margin-padding.css" rel="stylesheet" type="text/css">
<link href="assets/css/responsive.css" rel="stylesheet" type="text/css">
<link href="assets/js/revolution-slider/css/settings.css" rel="stylesheet" type="text/css" />
<link href="assets/js/revolution-slider/css/layers.css" rel="stylesheet" type="text/css" />
<link href="assets/js/revolution-slider/css/navigation.css" rel="stylesheet" type="text/css" />
<link href="assets/css/colors/theme-skin-blue-gary.css" rel="stylesheet" type="text/css"><script src="assets/js/jquery-2.2.0.min.js"></script>

<script src="assets/js/jquery-ui.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/jquery-plugin-collection.js"></script>
<script src="assets/js/revolution-slider/js/jquery.themepunch.tools.min.js"></script>
<script src="assets/js/revolution-slider/js/jquery.themepunch.revolution.min.js"></script>

• html
• css
• angular
• assets
• angular.json

• Angular and angularjs are different please add more details to the question related to the framework used. – Naren Murali Commented Mar 12 at 11:08
• I am using angular version 18 – Mandal Sahil Commented Mar 12 at 11:22
• stackoverflow/questions/78387848/… .. the src/assets dir is public by default so it will be enough to recall those file with the path you used. But this question shows that maybe there are deeper misunderstandings.. like you are just going to serve static contents without really taking advantage of the angular framework – Diego D Commented Mar 12 at 13:11

1 Answer 1

The main place will be angular.json, first add the assets/images folder to the assets array, this is the location of all the assets which will served to the front end, this is meant for images to be available.

add this to angular.json:

"assets": ["/assets/images"],

Sample to reference the image in HTML:

<img src="/assets/1.jpg" alt="image"/>

Move your styles to the styles array inside angular.json.

Move your scripts to the scripts array inside angular.json.

  "architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:application",
      "options": {
        "outputPath": "dist/test",
        "index": "src/index.html",
        "browser": "src/main.ts",
        "polyfills": ["zone.js"],
        "tsConfig": "tsconfig.app.json",
        "inlineStyleLanguage": "scss",
        "assets": ["/assets/images"],
        "styles": [
          "assets/css/bootstrap.min.css",
          "assets/css/jquery-ui.min.css",
          "assets/css/animate.css",
          "assets/css/css-plugin-collections.css",
          "assets/css/menuzord-skins/menuzord-boxed.css",
          "assets/css/style-main.css",
          "assets/css/preloader.css",
          "assets/css/custom-bootstrap-margin-padding.css",
          "assets/css/responsive.css",
          "assets/js/revolution-slider/css/settings.css",
          "assets/js/revolution-slider/css/layers.css",
          "assets/js/revolution-slider/css/navigation.css",
          "assets/css/colors/theme-skin-blue-gary.css"
        ],
        "scripts": [
          "assets/js/jquery-2.2.0.min.js",
          "assets/js/jquery-ui.min.js",
          "assets/js/bootstrap.min.js",
          "assets/js/jquery-plugin-collection.js",
          "assets/js/revolution-slider/js/jquery.themepunch.tools.min.js",
          "assets/js/revolution-slider/js/jquery.themepunch.revolution.min.js"
        ]
      },