个人中心
gpt4 book ai didi

javascript - angular 9 loadchildren 不加载 css、js、图像文件

转载 作者：行者123 更新时间：2023-12-05 03:27:32 24 4
gpt4 key购买 nike

这个问题已经问过了，但它对我不起作用，它是 Angular 9 中的新问题。

我的 Angular 9 项目中有 admin 和 catelog 文件夹。对于 admin 文件夹，我尝试加载所有 admin-components，对于 catelog 文件夹，我尝试加载 catelog-components .

CSS、js 和 images 未加载到 catelog 检查下图 enter image description here

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AuthGuard } from './admin/helper/auth.guard';
import { LoginComponent } from './admin/pages/login/login.component';

const adminModule = () => import('./admin/pages/pages.module').then(x => x.PagesModule);
const catelogPageModule = () => import('./catelog/pages/catelog.module').then(x => x.CatelogModule);

const routes: Routes = [
  // catalog url
  { path: '', loadChildren:catelogPageModule },

  //admin url
  { path: 'login', component: LoginComponent },
  { path: 'admin', loadChildren:adminModule, canActivate: [AuthGuard] },

  // otherwise redirect to home
 // { path: '**', redirectTo: 'home' }
  
];

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

catelog.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { CatelogRoutingModule } from './catelog-routing.module';
import { HomeComponent } from './home/home.component';
import { CommonComponent } from './common/common.component';
import { AboutUsComponent } from './about-us/about-us.component';



@NgModule({
  declarations: [
    CommonComponent,
    HomeComponent,
    AboutUsComponent,
  ],
  imports: [
    CommonModule,
    ReactiveFormsModule,
    CatelogRoutingModule,
    FormsModule
  ]
})
export class CatelogModule { }

catelog-routing.module.ts

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

import { CommonComponent } from './common/common.component';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
    {
        path: '', component:CommonComponent,
        children:[
            { path: 'home', component: HomeComponent },
            { path: 'about-us', component: AboutUsComponent },
        ]
    }
];

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

app\catelog\pages\common\common.component.html

<!doctype html>
<html class="no-js" lang="">
   <head>
      <meta charset="utf-8">
      <meta http-equiv="x-ua-compatible" content="ie=edge">
      <title>Title</title>
      <!-- CSS here -->
      <link href="/assets/catelog/assets/css/bootstrap.min.css">
   </head>
   <body>
     
      <!-- header-area -->
      <header>
         <!-- menu-area -->
      </header>
      <!-- header-area-end -->
      
      <!-- Main content -->
      <router-outlet></router-outlet>
      <!-- Main content -->

      <!-- footer-area -->
    <footer class="dark-bg pt-55 pb-80">
        copyrights
    </footer>
    <!-- footer-area-end -->
    <!-- JS here -->
    <script src="/assets/catelog/assets/js/vendor/jquery-3.5.0.min.js"></script>
    <script src="/assets/catelog/assets/js/main.js"></script>
    </body>
    </html>

我的文件夹结构:

enter image description here

Admin folder CSS, js and images working properly, but catelog folder CSS, js and images not loading.

请帮我解决这个问题。

最佳答案

你不应该把整个 <html><body>...</body>在你的组件模板中。 common.component.html应该看起来像:

<header>someHeader</header>
<router-outlet></router-outlet>
<footer>some data</footer>

所以没有 <html>, <body>, <srcipts>等等如果您需要加载 bootstrap.css - 您可以在全局 styles.scss 中进行文件，加载js文件可以使用angular.json(那里有放置额外js的地方)

关于javascript - angular 9 loadchildren 不加载 css、js、图像文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/71459219/

24 4 0
文章推荐： python - 我如何使用 Tweepy 回复某条推文？
文章推荐： Azure 应用程序配置存储 - 使用 Bicep 设置键值标签
文章推荐： c# - Semgrep 找不到带有 'patterns' 部分的两行代码
文章推荐： c++ - 为什么这些 lambda 捕获的值有不同的类型？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com