Angular “Uncaught (in promise): ChunkLoadError: Loading chunk 12 failed.”错误

Question

我最近重写了我的 angular 应用程序。之前的项目运行良好，我没有更改我的 django 或 apache2 配置，因为它应该只是插入。

n.b.我已将 django home.html 更改为在适当的文件名中包含“-es2015”。

我目前在检查器中遇到以下错误

Resource interpreted as Stylesheet but transferred with MIME type application/javascript: "http://146.148.41.45/static/assets/js/frontendwikiconverter.js".                  146.148.41.45/:33 
GET https://p.typekit.net/p.css?s=1&k=oov2wcw&ht=tk&f=39203&a=2613646&app=typekit&e=css net::ERR_CONNECTION_REFUSED                                                        oov2wcw.css:1 
Uncaught SyntaxError: Invalid or unexpected token                                  styles.css:1 
Uncaught SyntaxError: Unexpected token '<'                                         12-es5.js:2
ERROR Error: Uncaught (in promise): ChunkLoadError: Loading chunk 12 failed.       main-es5.js:1

我的应用程序模块：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
import { PerfectScrollbarConfigInterface } from 'ngx-perfect-scrollbar';
import { ToastrModule } from 'ngx-toastr';
import { JwtTokenService } from './services/jwt-token.service'
import { IconModule, IconSetModule, IconSetService } from '@coreui/icons-angular';
import { LocalStorageService } from './services/local-storage-service.service';
import { NgxSmartModalModule } from 'ngx-smart-modal';

const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
  suppressScrollX: true
};

import { AppComponent } from './app.component';
import { DefaultLayoutComponent } from './containers';
import { CommonModule } from "@angular/common";

import {AddToPlannerModule} from './views/planner/add-to-planner.module'
import { TooltipModule } from 'ngx-bootstrap/tooltip';


const APP_CONTAINERS = [
  DefaultLayoutComponent
];

import {
  AppAsideModule,
  AppBreadcrumbModule,
  AppHeaderModule,
  AppFooterModule,
  AppSidebarModule,
} from '@coreui/angular';

import { AppRoutingModule } from './app.routing';

import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TabsModule } from 'ngx-bootstrap/tabs';
import { ChartsModule } from 'ng2-charts';
import { AuthorizeGuard } from './services/authorize-guard.service';
import { TokenInterceptor } from './services/http.interceptor'
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { DatePipe } from '@angular/common';
import { IsAdmin } from './services/can-activate-guard.service';


@NgModule({
  imports: [
    BrowserModule,
    CommonModule,
    TooltipModule.forRoot(),
    BrowserAnimationsModule,
    AppRoutingModule,
    AppAsideModule,
    AppBreadcrumbModule.forRoot(),
    AppFooterModule,
    AppHeaderModule,
    AppSidebarModule,
    PerfectScrollbarModule,
    BsDropdownModule.forRoot(),
    TabsModule.forRoot(),
    ChartsModule,
    IconModule,
    IconSetModule.forRoot(),
    HttpClientModule,
    NgxSmartModalModule.forRoot(),
    ToastrModule.forRoot({
      positionClass :'toast-bottom-right'
    }),
    NgbModule,
    AddToPlannerModule
  ],
  declarations: [
    AppComponent,
    ...APP_CONTAINERS,
  ],
  providers: [
    { 
      provide: HTTP_INTERCEPTORS, 
      useClass: TokenInterceptor, 
      multi: true,
      deps: [JwtTokenService]
    },
    {
      provide: LocationStrategy,
      useClass: HashLocationStrategy
    },
    IconSetService,
    JwtTokenService,
    LocalStorageService,
    AuthorizeGuard,
    DatePipe,
    IsAdmin
  ],
  schemas: [
        NO_ERRORS_SCHEMA
  ],
  bootstrap: [ 
    AppComponent 
  ],
  entryComponents: [],
  exports: [
    //AddToPlannerComponent
  ]
})
export class AppModule { }

路由模块：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

