README.md, ni .gitignore, ni licencia) en GitHub con el nombre mpa.Levante el proyecto, con:
ng serve --open
img, js, css y lib) con los recursos de la plantilla.src/assets.De la plantilla, del archivo index.html copie las rutas a los recursos locales que se encuentran en las etiquetas <link> y <script>, p.e.:
<html>
<head>
...
<!-- Libraries Stylesheet -->
<link href="lib/animate/animate.min.css" rel="stylesheet">
<link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
<!-- Customized Bootstrap Stylesheet -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Template Stylesheet -->
<link href="css/style.css" rel="stylesheet">
</head>
<body>
...
<script src="lib/wow/wow.min.js"></script>
<script src="lib/easing/easing.min.js"></script>
<script src="lib/waypoints/waypoints.min.js"></script>
<script src="lib/owlcarousel/owl.carousel.min.js"></script>
<!-- Template Javascript -->
<script src="js/main.js"></script>
</body>
</html>
En el proyecto de Angular, modifique el archivo angular.json con la ruta relativa a los recursos locales. Considere el orden en el que aparecen los recursos en la plantilla, p.e.:
"build": {
...
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/assets/lib/animate/animate.css",
"src/assets/lib/owlcarousel/assets/owl.carousel.css",
"src/assets/css/bootstrap.min.css",
"src/assets/css/style.css",
"src/styles.css"
],
"scripts": [
"node_modules/bootstrap/dist/js/bootstrap.min.js",
"src/assets/lib/wow/wow.min.js",
"src/assets/lib/easing/easing.min.js",
"src/assets/lib/waypoints/waypoints.min.js",
"src/assets/lib/owlcarousel/owl.carousel.min.js",
"src/assets/js/main.js"
]
...
}
De la plantilla: Del archivo index.html, copie las referencias a URL externas, p.e.:
<html>
<head>
...
<!-- Google Web Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500&family=Poppins:wght@200;600;700&display=swap"
rel="stylesheet">
<!-- Icon Font Stylesheet -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css" rel="stylesheet">
...
</head>
<body>
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>
...
</body>
</html>
En el proyecto de Angular: En el archivo index.html, coloque las referencias a URL externas, p.e.:
<html>
<head>
...
<!-- Google Web Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500&family=Poppins:wght@200;600;700&display=swap"
rel="stylesheet">
<!-- Icon Font Stylesheet -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css" rel="stylesheet">
</head>
<body>
<app-root></app-root>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
index.html, copie todas las etiquetas dentro de la etiqueta <body>.
<div id="spinner"> y las etiquetas <script>.src/app/app.component.html, reemplace el contenido por las etiquetas HTML previamente copiadas.
info@example.com a info@example.comimg/user.svg a assets/img/user.svgmain en lugar de master.🅰️📰"@Angular Architecture Best Practices"
— Gergely Szerovay (@GergelySzerovay) November 15, 2023
✍️ by Nisar Ahmedhttps://t.co/VRHqREToSj#angular #javascript #typescript #AngularAddicts
Think there's a lot going on in Angular 17? Well, I'll defer to you... 😉#DEVCommunity #Angularhttps://t.co/xkGzMAtX1A
— The Angular Dev (@TheAngularDev) November 19, 2023
Librería, marco de trabajo, bootstrapping, spa, recursos o assets, entidades HTML