Почему Angular 9 показывает эту проблему? href может отображать компонент с css и js, но routerLink отображает компонент без js и css - PullRequest
0 голосов
/ 22 апреля 2020

Почему Angular 9 показывает эту проблему? У меня есть компонент «О программе», при попытке перезагрузить страницу, и компонент отображается, но когда я его использую, он отображает компонент, но не может отобразить файлы js и css? Я добавил в индекс все необходимые файлы js и css. html. Я также добавил расположение файлов в Angular. json. Что еще мне нужно было сделать?

app.component. html

<a routerLink="about">about</a>
<router-outlet></router-outlet>

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AboutComponent } from './about/about.component';

const routes: Routes = [
  {path:'about',component:AboutComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

about .component. html


<div id="colorlib-main">
        <div class="colorlib-about">
                <div class="colorlib-narrow-content">
                    <div class="row">
                        <div class="col-md-6"><br>
                            <div class="about-img animate-box" data-animate-effect="fadeInLeft" style="background-image: url(./assets/images/logo.png);">
                            </div>
                        </div>
                        <div class="col-md-6 animate-box" data-animate-effect="fadeInLeft">
                            <div class="about-desc">
                                <span class="heading-meta">Welcome</span>
                                <h2 class="colorlib-heading">Who we are</h2>
                                <p>A Spectrum is a condition that is not limited to a specific set of values but can vary without steps, across a continuum. The word “Spectrum” is particularly used to describe the characteristic colours of visible light after passing through a prism. Light from different sources contains rays of varying wavelengths, each with its own brightness. A prism disperses these rays in different directions, making the spectrum of white light individually visible. Similarly our club “SPECTRUM” is so named as it provides us with different wings homologous to that of the characteristic colours of white light, such as

                                    </p><p>1.Instrumentation and Control<br>

                                    2.Electronics and Embedded systems<br>

                                    3.Design and Promotion<br>

                                </p><p>Under these different wings different areas of electronics engineering practice are covered giving widespread Scope to all our fellow mates to make their talents come to limelight.</p>                         </div>
                            <div class="row padding">
                                <div class="col-md-4 no-gutters animate-box" data-animate-effect="fadeInLeft">
                                    <a href="#" class="steps active">
                                        <p class="icon"><span><i class="icon-check"></i></span></p>
                                        <h3>We are <br>pasionate</h3>
                                    </a>
                                </div>
                                <div class="col-md-4 no-gutters animate-box" data-animate-effect="fadeInLeft">
                                    <a href="#" class="steps">
                                        <p class="icon"><span><i class="icon-check"></i></span></p>
                                        <h3>Honest <br>Dependable</h3>
                                    </a>
                                </div>
                                <div class="col-md-4 no-gutters animate-box" data-animate-effect="fadeInLeft">
                                    <a href="#" class="steps">
                                        <p class="icon"><span><i class="icon-check"></i></span></p>
                                        <h3>Always <br>Improving</h3>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                </div>

<div class="colorlib-services">
                <div class="colorlib-narrow-content">
                    <div class="row">
                        <div class="col-md-6 col-md-offset-3 col-md-pull-3 animate-box" data-animate-effect="fadeInLeft">
                            <span class="heading-meta">Things we deal with?</span>
                            <h2 class="colorlib-heading">Here are some of our expertise</h2>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="colorlib-feature animate-box" data-animate-effect="fadeInLeft">
                                        <div class="colorlib-icon">
                                            <i class="flaticon-worker"></i>
                                        </div>
                                        <div class="colorlib-text">
                                            <h3>Robotics</h3>
                                            <p>The most efficient 'person' in day-to-day works are made by us. </p>
                                        </div>
                                    </div>

                                    <div class="colorlib-feature animate-box" data-animate-effect="fadeInLeft">
                                        <div class="colorlib-icon">
                                            <i class="flaticon-sketch"></i>
                                        </div>
                                        <div class="colorlib-text">
                                            <h3>Data Science</h3>
                                            <p> The world is one big data problem, manipulate the data and you can control the present and the future.</p>
                                        </div>
                                    </div>

                                    <div class="colorlib-feature animate-box" data-animate-effect="fadeInLeft">
                                        <div class="colorlib-icon">
                                            <i class="flaticon-engineering"></i>
                                        </div>
                                        <div class="colorlib-text">
                                            <h3>Application Development</h3>
                                            <p>Creating most efficient solutions to overcome simple to tougher problems. </p>
                                        </div>
                                    </div>

                                    <div class="colorlib-feature animate-box" data-animate-effect="fadeInLeft">
                                        <div class="colorlib-icon">
                                            <i class="flaticon-crane"></i>
                                        </div>
                                        <div class="colorlib-text">
                                            <h3>Graphics Designing</h3>
                                            <p>Looks sell, so we make things look awesome. </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="row">
                                <div class="col-md-6">
                                    <a href="services.html" class="services-wrap animate-box" data-animate-effect="fadeInRight">
                                        <div class="services-img" style="background-image: url(./assets/images/services-1.jpg)"></div>
                                        <div class="desc">
                                            <h3>Robotics</h3>
                                        </div>
                                    </a>
                                    <a href="services.html" class="services-wrap animate-box" data-animate-effect="fadeInRight">
                                        <div class="services-img" style="background-image: url(./assets/images/services-2.jpg)"></div>
                                        <div class="desc">
                                            <h3>Data Science</h3>
                                        </div>
                                    </a>
                                </div>
                                <div class="col-md-6 move-bottom">
                                    <a href="services.html" class="services-wrap animate-box" data-animate-effect="fadeInRight">
                                        <div class="services-img" style="background-image: url(./assets/images/services-4.jpg)"></div>
                                        <div class="desc">
                                            <h3>Application Development</h3>
                                        </div>
                                    </a>
                                    <a href="services.html" class="services-wrap animate-box" data-animate-effect="fadeInRight">
                                        <div class="services-img" style="background-image: url(./assets/images/services-5.jpg)"></div>
                                        <div class="desc">
                                            <h3>Graphics Designing</h3>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <router-outlet></router-outlet>

</div>



...