// Import Containers
import { DefaultLayoutComponent } from './containers/default-layout/default-layout.component';

import { P404Component } from './views/site-admin/p404/p404.component';
import { P500Component } from './views/site-admin/p500/p500.component';
import { SignInComponent } from './views/useradmin/sign-in/sign-in.component';
import { JoinComponent } from './views/useradmin/join/join.component';
import { HomeComponent } from './views/general/home/home.component'

export const routes: Routes = [
  {
    path: '404',
    component: P404Component,
    data: {
      title: 'Page 404'
    }
  },
  {
    path: '500',
    component: P500Component,
    data: {
      title: 'Page 500'
    }
  },
  {
    path: 'signin',
    component: SignInComponent,
    data: {
      title: 'Sign In'
    }
  },
  {
    path: 'join',
    component: JoinComponent,
    data: {
      title: 'Join KeyStageWiki'
    }
  },
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: '',
    component: DefaultLayoutComponent,
    data: {
      title: 'KeyStageWiki'
    },
    children: [
      {
        path: 'home',
        loadChildren: () => import('./views/general/home/home.module').then(m => m.HomeModule)
      },
      {
        path: 'ad-manager',
        loadChildren: () => import('./views/admin/ad-manager/ad-manager.module').then(m => m.AdManagerModule)
      },
      {
        path: 'general',
        loadChildren: () => import('./views/general/general.module').then(m => m.GeneralModule)
      },
      {
        path: 'planner',
        loadChildren: () => import('./views/planner/planner.module').then(m => m.PlannerModule)
      },
      {
        path: 'user',
        loadChildren: () => import('./views/useradmin/user-admin.module').then(m => m.UserAdminModule)
      },
      {
        path: 'wiki',
        loadChildren: () => import('./views/wiki/wiki.module').then(m => m.WikiModule)
      },
      {
        path: 'lessons',
        loadChildren: () => import('./views/lessons/lessons.module').then(m => m.LessonsModule)
      },
    ]
  },
  { path: '**', component: P404Component }
];

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

Django 项目中的 home.html：

{% load static %}

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <base href="/">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="{% static 'assets/img/keystagewiki.png' %}">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- <link rel="stylesheet" href="{% static 'ang/styles.css' %}"> -->
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">  
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css">
    <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
    <script src="https://cdn.ckeditor.com/4.7.0/full-all/ckeditor.js"></script>

    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" 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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script src="https://cdn.ckeditor.com/4.5.11/full-all/ckeditor.js"></script>

    <link rel="stylesheet" href="https://use.typekit.net/oov2wcw.css">
    <link rel="stylesheet" href="{% static 'assets/css/indigo-pink.css' %}"> 
    <link rel="stylesheet" href="{% static 'assets/css/angular-calendar.css' %}">
    <link rel="stylesheet" href="{% static 'assets/js/frontendwikiconverter.js' %}">
    <link href="../css/style.css" type="text/scss" rel="stylesheet">
    <link rel="stylesheet" href="{% static 'assets/css/ksw.css' %}"> 
  </head>
  <body style="max-width:1250px;margin:auto;" >
    <app-root>
       <img src="https://media.giphy.com/media/MDrmyLuEV8XFOe7lU6/giphy.gif" alt="Loading..." style="position:fixed; top:50%; left:50%; transform: translate(-50%, -50%);"> 
    </app-root>
    <script type="text/javascript" src="{% static 'ang/runtime.js' %}" defer></script>
    <script type="text/javascript" src="{% static 'ang/polyfills.js' %}" defer></script>
    <script type="text/javascript" src="{% static 'ang/main.js' %}" defer></script>
    <script type="text/javascript" src="{% static 'ang/vendor.js' %}" defer></script>
    <script type="text/javascript" src="{% static 'ang/styles.css' %}" defer></script>
    <script type="text/javascript" src="{% static 'ang/scripts.js' %}" defer></script>
  </body>
</html>

我很困，搜索并尝试了在线列出的所有内容。没有进展。有什么建议吗？