How to import my CSS styles and my JS scripts to an Ângular project?

Asked

Viewed 1,813 times

0

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

When I go to encapsulate my project in sessions, the ângular does not properly interpret the files for the stylization of the whole project.

My structure is as follows:

Estrutura do meu projeto Angular

I would like to get my files into my Angular components. Because they are not emulating properly.

Obs: Eu já importei no meu index todos os meus arquivos necessários. Tanto na <header>, e também antes da tag body.

<!doctype html>
<html lang="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 front-end typescript angular

1 answer

2

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

If that’s the case, just go in your file .angular-cli.json, in the events styles and scripts and report an array with all files .css and .js who wish to import.

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

Example:

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

Heed, by adding these files through .angular-cli.json the build will pass them by loaders of webpack, so some may appear warnings in its application because the loaders sometimes hints at deprecated css attributes or some other tips.

  • Thanks for the answer! But that way I could not generate the results. I did otherwise, explicitly stating even there in HTML5... but I must change soon!

Browser other questions tagged javascript front-end typescript angular

You are not signed in. Login or sign up in order to post.