找不到“AppModule”ngx-rocket metronic 主题的 NgModule 元数据中的错误答案

【问题标题】：ERROR in No NgModule metadata found for 'AppModule' ngx-rocket metronic theme找不到“AppModule”ngx-rocket metronic 主题的 NgModule 元数据中的错误
【发布时间】：2020-02-05 19:25:19
【问题描述】：

命令

[ ] 新
[x] 构建
[x] 发球
[ ] 测试
[ ] e2e
[ ] 生成
[ ] 添加
[ ] 更新
[ ] 棉绒
[ ] xi18n
[ ] 运行
[ ] 配置
[ ] 帮助
[ ] 版本
[ ] 文档

这是回归吗？

它开始在同一个版本中发生，没有任何形式的版本升级。

说明

BUG 有 2 个部分。 1 在 serve 期间和 1 在 build 创建期间。

上菜时说明

如果要说清楚的话，只能说这个bug是在做开发的时候出现的，并且在那段时间没有对AppModule做任何改动。您点击 npm start 并收到以下错误： “AppModule”未找到 NgModule 元数据中的错误。

你再次保存任何文件，它将再次开始编译并成功编译。

构建过程中的描述

它运行构建并失败并出现以下错误： members.hasOwnProperty 中的错误不是函数

????最小复制

我不知道如何复制它。它发生在开发过程中，并且没有对任何包进行任何升级。

????异常或错误

发球例外：

除了上面描述的错误，没有发现异常。

BUILD 异常：

除了上面的错误，没有发现异常。但我还是会在这里放一些细节：

0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli   'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli   'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'run',
1 verbose cli   'build'
1 verbose cli ]
2 info using npm@6.12.1
3 info using node@v12.13.1
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle xxxx-ers@1.0.0~prebuild: xxxx-ers@1.0.0
6 info lifecycle xxxx-ers@1.0.0~build: xxxx-ers@1.0.0
7 verbose lifecycle xxxx-ers@1.0.0~build: unsafe-perm in lifecycle true
8 verbose lifecycle xxxx-ers@1.0.0~build: PATH: ...
9 verbose lifecycle xxxx-ers@1.0.0~build: CWD: C:\Projects\ERS\Repositories\xxxx.ERS.UI
10 silly lifecycle xxxx-ers@1.0.0~build: Args: [ '/d /s /c', 'npm run env -s && ng build --prod' ]
11 silly lifecycle xxxx-ers@1.0.0~build: Returned: code: 1  signal: null
12 info lifecycle xxxx-ers@1.0.0~build: Failed to exec build script
13 verbose stack Error: xxxx-ers@1.0.0 build: `npm run env -s && ng build --prod`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\index.js:332:16)
13 verbose stack     at EventEmitter.emit (events.js:210:5)
13 verbose stack     at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:210:5)
13 verbose stack     at maybeClose (internal/child_process.js:1021:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:283:5)
14 verbose pkgid xxxx-ers@1.0.0
15 verbose cwd C:\Projects\ERS\Repositories\xxxx.ERS.UI
16 verbose Windows_NT 10.0.17134
17 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "build"
18 verbose node v12.13.1
19 verbose npm  v6.12.1
20 error code ELIFECYCLE
21 error errno 1
22 error xxxx-ers@1.0.0 build: `npm run env -s && ng build --prod`
22 error Exit status 1
23 error Failed at the xxxx-ers@1.0.0 build script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

我的环境

Angular CLI: 8.3.22
Node: 12.13.1
OS: win32 x64
Angular: 8.2.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router, service-worker

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.800.6
@angular-devkit/build-angular      0.800.6
@angular-devkit/build-optimizer    0.800.6
@angular-devkit/build-webpack      0.800.6
@angular-devkit/core               8.0.6
@angular-devkit/schematics         8.3.22
@angular/cdk                       8.2.3
@angular/cli                       8.3.22
@angular/material                  8.2.3
@angular/material-moment-adapter   8.2.3
@ngtools/webpack                   8.0.6
@schematics/angular                8.3.22
@schematics/update                 0.803.22
rxjs                               6.5.4
typescript                         3.4.5
webpack                            4.30.0

还有什么相关的吗？ 我已经执行了我在之前报告的问题中发现的几乎所有工作，但没有一个工作。比如，将 AppModule 添加到 tsconfig.app.json。确保const bootstrap = () => platformBrowserDynamic().bootstrapModule(AppModule); 在main.ts 的一行中。和许多其他步骤。但它们都不起作用。请帮忙。

我的 main.ts

/*
 * Entry point of the application.
 * Only platform bootstrapping code should be here.
 * For app-specific initialization, use `app/app.component.ts`.
 */

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from '@app/app.module';
import { environment } from '@env/environment';
import { hmrBootstrap } from './hmr';

if (environment.production) {
  enableProdMode();
}

const bootstrap = () => platformBrowserDynamic().bootstrapModule(AppModule);

if (environment.hmr) {
  hmrBootstrap(module, bootstrap);
} else {
  bootstrap().catch(err => console.error(err));
}

我的 App.module.ts

