Question

我正在使用this github存储库来构建自己的应用程序。我创建了自己的名为“用户”的自定义模块，并且所有路由都定义完美。当我在用户模块中创建一个组件并运行该应用程序时，每当我单击菜单中的新组件名称时，都不会显示任何内容，而控制台窗口会显示

错误：运行时编译器未加载

我确实试图找出为什么会发生此错误，但是如果在Angular应用程序中发生此错误，则大多数线程仅显示解决方案，但是如果在Electron + Angular中发生该错误则没有解决方案。这是我的代码

pages.module.ts

import { HomeModule } from './home/home.module';
import { MiscellaneousModule } from './miscellaneous/miscellaneous.module';
import { NgModule } from '@angular/core';
import { PagesComponent } from './pages.component';
import { PagesRoutingModule } from './pages-routing.module';
import { ThemeModule } from '../@theme/theme.module';

const PAGES_COMPONENTS = [
  PagesComponent
];

@NgModule({
  imports: [
    PagesRoutingModule,
    ThemeModule,
    HomeModule,
    MiscellaneousModule,
  ],
  declarations: [
    ...PAGES_COMPONENTS
  ],
})
export class PagesModule {
}

pages-routing.module.ts

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

import { HomeComponent } from './home/home.component';
import { NgModule } from '@angular/core';
import { NotFoundComponent } from './miscellaneous/not-found/not-found.component';
import { PagesComponent } from './pages.component';

const routes: Routes = [{
  path: '',
  component: PagesComponent,
  children: [{
    path: 'home',
    component: HomeComponent,
  },
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full',
  }, 
  {
    path: 'users',
    loadChildren: () => import('./users/users.module')
      .then(m => m.UsersModule),
  },
  {
    path: '**',
    component: NotFoundComponent,
  }],
}];

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

pages-menu.ts

import { NbMenuItem } from '@nebular/theme';

export const MENU_ITEMS: NbMenuItem[] = [
  {
    title: 'Users',
    icon: 'nb-person',
    link: '/pages/users',
    children: [
      {
        title: 'Manage Users',
        link: '/pages/users/usersdata',
      }
    ]
  }
 ];

users.module.ts

import { AllusersComponent } from './allusers/allusers.component';
import { FormsModule } from '@angular/forms';
import { NbCardModule } from '@nebular/theme';
import { NgModule } from '@angular/core';
import { ThemeModule } from '../../@theme/theme.module';
import { UsersComponent } from './users.component';
import { UsersRoutingModule } from './users-routing.module';

@NgModule({
    imports : [
        ThemeModule,
        NbCardModule,
        FormsModule, 
        UsersRoutingModule
    ],
    declarations: [
        AllusersComponent, 
        UsersComponent
    ]
})
export class UsersModule { }

users-routing.module.ts

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

import { AllusersComponent } from './allusers/allusers.component';
import { NgModule } from '@angular/core';
import { UsersComponent } from './users.component';

const routes: Routes = [{
    path: '', 
    component: UsersComponent,
    children: [
        {
            path: 'usersdata', 
            component: AllusersComponent
        }
    ]
}];

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

allusers.component.html

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
  <div class="card main-content"> 
      <nb-card-header>
          <div class="row">
            <div class="col-sm-12">
              Upcoming Classes
            </div>
        </div>
      </nb-card-header>

    <div class="body table-responsive">
      <table class="table table-hover table-striped">
          <thead>
              <tr>
                      <th>Date/Time</th>
                      <th>Course</th>
                      <th>Location</th>
                      <th>Instructor</th>
                      <th>Enrolled</th>
                      <th>Actions</th>
              </tr>
          </thead>
          <tbody>
              <tr>
                  <td class="trim">25/6/2019</td>
                  <td class="trim">Chemistry</td>
                  <td class="trim">Islamabad</td>
                  <td class="trim">Shaharyar</td>
                  <td class="trim">Yes</td>     
                  <td class="trim">
                    <nb-select>

                      <nb-option value="2">Edit</nb-option>
                      <nb-option value="3">Delete</nb-option>
                      <nb-option value="4">View</nb-option>
                    </nb-select>
                  </td>
              </tr>
          </tbody>
      </table>
      <div class="row">
        <div class="col-sm-12">
          <button type="button" data-toggle="modal" class="btn btn-primary btn-circle waves-effect waves-circle waves-float pull-right"
              (click)="open()" style="float: right;">
              <i class="fas fa-plus-circle"></i>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

package.json文件脚本

 "scripts": {
    "postinstall": "npm run postinstall:electron && npx electron-builder install-app-deps",
    "postinstall:web": "node postinstall-web",
    "postinstall:electron": "node postinstall",
    "ng": "ng",
    "start": "npm run ng:serve:web",
    "start:electron": "npm run postinstall:electron && npm-run-all -p ng:serve electron:serve",
    "build": "npm run postinstall:electron && npm run electron:tsc && ng build",
    "build:dev": "npm run build -- -c dev --aot",
    "build:prod": "npm run build -- -c production --aot",
    "ng:serve": "ng serve",
    "ng:serve:web": "npm run postinstall:web && ng serve -o",
    "electron:tsc": "tsc main.ts",
    "electron:serve": "wait-on http-get://localhost:4200/ && npm run electron:tsc && electron . --serve",
    "electron:local": "npm run build:prod && electron .",
    "electron:linux": "npm run build:prod && npx electron-builder build --linux",
    "electron:windows": "npm run build:prod && npx electron-builder build --windows",
    "electron:mac": "npm run build:prod && npx electron-builder build --mac",
    "test": "npm run postinstall:web && ng test",
    "test:coverage": "rimraf coverage && npm run test -- --code-coverage",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "e2e": "npm run postinstall:web && ng e2e",
    "lint": "ng lint",
    "lint:fix": "ng lint ngx-admin-demo --fix",
    "lint:styles": "stylelint ./src/**/*.scss",
    "lint:ci": "npm run lint && npm run lint:styles",
    "docs": "compodoc -p src/tsconfig.app.json -d docs",
    "docs:serve": "compodoc -p src/tsconfig.app.json -d docs -s",
    "prepush": "npm run lint:ci",
    "now-build": "npm run build:prod"
  },

Answer 1

在pages-routing.module.ts文件中这样写

 {
    path: 'users',
    loadChildren: './users/users.module#UsersModule'
 }

运行时编译器未加载

1 个答案: