angular - 未加载运行时编译器
问题描述
我正在使用这个github 存储库来构建我自己的应用程序。我创建了自己的名为 Users 的自定义模块,并且所有路由都定义得很好。当我在用户模块中创建一个组件并运行应用程序时,每当我单击菜单中的新组件名称时,它什么都不显示,控制台窗口显示我
错误:未加载运行时编译器
我确实试图找出为什么会发生这个错误,但是如果它发生在 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 {
}
页面路由.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 { }
用户路由.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"
},
解决方案
在 pages-routing.module.ts 文件中这样写
{
path: 'users',
loadChildren: './users/users.module#UsersModule'
}
推荐阅读
- matlab - 如何在 MATLAB 中求解包含符号的方程组?
- sql-server - SQL Server 机器学习服务 - 无法启动运行时。ErrorCode 0x80070032: 50(不支持该请求。)
- java - 使用 Neo4j 的休眠 OGM - 与服务器的应用程序连接失败
- flask - Flask 上 OAuth 的单元测试
- python - 为什么 OpenCV 会创建奇怪的矩形?
- node.js - multer上传带有正文和验证的文件并将文件名保存到数据库
- c++ - 从 csv 文件加载二维数组大小问题
- javascript - jQuery、JSON 实时搜索
- emacs - 如何在遵守`.gitignore`的同时运行递归`dired-maybe-insert-subdir`?
- vue.js - 有没有人将 Dexie 与 localbase 进行比较?