I am new to angular. This is third time i am asking same question on stackoverflow but not any single answer that can solve my problem
I am converting a template in angular component . Copied the source code from template and pasted the code in Index.html of Src folder in angular project and for the images,js,fonts pasted in assets folder . Every thing works fine .But when i moved content section from Index.html to AppComponent.hml Animation used in this template stopped working . I Have been trying this for more than 10 days .No idea where i am doing wrong . i have installed animate.css But No Luck
Template URl :- https://colorlib.com/wp/template/skillhunt/
what I want to do : I want to convert seperate content component section from this template
**Index.html **
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>SkillIndia</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="assets/css/open-iconic-bootstrap.min.css">
<link rel="stylesheet" href="assets/css/animate.css">
<link rel="stylesheet" href="assets/css/owl.carousel.min.css">
<link rel="stylesheet" href="assets/css/owl.theme.default.min.css">
<link rel="stylesheet" href="assets/css/magnific-popup.css">
<link rel="stylesheet" href="assets/css/aos.css">
<link rel="stylesheet" href="assets/css/ionicons.min.css">
<link rel="stylesheet" href="assets/css/bootstrap-datepicker.css">
<link rel="stylesheet" href="assets/css/jquery.timepicker.css">
<link rel="stylesheet" href="assets/css/flaticon.css">
<link rel="stylesheet" href="assets/css/icomoon.css">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<app-root>
</app-root>
<nav class="navbar navbar-expand-lg navbar-dark ftco_navbar bg-dark ftco-navbar-light" id="ftco-navbar">
<div class="container-fluid px-md-4 ">
<a class="navbar-brand" href="index.html">Skillhunt</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#ftco-nav" aria-controls="ftco-nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="oi oi-menu"></span> Menu
</button>
<div class="collapse navbar-collapse" id="ftco-nav">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a href="index.html" class="nav-link">Home</a></li>
<li class="nav-item"><a href="browsejobs.html" class="nav-link">Browse Jobs</a></li>
<li class="nav-item"><a href="candidates.html" class="nav-link">Canditates</a></li>
<li class="nav-item"><a href="blog.html" class="nav-link">Blog</a></li>
<li class="nav-item"><a href="contact.html" class="nav-link">Contact</a></li>
<li class="nav-item cta mr-md-1"><a href="new-post.html" class="nav-link">Post a Job</a></li>
<li class="nav-item cta cta-colored"><a href="job-post.html" class="nav-link">Want a Job</a></li>
</ul>
</div>
</div>
</nav>
<!-- END nav -->
<div class="hero-wrap hero-wrap-2" style="background-image: url('assets/images/bg_1.jpg');" data-stellar-background-ratio="0.5">
<div class="overlay"></div>
<div class="container">
<div class="row no-gutters slider-text align-items-end justify-content-start">
<div class="col-md-12 ftco-animate text-center mb-5">
<p class="breadcrumbs mb-0"><span class="mr-3"><a href="index.html">Home <i class="ion-ios-arrow-forward"></i></a></span> <span>Job Post</span></p>
<h1 class="mb-3 bread">Post A Job</h1>
</div>
</div>
</div>
</div>
</body>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery-migrate-3.0.1.min.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/jquery.easing.1.3.js"></script>
<script src="assets/js/jquery.waypoints.min.js"></script>
<script src="assets/js/jquery.stellar.min.js"></script>
<script src="assets/js/owl.carousel.min.js"></script>
<script src="assets/js/jquery.magnific-popup.min.js"></script>
<script src="assets/js/aos.js"></script>
<script src="assets/js/jquery.animateNumber.min.js"></script>
<script src="assets/js/scrollax.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBVWaKrjvy3MaE7SQ74_uJiULgl1JY0H2s&sensor=false"></script>
<script src="assets/js/google-map.js"></script>
<script src="assets/js/main.js"></script>
</html>
When the content section is Index then animation works fine .but when i move content to appcomponent animation does not work
AppCompnent.html
<router-outlet>
</router-outlet>
<div class="hero-wrap hero-wrap-2" style="background-image: url('assets/images/bg_1.jpg');" data-stellar-background-ratio="0.5">
<div class="overlay"></div>
<div class="container">
<div class="row no-gutters slider-text align-items-end justify-content-start">
<div class="col-md-12 ftco-animate text-center mb-5">
<p class="breadcrumbs mb-0"><span class="mr-3"><a href="index.html">Home <i class="ion-ios-arrow-forward"></i></a></span> <span>Job Post</span></p>
<h1 class="mb-3 bread">Post A Job</h1>
</div>
</div>
</div>
</div>
angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"SkillIndia": {
"projectType": "application",
"schematics": {},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/SkillIndia",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": false,
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css",
"src/assets/css/open-iconic-bootstrap.min.css",
"src/assets/css/animate.css",
"src/assets/css/owl.carousel.min.css",
"src/assets/css/owl.theme.default.min.css",
"src/assets/css/magnific-popup.css",
"src/assets/css/aos.css",
"src/assets/css/ionicons.min.css",
"src/assets/css/ionicons.min.css",
"src/assets/css/bootstrap-datepicker.css",
"src/assets/css/jquery.timepicker.css",
"src/assets/css/flaticon.css",
"assets/css/icomoon.css",
"assets/css/style.css"
],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "SkillIndia:build"
},
"configurations": {
"production": {
"browserTarget": "SkillIndia:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "SkillIndia: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": "SkillIndia:serve"
},
"configurations": {
"production": {
"devServerTarget": "SkillIndia:serve:production"
}
}
}
}
}},
"defaultProject": "SkillIndia"
}
Same issue here using https://colorlib.com/wp/template/pizza/.
But class ftco-animate is in styles.css (imported from template, currently stored in src/assets/css/)
.ftco-animate {
opacity: 0;
visibility: hidden;
}