How do I import my CSS styles and my JS scripts into an angular project?

Question

How do I import my CSS styles and my JS scripts into an angular project?

Navigation

#1 by (2 votes)

0

I have an Angular 2 project, and would like to import the scripts and stylesheets for my project.

When I'm going to encapsulate my project in sessions, the angular does not properly interpret the files for the stylization of the entire project.

My structure looks like this:

I'dliketogetmyfilesintomyAngularcomponents.Fortheyarenotemulatingproperly.

Obs:Eujáimporteinomeuindextodososmeusarquivosnecessários.Tantona<header>,etambémantesdatagbody.<!doctypehtml><htmllang="pt-br">

<head>
  <meta charset="utf-8">
  <base href="/">

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>TITLE</title>
  <link rel="stylesheet" href="assets/lib/css/ARQUIVO.css" />
  <link rel="stylesheet" href="assets/lib/rateyo/css/ARQUIVO.css" />
  <link rel="stylesheet" href="assets/lib/css/ARQUIVO.min.css" />
  <link rel="stylesheet" href="assets/lib/css/ARQUIVO.css" />
  <link rel="stylesheet" href="assets/lib/css/ARQUIVO.css" />
  <link rel="stylesheet" href="assets/lib/css/ARQUIVO.css" />
  <link rel="stylesheet" href="assets/css/style.css" />
  <link rel="stylesheet" href="assets/css/responsive.css" />
  <script type="text/javascript" src="assets/lib/js/jquery.min.js"></script>
  <script type="text/javascript" src="assets/lib/rateyo/js/jquery.rateyo.js"></script>
  <script type="text/javascript" src="assets/js/rating.js"></script>
</head>

<body>

      <app-root></app-root>
      <script type="text/javascript" src="assets/js/loading.js"></script>
      <script type="text/javascript" src="assets/lib/js/bootstrap.min.js"></script>
      <script type="text/javascript" src="assets/lib/js/material.min.js"></script>
      <script type="text/javascript" src="assets/lib/js/uikit.min.js"></script>
      <script type="text/javascript" src="assets/lib/js/sticky.min.js"></script>
      <script type="text/javascript" src="assets/lib/js/flip.js"></script>
      <script type="text/javascript" src="assets/lib/js/owl.carousel.min.js"></script>
      <script type="text/javascript" src="assets/js/script.js"></script>

    </body>

</html>

javascript typescript front-end angular

asked by anonymous 22.11.2017 / 12:23

1 answer

Upload images: More than one input file with the same name How to do a line break with jquery? [closed]

score 2 · Answer 1

I believe you generated your project using angular-cli , ng new .

If this is the case, you just have to go to your .angular-cli.json , styles and scripts sessions and report an array with all the .css and .js files you want to import. >

So in the build of your application these files will be inserted into your project (in the vendors bundle if I'm not mistaken). I know that the documentation of angular-cli is not one of the best, but a look at the session on .angular-cli.json :

Example:

...
  "styles": [
    "assets/css/style.css"
  ],
  "scripts": [
    "assets/js/script.js"
  ]
...

Warning , adding these files through .angular-cli.json will build them by loaders of webpack , so some warnings may appear in your application because loaders % sometimes give hints on deprecated css attributes or some other tips.