// Angular
import { BrowserModule, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
import { APP_INITIALIZER, NgModule } from '@angular/core';
import { TranslateModule } from '@ngx-translate/core';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { GestureConfig, MatProgressSpinnerModule } from '@angular/material';
import { OverlayModule } from '@angular/cdk/overlay';
// Perfect Scroll bar
import { PERFECT_SCROLLBAR_CONFIG, PerfectScrollbarConfigInterface } from 'ngx-perfect-scrollbar';
// SVG inline
import { InlineSVGModule } from 'ng-inline-svg';
// Env
import { environment } from '@env/environment';
// Hammer JS
import 'hammerjs';
// Copmponents
import { AppComponent } from './app.component';
// Modules
import { AppRoutingModule } from './app-routing.module';
import { CoreModule } from './core/core.module';
import { ThemeModule } from './views/theme/theme.module';
// Partials
import { PartialsModule } from './views/partials/partials.module';
// Layout Services
import {
  //DataTableService,
  //FakeApiService,
  KtDialogService,
  LayoutConfigService,
  LayoutRefService,
  MenuAsideService,
  MenuConfigService,
  MenuHorizontalService,
  PageConfigService,
  SplashScreenService,
  SubheaderService
} from './core/_base/layout';
// CRUD
import { LayoutUtilsService, TypesUtilsService } from './core/_base/crud';
// Config
import { LayoutConfig } from './core/_config/layout.config';
// Highlight JS
import { HIGHLIGHT_OPTIONS, HighlightLanguage } from 'ngx-highlightjs';
import * as typescript from 'highlight.js/lib/languages/typescript';
import * as scss from 'highlight.js/lib/languages/scss';
import * as xml from 'highlight.js/lib/languages/xml';
import * as json from 'highlight.js/lib/languages/json';

// tslint:disable-next-line:class-name
const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
  wheelSpeed: 0.5,
  swipeEasing: true,
  minScrollbarLength: 40,
  maxScrollbarLength: 300
};

export function initializeLayoutConfig(appConfig: LayoutConfigService) {
  // initialize app by loading default demo layout config
  return () => {
    if (appConfig.getConfig() === null) {
      appConfig.loadConfigs(new LayoutConfig().configs);
    }
  };
}

export function hljsLanguages(): HighlightLanguage[] {
  return [
    { name: 'typescript', func: typescript },
    { name: 'scss', func: scss },
    { name: 'xml', func: xml },
    { name: 'json', func: json }
  ];
}

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserAnimationsModule,
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    // environment.isMockEnabled
    //   ? HttpClientInMemoryWebApiModule.forRoot(FakeApiService, {
    //       passThruUnknownUrl: true,
    //       dataEncapsulation: false
    //     })
    //   : [],
    //NgxPermissionsModule.forRoot(),
    PartialsModule,
    CoreModule,
    OverlayModule,
    //AuthModule,
    TranslateModule.forRoot(),
    MatProgressSpinnerModule,
    InlineSVGModule.forRoot(),
    ThemeModule
  ],
  exports: [],
  providers: [
    LayoutConfigService,
    LayoutRefService,
    MenuConfigService,
    PageConfigService,
    KtDialogService,
    //DataTableService,
    SplashScreenService,
    {
      provide: PERFECT_SCROLLBAR_CONFIG,
      useValue: DEFAULT_PERFECT_SCROLLBAR_CONFIG
    },
    {
      provide: HAMMER_GESTURE_CONFIG,
      useClass: GestureConfig
    },
    {
      // layout config initializer
      provide: APP_INITIALIZER,
      useFactory: initializeLayoutConfig,
      deps: [LayoutConfigService],
      multi: true
    },
    {
      provide: HIGHLIGHT_OPTIONS,
      useValue: { languages: hljsLanguages }
    },
    // template services
    SubheaderService,
    MenuHorizontalService,
    MenuAsideService,
    //HttpUtilsService,
    TypesUtilsService,
    LayoutUtilsService
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

我的 app-routing.module.ts

// Angular
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
// Components
import { BaseComponent } from './views/theme/base/base.component';
import { ErrorPageComponent } from './views/theme/content/error-page/error-page.component';
// Auth
import { AuthGuard } from './core/auth';
import { AuthenticationGuard  } from "@app/core";

const routes: Routes = [
  { path: 'auth', loadChildren: () => import('../app/views/pages/auth/auth.module').then(m => m.AuthModule) },

  {
    path: '',
    component: BaseComponent,
    canActivate: [AuthenticationGuard],
    children: [
      {
        path: 'dashboard',
        loadChildren: () => import('../app/views/pages/dashboard/dashboard.module').then(m => m.DashboardModule)
      },
      {
        path: 'kiosk',
        loadChildren: () => import('../app/views/pages/kiosk/kiosk.module').then(m => m.KioskModule)
      },
      {
        path: 'registration',
        loadChildren: () =>
          import('../app/views/pages/registeration/registeration.module').then(c => c.RegisterationModule)
      },
      {
        path: 'error/403',
        component: ErrorPageComponent,
        data: {
          type: 'error-v6',
          code: 403,
          title: '403... Access forbidden',
          desc: "Looks like you don't have permission to access for requested page.<br> Please, contact administrator"
        }
      },
      { path: 'error/:type', component: ErrorPageComponent },
      { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
      { path: '**', redirectTo: 'dashboard', pathMatch: 'full' }
    ]
  },

  { path: '**', redirectTo: 'error/403', pathMatch: 'full' }
];

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

这个问题也可以在 github 上找到： ERROR in No NgModule metadata found for 'AppModule'

任何帮助将不胜感激。请帮忙，因为我需要创建生产版本并将应用程序部署到服务器，但无法执行此操作。

【问题讨论】：

伙计们，我已经能够解决这两个问题，但无法确定产生这些问题的确切原因。我将问题隔离到 SERVICE 并对其进行了调整以使其正常工作。更多细节可以在上面的 github issue 中阅读。一旦我有时间并能够查明错误原因，我会回答我的问题。

标签： angular typescript npm angular8 metronic

【解决方案1】：

好的，结果社区发现了导致此问题的问题。其中之一是角度编译器本身的问题。详情请参考以下链接：

NG Serve issue resolution

NG Build issue resolution

希望这会有所帮助。

【讨论】：