I am using Angular 7 for a particular project. The App is in two parts: The Admin part and the Landing Page. I used AdminLTE theme for the Admin part of the project. As usual, I put the css in styles.scss as shown below:
@import url(assets/bower_components/bootstrap/dist/css/bootstrap.min.css);
@import url(assets/bower_components/font-awesome/css/font-awesome.min.css);
@import url(assets/bower_components/Ionicons/css/ionicons.min.css);
@import url(assets/bower_components/jvectormap/jquery-jvectormap.css);
@import url(assets/dist/css/AdminLTE.min.css);
@import url(assets/dist/css/skins/_all-skins.min.css);
@import url(assets/plugins/iCheck/square/blue.css);
and the javascript in angular.json
"scripts": [
"src/assets/bower_components/jquery/dist/jquery.min.js",
"src/assets/bower_components/bootstrap/dist/js/bootstrap.min.js",
"src/assets/plugins/iCheck/icheck.min.js",
"src/assets/bower_components/fastclick/lib/fastclick.js",
"src/assets/dist/js/adminlte.min.js",
"src/assets/bower_components/jquery-sparkline/dist/jquery.sparkline.min.js",
"src/assets/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js",
"src/assets/plugins/jvectormap/jquery-jvectormap-world-mill-en.js",
"src/assets/bower_components/jquery-slimscroll/jquery.slimscroll.min.js",
"src/assets/bower_components/chart.js/Chart.js"
],
But for the theme for Landing page, I added the css in landing-page.component.ts as shown:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-landing-page',
templateUrl: './landing-page.component.html',
// styleUrls: ['./landing-page.component.scss']
styleUrls: [
'../../../assets/landing_page/css/animate.css',
'../../../assets/landing_page/css/icomoon.css',
'../../../assets/landing_page/css/themify-icons.css',
'../../../assets/landing_page/css/bootstrap.css',
'../../../assets/landing_page/css/magnific-popup.css',
'../../../assets/landing_page/css/owl.carousel.min.css',
'../../../assets/landing_page/css/owl.theme.default.min.css',
'../../../assets/landing_page/css/flexslider.css',
'../../../assets/landing_page/rslider/css/style.css'
]
})
export class LandingPageComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
However, when I tried to serve the App, I got these errors:
ERROR in ./src/assets/landing_page/css/owl.carousel.min.css
Module Error (from ./node_modules/postcss-loader/src/index.js):
(Emitted value instead of an instance of Error) CssSyntaxError: C:\xampp\htdocs\client-portal-app\src\assets\landing_page\css\owl.carousel.min.css:1:2623: Can’t resolve ‘owl.video.play.png’ in ‘C:\xampp\htdocs\client-portal-app\src\assets\landing_page\css’
ERROR in ./src/app/pages/landing-page/landing-page.component.ts
Module not found: Error: Can’t resolve ‘…/…/…/assets/landing_page/rslider/css/style.css’ in ‘C:\xampp\htdocs\client-portal-app\src\app\pages\landing-page’
Please how do I resolve this error.
Thanks