Converting a bootstrap 4 html project into Angular 9

A

admin

Administrator
Staff member
So I found a really nice template that I want to use, but it's only HTML using bootstrap. I have found a few tutorials on how to convert a similar project, and it seems pretty straight forward (like <a href="https://frensoltech.wordpress.com/2018/11/06/how-to-convert-html-template-to-angular-6-template/" rel="nofollow noreferrer">here</a>)
I added the first component and the head shows like this (I commented out most but one link tags to work with one at the time):
<pre class="lang-html prettyprint-override">
Code: 
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;title&gt;Some Html Template&lt;/title&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;meta name=&quot;description&quot; content=&quot;&quot; /&gt;
    &lt;meta name=&quot;keywords&quot; content=&quot;&quot; /&gt;
    &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;../../assets/css/animate.css&quot;&gt;
    &lt;!-- &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/bootstrap.min.css&quot;&gt;
    &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/line-awesome.css&quot;&gt;
    &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/line-awesome-font-awesome.min.css&quot;&gt;
    &lt;link href=&quot;vendor/fontawesome-free/css/all.min.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt;
    &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/font-awesome.min.css&quot;&gt;
    &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/jquery.mCustomScrollbar.min.css&quot;&gt;
    &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;lib/slick/slick.css&quot;&gt;
    &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;lib/slick/slick-theme.css&quot;&gt;
    &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/style.css&quot;&gt;
    &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/responsive.css&quot;&gt; --&gt;
&lt;/head&gt;
I added the following to angular.json:
Code: 
&quot;styles&quot;: [
    &quot;src/styles.css&quot;,
    &quot;src/assets/css/animate.css&quot;
],
&quot;scripts&quot;: [
    &quot;node_modules/bootstrap/dist/css/bootstrap.min.css&quot;
]
In styles.css I added:
<pre class="lang-css prettyprint-override">
Code: 
@import &quot;../node_modules/bootstrap/dist/css/bootstrap.min.css&quot;;
I also installed
Code: 
npm i bootstrap ngx-bootstrap jquery tether
When I try to run
Code: 
npm start
I get the following error:
Code: 
ERROR in HostResourceLoader: loader(/Users/felipe/Documents/mtalents/frontend/src/assets/css/animate.css) returned a Promise
When I run it without the link tags, it runs just fine, but all the styling is missing (as in I just get a blob of text).
I haven't modified the script tags but they don't seem to be complaining yet.
Just to be clear I added css, fonts, images, js, libs, vendor folders from the bootstrap template inside src/assets.
I'm not sure what am I missing? Thanks in advance!
 
You must log in or register to reply here.