angular 4 project with custom html theme

Question

I am trying to create a angular 4 project from angular cli and I am trying to import a custom html theme.Theme has and css files js files and some font files. Where put all those files?? in asset folder?? And after that I will import them in index.html as script and links? With that way I am getting some errors "can't resolve the dependencies" like fonts.Exist other way more efficient and "more right" for the angular standards like through angular-cli.json or something else?? I have searched everywhere how I do this but no luck.

Answer 1

Firstly generate new component and you can use this component to design your own template and to add own CSS as follow:-
firstly generate new component ng g component mycomponent new component will be created like below :-

mycomponent
    mytest.component.css
    mytest.component.html
    mytest.component.spec.ts
    mytest.component.ts

then you can add your styles at .CSS file, your all template at .html file and all logical content at .ts file

you can add this component at index.html
<app-mycomponent></app-mycomponent> // app-yourcomponent name

Answer 2

when you create the project i wonder you have a src folder. Inside this folder you have an assets folder: here you can paste all the code and images from your html code. Next, you have these options:

1. Import the static files of your html theme one by one on the index.html in this way:

and so on..

2. In your angular-cli.json file:

   "scripts": ["../src/assets/js/jquery.min.js"],

and so on with all your code scripts. The css styles have a styles array in the same angular-cli.json file.

Last but not least, if your html theme have images and other static content incorporated, you can access all this content in this way:

<img src="../src/assets/images/logo.png" alt=""></a>

so, you access the local folder of any file with ../ and if you want to access a superior folder you can use ../../ and so on until you get in the root folder.