'CoreUI styles aren't loading in my angular project?

I am trying to get the starter template html code from this website to work in angular.

I made a new project, ran $ git clone https://github.com/coreui/coreui-angular.git, npm install @angular/coreui, npm install coreui, npm install bootstrap, and npm install jquery (I think all I need is coreui but it didn't work so I just started installing a bunch of other things too).
After running some commands in the terminal to download all the things I thought I might need to make this code work, I added a line of code in index.html between the <head></head> tags:

<link rel="stylesheet" href="https://unpkg.com/@coreui/coreui/dist/css/coreui.min.css">

and since that didn't make the website register the styling, I later tried this one too

<link rel="stylesheet" href="https://unpkg.com/browse/@coreui/[email protected]/dist/css/coreui.min.css">

ng serve, npm start, and yarn start don't create the website like I would expect. It doesn't have any styling. I've been trying to figure out why the coreui styling isn't loading and I'm hoping for help. Instead of seeing the sidebar look as it does in the coreui website, it just looks like unorganized text with links on the page.

Here is what I got for npm outdated:

Package                             Current    Wanted   Latest  Location
@angular/animations                 10.0.11   10.0.12  10.0.12  ng-tutorial
@angular/common                     10.0.11   10.0.12  10.0.12  ng-tutorial
@angular/compiler                   10.0.11   10.0.12  10.0.12  ng-tutorial
@angular/compiler-cli               10.0.11   10.0.12  10.0.12  ng-tutorial
@angular/core                       10.0.11   10.0.12  10.0.12  ng-tutorial
@angular/forms                      10.0.11   10.0.12  10.0.12  ng-tutorial
@angular/platform-browser           10.0.11   10.0.12  10.0.12  ng-tutorial
@angular/platform-browser-dynamic   10.0.11   10.0.12  10.0.12  ng-tutorial
@angular/router                     10.0.11   10.0.12  10.0.12  ng-tutorial
@types/node                        12.12.54  12.12.54   14.6.0  ng-tutorial
jasmine-core                          3.5.0     3.5.0    3.6.0  ng-tutorial
karma                                 5.0.9     5.0.9    5.1.1  ng-tutorial
karma-jasmine                         3.3.1     3.3.1    4.0.1  ng-tutorial
rxjs                                  6.5.5     6.5.5    6.6.2  ng-tutorial
ts-node                               8.3.0     8.3.0    9.0.0  ng-tutorial
typescript                            3.9.7     3.9.7    4.0.2  ng-tutorial
zone.js                              0.10.3    0.10.3   0.11.1  ng-tutorial

Some information about my system that I got from ng version:

Angular CLI: 10.0.7
Node: 14.8.0
OS: darwin x64

Angular: 10.0.11
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.1000.7
@angular-devkit/build-angular     0.1000.7
@angular-devkit/build-optimizer   0.1000.7
@angular-devkit/build-webpack     0.1000.7
@angular-devkit/core              10.0.7
@angular-devkit/schematics        10.0.7
@angular/cli                      10.0.7
@ngtools/webpack                  10.0.7
@schematics/angular               10.0.7
@schematics/update                0.1000.7
rxjs                              6.5.5
typescript                        3.9.7
webpack                           4.43.0

Let me know if you have any ideas about what I can do to get the coreui styling to work in my angular project. Thanks so much.

angular core-ui

Solution 1:^[1]

I believe you can solve your problem by importing your needed styles into the global styles file -or wherever else you might need them!-.

This can be done using a simple CSS import at the beginning of your global style sheet which is located under the src/styles.css:

@import url("https://unpkg.com/@coreui/coreui/dist/css/coreui.min.css");

also, don't forget to add the following scripts to the end of the body of your index.html file: note that the order of the scripts is important as they are all dependencies of CoreUI.

<script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/browse/@coreui/[email protected]/dist/js/coreui.min.js"></script>

Good luck!

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1

'CoreUI styles aren't loading in my angular project?

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]