我正在尝试 Angular 9 来学习。所以我尝试将Eterna Bootstrap Theme转换为 angular。
我创建了全新的 Angular 项目
alok@alok-HP-Laptop-14s-cr1:~/tmp/angular$ ng new my-angular-app
我在我的下载目录中下载了引导主题/home/alok/Downloads
然后我将内容复制/home/alok/Downloads/Eterna/assets到目录中的 Angular 项目中assets。所以现在项目src目录的内容是
alok@alok-HP-Laptop-14s-cr1:~/tmp/angular/my-angular-app/src$ tree -L 2
.
├── app
│ ├── app.component.css
│ ├── app.component.html
│ ├── app.component.spec.ts
│ ├── app.component.ts
│ ├── app.module.ts
│ └── app-routing.module.ts
├── assets
│ ├── css
│ ├── img
│ ├── js
│ └── vendor
├── environments
│ ├── environment.prod.ts
│ └── environment.ts
├── favicon.ico
├── index.html
├── main.ts
├── polyfills.ts
├── styles.css
└── test.ts
head在所有这些步骤之后，我将 google 字体链接从下载的主题部分复制index.html到我的 angular 项目index.html中，my-angular-app/src/index.html而不会打扰<base href="/">。所以内容my-angular-app/src/index.html是
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MyAngularApp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
</head>
<body>
<app-root></app-root>
</body>
</html>
body在此之后，我将下载主题部分的内容复制index.html到. 所以内容是 app.component.htmlmy-angular-app/src/app/app.component.htmlmy-angular-app/src/app/app.component.html
<!-- ======= Top Bar ======= -->
<section id="topbar" class="d-none d-lg-block">
<div class="container d-flex">
<div class="contact-info mr-auto">
<i class="icofont-envelope"></i><a href="mailto:contact@example.com">contact@example.com</a>
<i class="icofont-phone"></i> +1 5589 55488 55
</div>
<div class="social-links">
<a href="#" class="twitter"><i class="icofont-twitter"></i></a>
<a href="#" class="facebook"><i class="icofont-facebook"></i></a>
<a href="#" class="instagram"><i class="icofont-instagram"></i></a>
<a href="#" class="skype"><i class="icofont-skype"></i></a>
<a href="#" class="linkedin"><i class="icofont-linkedin"></i></a>
</div>
</div>
</section>
<!-- ======= Header ======= -->
<header id="header">
<div class="container d-flex">
<div class="logo mr-auto">
<h1 class="text-light"><a href="index.html"><span>Eterna</span></a></h1>
<!-- Uncomment below if you prefer to use an image logo -->
<!-- <a href="index.html"><img src="assets/img/logo.png" alt="" class="img-fluid"></a>-->
</div>
<nav class="nav-menu d-none d-lg-block">
<ul>
<li class="active"><a href="index.html">Home</a></li>
<li class="drop-down"><a href="#">About</a>
<ul>
<li><a href="about.html">About Us</a></li>
<li><a href="team.html">Team</a></li>
<li class="drop-down"><a href="#">Drop Down 2</a>
<ul>
<li><a href="#">Deep Drop Down 1</a></li>
<li><a href="#">Deep Drop Down 2</a></li>
<li><a href="#">Deep Drop Down 3</a></li>
<li><a href="#">Deep Drop Down 4</a></li>
<li><a href="#">Deep Drop Down 5</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="services.html">Services</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="pricing.html">Pricing</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav><!-- .nav-menu -->
</div>
</header><!-- End Header -->
<!-- ======= Hero Section ======= -->
<section id="hero">
<div class="hero-container">
<div id="heroCarousel" class="carousel slide carousel-fade" data-ride="carousel">
<ol class="carousel-indicators" id="hero-carousel-indicators"></ol>
<div class="carousel-inner" role="listbox">
<!-- Slide 1 -->
<div class="carousel-item active" style="background: url(assets/img/slide/slide-1.jpg)">
<div class="carousel-container">
<div class="carousel-content">
<h2 class="animated fadeInDown">Welcome to <span>Eterna</span></h2>
<p class="animated fadeInUp">Ut velit est quam dolor ad a aliquid qui aliquid. Sequi ea ut et est quaerat sequi nihil ut aliquam. Occaecati alias dolorem mollitia ut. Similique ea voluptatem. Esse doloremque accusamus repellendus deleniti vel. Minus et tempore modi architecto.</p>
<a href="" class="btn-get-started animated fadeInUp">Read More</a>
</div>
</div>
</div>
<!-- Slide 2 -->
<div class="carousel-item" style="background: url(assets/img/slide/slide-2.jpg)">
<div class="carousel-container">
<div class="carousel-content">
<h2 class="animated fadeInDown">Lorem <span>Ipsum Dolor</span></h2>
<p class="animated fadeInUp">Ut velit est quam dolor ad a aliquid qui aliquid. Sequi ea ut et est quaerat sequi nihil ut aliquam. Occaecati alias dolorem mollitia ut. Similique ea voluptatem. Esse doloremque accusamus repellendus deleniti vel. Minus et tempore modi architecto.</p>
<a href="" class="btn-get-started animated fadeInUp">Read More</a>
</div>
</div>
</div>
<!-- Slide 3 -->
<div class="carousel-item" style="background: url(assets/img/slide/slide-3.jpg)">
<div class="carousel-container">
<div class="carousel-content">
<h2 class="animated fadeInDown">Sequi ea <span>Dime Lara</span></h2>
<p class="animated fadeInUp">Ut velit est quam dolor ad a aliquid qui aliquid. Sequi ea ut et est quaerat sequi nihil ut aliquam. Occaecati alias dolorem mollitia ut. Similique ea voluptatem. Esse doloremque accusamus repellendus deleniti vel. Minus et tempore modi architecto.</p>
<a href="" class="btn-get-started animated fadeInUp">Read More</a>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#heroCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon icofont-rounded-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#heroCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon icofont-rounded-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</section><!-- End Hero -->
<main id="main">
<!-- ======= Featured Section ======= -->
<section id="featured" class="featured">
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="icon-box">
<i class="icofont-computer"></i>
<h3><a href="">Lorem Ipsum</a></h3>
<p>Voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident</p>
</div>
</div>
<div class="col-lg-4 mt-4 mt-lg-0">
<div class="icon-box">
<i class="icofont-image"></i>
<h3><a href="">Dolor Sitema</a></h3>
<p>Minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat tarad limino ata</p>
</div>
</div>
<div class="col-lg-4 mt-4 mt-lg-0">
<div class="icon-box">
<i class="icofont-tasks-alt"></i>
<h3><a href="">Sed ut perspiciatis</a></h3>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>
</div>
</div>
</div>
</div>
</section><!-- End Featured Section -->
<!-- ======= About Section ======= -->
<section id="about" class="about">
<div class="container">
<div class="row">
<div class="col-lg-6">
<img src="assets/img/about.jpg" class="img-fluid" alt="">
</div>
<div class="col-lg-6 pt-4 pt-lg-0 content">
<h3>Voluptatem dignissimos provident quasi corporis voluptates sit assumenda.</h3>
<p class="font-italic">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.
</p>
<ul>
<li><i class="icofont-check-circled"></i> Ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
<li><i class="icofont-check-circled"></i> Duis aute irure dolor in reprehenderit in voluptate velit.</li>
<li><i class="icofont-check-circled"></i> Ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate trideta storacalaperda mastiro dolore eu fugiat nulla pariatur.</li>
</ul>
<p>
Ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum
</p>
</div>
</div>
</div>
</section><!-- End About Section -->
<!-- ======= Services Section ======= -->
<section id="services" class="services">
<div class="container">
<div class="section-title" data-aos="fade-up">
<h2>Our Services</h2>
</div>
<div class="row">
<div class="col-lg-4 col-md-6 d-flex align-items-stretch">
<div class="icon-box">
<div class="icon"><i class="bx bxl-dribbble"></i></div>
<h4><a href="">Lorem Ipsum</a></h4>
<p>Voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi</p>
</div>
</div>
<div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4 mt-md-0">
<div class="icon-box">
<div class="icon"><i class="bx bx-file"></i></div>
<h4><a href="">Sed ut perspiciatis</a></h4>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore</p>
</div>
</div>
<div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4 mt-lg-0">
<div class="icon-box">
<div class="icon"><i class="bx bx-tachometer"></i></div>
<h4><a href="">Magni Dolores</a></h4>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia</p>
</div>
</div>
<div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4">
<div class="icon-box">
<div class="icon"><i class="bx bx-world"></i></div>
<h4><a href="">Nemo Enim</a></h4>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis</p>
</div>
</div>
<div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4">
<div class="icon-box">
<div class="icon"><i class="bx bx-slideshow"></i></div>
<h4><a href="">Dele cardo</a></h4>
<p>Quis consequatur saepe eligendi voluptatem consequatur dolor consequuntur</p>
</div>
</div>
<div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4">
<div class="icon-box">
<div class="icon"><i class="bx bx-arch"></i></div>
<h4><a href="">Divera don</a></h4>
<p>Modi nostrum vel laborum. Porro fugit error sit minus sapiente sit aspernatur</p>
</div>
</div>
</div>
</div>
</section><!-- End Services Section -->
<!-- ======= Clients Section ======= -->
<section id="clients" class="clients">
<div class="container">
<div class="section-title">
<h2>Clients</h2>
<p>Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.</p>
</div>
<div class="owl-carousel clients-carousel">
<img src="assets/img/clients/client-1.png" alt="">
<img src="assets/img/clients/client-2.png" alt="">
<img src="assets/img/clients/client-3.png" alt="">
<img src="assets/img/clients/client-4.png" alt="">
<img src="assets/img/clients/client-5.png" alt="">
<img src="assets/img/clients/client-6.png" alt="">
<img src="assets/img/clients/client-7.png" alt="">
<img src="assets/img/clients/client-8.png" alt="">
</div>
</div>
</section><!-- End Clients Section -->
</main><!-- End #main -->
<!-- ======= Footer ======= -->
<footer id="footer">
<div class="footer-newsletter">
<div class="container">
<div class="row">
<div class="col-lg-6">
<h4>Our Newsletter</h4>
<p>Tamen quem nulla quae legam multos aute sint culpa legam noster magna</p>
</div>
<div class="col-lg-6">
<form action="" method="post">
<input type="email" name="email"><input type="submit" value="Subscribe">
</form>
</div>
</div>
</div>
</div>
<div class="footer-top">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 footer-links">
<h4>Useful Links</h4>
<ul>
<li><i class="bx bx-chevron-right"></i> <a href="#">Home</a></li>
<li><i class="bx bx-chevron-right"></i> <a href="#">About us</a></li>
<li><i class="bx bx-chevron-right"></i> <a href="#">Services</a></li>
<li><i class="bx bx-chevron-right"></i> <a href="#">Terms of service</a></li>
<li><i class="bx bx-chevron-right"></i> <a href="#">Privacy policy</a></li>
</ul>
</div>
<div class="col-lg-3 col-md-6 footer-links">
<h4>Our Services</h4>
<ul>
<li><i class="bx bx-chevron-right"></i> <a href="#">Web Design</a></li>
<li><i class="bx bx-chevron-right"></i> <a href="#">Web Development</a></li>
<li><i class="bx bx-chevron-right"></i> <a href="#">Product Management</a></li>
<li><i class="bx bx-chevron-right"></i> <a href="#">Marketing</a></li>
<li><i class="bx bx-chevron-right"></i> <a href="#">Graphic Design</a></li>
</ul>
</div>
<div class="col-lg-3 col-md-6 footer-contact">
<h4>Contact Us</h4>
<p>
A108 Adam Street <br>
New York, NY 535022<br>
United States <br><br>
<strong>Phone:</strong> +1 5589 55488 55<br>
<strong>Email:</strong> info@example.com<br>
</p>
</div>
<div class="col-lg-3 col-md-6 footer-info">
<h3>About Eterna</h3>
<p>Cras fermentum odio eu feugiat lide par naso tierra. Justo eget nada terra videa magna derita valies darta donna mare fermentum iaculis eu non diam phasellus.</p>
<div class="social-links mt-3">
<a href="#" class="twitter"><i class="bx bxl-twitter"></i></a>
<a href="#" class="facebook"><i class="bx bxl-facebook"></i></a>
<a href="#" class="instagram"><i class="bx bxl-instagram"></i></a>
<a href="#" class="google-plus"><i class="bx bxl-skype"></i></a>
<a href="#" class="linkedin"><i class="bx bxl-linkedin"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="copyright">
© Copyright <strong><span>Eterna</span></strong>. All Rights Reserved
</div>
<div class="credits">
<!-- All the links in the footer should remain intact. -->
<!-- You can delete the links only if you purchased the pro version. -->
<!-- Licensing information: https://bootstrapmade.com/license/ -->
<!-- Purchase the pro version with working PHP/AJAX contact form: https://bootstrapmade.com/eterna-free-multipurpose-bootstrap-template/ -->
Designed by <a href="https://bootstrapmade.com/">BootstrapMade</a>
</div>
</div>
</footer><!-- End Footer -->
<a href="#" class="back-to-top"><i class="icofont-simple-up"></i></a>
在此之后，.js我.css在my-angular-app/angular.json. 所以内容my-angular-app/angular.json是
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"my-angular-app": {
"projectType": "application",
"schematics": {},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/my-angular-app",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": true,
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css",
"src/assets/vendor/bootstrap/css/bootstrap.min.css",
"src/assets/vendor/icofont/icofont.min.css",
"src/assets/vendor/boxicons/css/boxicons.min.css",
"src/assets/vendor/animate.css/animate.min.css",
"src/assets/vendor/owl.carousel/assets/owl.carousel.min.css",
"src/assets/vendor/venobox/venobox.css",
"src/assets/css/style.css"
],
"scripts": [
"src/assets/vendor/jquery/jquery.min.js",
"src/assets/vendor/bootstrap/js/bootstrap.bundle.min.js",
"src/assets/vendor/jquery.easing/jquery.easing.min.js",
"src/assets/vendor/php-email-form/validate.js",
"src/assets/vendor/jquery-sticky/jquery.sticky.js",
"src/assets/vendor/owl.carousel/owl.carousel.min.js",
"src/assets/vendor/waypoints/jquery.waypoints.min.js",
"src/assets/vendor/counterup/counterup.min.js",
"src/assets/vendor/isotope-layout/isotope.pkgd.min.js",
"src/assets/vendor/venobox/venobox.min.js",
"src/assets/js/main.js"
]
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "my-angular-app:build"
},
"configurations": {
"production": {
"browserTarget": "my-angular-app:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "my-angular-app:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css"
],
"scripts": []
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json",
"e2e/tsconfig.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "my-angular-app:serve"
},
"configurations": {
"production": {
"devServerTarget": "my-angular-app:serve:production"
}
}
}
}
}},
"defaultProject": "my-angular-app"
}
现在我已经完成并准备通过以下方式开始服务ng serve
除了标题和客户端显示 Carousel 中 Hero Carousel 中的 Carousel 指示器之外，http://localhost:4200/一切都正常工作。确切的问题在此图中用箭头显示。
我无法找到我错过的东西。如何使轮播指示器像原始主题一样工作？