angular - 模块 'undefined' 在 SyntaxError.ZoneAwareError 声明的意外值 'AppModule'

Question

当我使用 npm 版本 4.6.1 运行我的 angular 2 应用程序时，出现以下错误。我的 ng build 和 gulp 在项目上运行良好。任何评论/帮助表示赞赏。谢谢。

@angular/cli: 1.0.0
node: 6.10.0
os: linux x64
@angular/cli: 1.0.0
@angular/common: 2.4.10
@angular/compiler: 2.4.10
@angular/compiler-cli: 2.4.10
@angular/core: 2.4.10
@angular/forms: 2.4.10
@angular/http: 2.4.10
@angular/platform-browser: 2.4.10
@angular/platform-browser-dynamic: 2.4.10
@angular/platform-server: 2.4.10
@angular/router: 3.4.10 

app.module.ts

import { BrowserModule, Title } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { CookieService } from 'angular2-cookie/core';

// shared gaming components
import { UrlParserService } from 'component-ng2-common/lib/url-parser-
service';
import { RequestOptions } from 'component-ng2-common/lib/request-options';
import { NG2CommonModule } from 'component-ng2-common/ng2-common.module';

// application wide
import { AppComponent } from './app.component';
import { routing, appRoutingProviders } from './app-routing.module';
import { LastRouterService } from './last-route.service';
import { FilterControlComponent} from "./shared/reportControls";

// Before
import { CDSEDetailsComponent, DirectDebitBankDetailsComponent, 
MachineDetailsComponent,} from "./reports";
// After
import { CDSEDetailsComponent } from "./reports/cdse-details/cdse-details-
component";
 import { DirectDebitBankDetailsComponent } from "./reports/direct-debit-
bank-details/direct-debit-bank-details-component";
 import { MachineDetailsComponent } from "./reports/machine-details/machine-
details-component";

import {MachineSearchComponent} from "./search/machine-search-component";

@NgModule({
  declarations: [
    AppComponent,

    FilterControlComponent,
    CDSEDetailsComponent,
    DirectDebitBankDetailsComponent,
    MachineDetailsComponent,
    MachineSearchComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    HttpModule,
    routing,
    NG2CommonModule,
  ],
  providers: [appRoutingProviders, LastRouterService, CookieService, 
    UrlParserService, RequestOptions, Title],
  exports: [ FilterControlComponent ],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';
import { Title }     from '@angular/platform-browser';
import { Router, NavigationEnd } from '@angular/router';
import { LastRouterService } from './last-route.service';
import { IdleService } from 'component-ng2-common/component-ng2-common';

@Component({
    selector: "app-project",
    templateUrl: './app.component.html',
})
export class AppComponent {
  public constructor( private titleService: Title, private router: Router, 
lastrouterservice: LastRouterService,
                  private idleService: IdleService) {
    router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        let title = this.getTitle(router.routerState, 
    router.routerState.root).join(' ').replace(/,\s*$/, '');
        titleService.setTitle(title);
      }
    });
  }

  public getTitle(state, parent) {
    let data = [];
    if (parent && parent.snapshot.data && parent.snapshot.data.title) {
      data.push(parent.snapshot.data.title);
    }

    if (state && parent) {
      data.push(this.getTitle(state, state.firstChild(parent)));
    }
    return data;
  }

  public ngOnInit() {
    // 60 secs of no activity = idle then after 20 minutes of further     
    inactivity the user is logged out.
    this.idleService.setupIdle(60, 1200);
  }
}

app-routing.module.ts

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
//Before
import { CDSEDetailsComponent, DirectDebitBankDetailsComponent, MachineDetailsComponent, } from "./reports";
//After
import { CDSEDetailsComponent } from "./reports/cdse-details/cdse-details-component";
import { DirectDebitBankDetailsComponent } from "./reports/direct-debit-bank-details/direct-debit-bank-details-component";
import { MachineDetailsComponent } from "./reports/machine-details/machine-details-component";

import {MachineSearchComponent} from "./search/machine-search-component";

const routes: Routes = [
  {
    component: MachineDetailsComponent,
    data: { menuKey: "pOverview", title: Machine Details" },
    path: "machineDetails/:vId/:gid",
  },
  {
    component: MachineSearchComponent,
    data: { menuKey: "machineSearch", title: "Search for a Machine" },
    path: "machineSearch",
  },
  {
    component: DirectDebitBankDetailsComponent,
    data: { menuKey: "DirectDebitBankDetails", title: "DGR Direct Debit Bank Details" },
    path: "directDebitBankDetails",
  },
  {
    component: CDSEDetailsComponent,
    data : { title : "CDSE Details Report"},
    path: "CDSEDetailsReport",
  },
  {
    redirectTo: '/pOverview',
    path: '',
    data: { menuKey: "pOverview", title: "Ps Overview" },
    pathMatch: 'full'
  }
];

export const appRoutingProviders: any[] = [];

export const routing: ModuleWithProviders = RouterModule.forRoot(routes);

last-route.service.ts

import { Injectable } from '@angular/core';
import { Router, NavigationEnd, NavigationStart } from '@angular/router';

@Injectable()
export class LastRouterService {
  lastRoute = "";

  constructor(router: Router) {
    router.events.pairwise().subscribe((e) => {
      if (e[0] instanceof NavigationEnd && e[1] instanceof NavigationStart) {
        this.lastRoute = (e[0] as NavigationEnd).urlAfterRedirects;
      }
    });
  }
}

app.component.html

<ng2common-site-header></ng2common-site-header>
<div class="full height">
  <app-mainmenu></app-mainmenu>
  <div class="content">
    <router-outlet></router-outlet>
  </div>
  <ng2common-site-footer [jurisdiction]="ABC"></ng2common-site-footer>
</div>

ma​​in.ts

import './polyfills.ts';

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';
import { AppModule } from './app/';

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

platformBrowserDynamic().bootstrapModule(AppModule);

src/app文件夹下的index.ts

export * from "./app.component";
export * from "./app.module";

index.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Title - Project</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="<<uxBaseUrl>>/semantic/semantic.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>
  <script src="<<uxBaseUrl>>/scripts/script-pack.min.js"></script>
  <script src="<<uxBaseUrl>>/scripts/daterangepicker.js"></script>

  <!-- FAVICONS -->
  <link rel="apple-touch-icon" sizes="180x180" href="<<uxBaseUrl>>/favicon/apple-touch-icon.png">
  <link rel="icon" type="image/png" href="<<uxBaseUrl>>/favicon/favicon-32x32.png" sizes="32x32">
  <link rel="icon" type="image/png" href="<<uxBaseUrl>>/favicon/favicon-16x16.png" sizes="16x16">
  <link rel="manifest" href="<<uxBaseUrl>>/favicon/manifest.json">
  <link rel="mask-icon" href="<<uxBaseUrl>>/favicon/safari-pinned-tab.svg" color="#de2828">
  <meta name="theme-color" content="#ffffff">

</head>
<body class="mWrapper">
  <app-project></app-project>
</body>
</html>

控制台错误日志

  Error: Unexpected value 'undefined' declared by the module 'AppModule' at SyntaxError.ZoneAwareError (http://test-project-test.com/vendor.bundle.js:122965:33) at SyntaxError.BaseError [as constructor] (http://test-project-test.com/vendor.bundle.js:92472:16) at new SyntaxError (http://test-project-test.com/vendor.bundle.js:11029:16) at http://test-project-test.com/vendor.bundle.js:23759:40 at Array.forEach (native) at CompileMetadataResolver.getNgModuleMetadata (http://test-project-test.com/vendor.bundle.js:23757:54) at JitCompiler._loadModules (http://test-project-test.com/vendor.bundle.js:59144:64) at JitCompiler._compileModuleAndComponents (http://test-project-test.com/vendor.bundle.js:59104:52) at JitCompiler.compileModuleAsync (http://test-project-test.com/vendor.bundle.js:59070:21) at PlatformRef_._bootstrapModuleWithZone (http://test-project-test.com/vendor.bundle.js:45972:25) at PlatformRef_.bootstrapModule (http://test-project-test.com/vendor.bundle.js:45947:21) at Object.594 (http://test-project-test.com/main.bundle.js:787:124) at __webpack_require__ (http://test-project-test.com/inline.bundle.js:53:30) at Object.1194 (http://test-project-test.com/main.bundle.js:6:18) at __webpack_require__ (http://test-project-test.com/inline.bundle.js:53:30) 

Answer 1

上述错误的解决方案是纠正我导入以下组件的方式

之前

从“./reports”导入 {CDSEDetailsComponent、DirectDebitBankDetailsComponent、MachineDetailsComponent，}；

之后

从“./reports/cdse-details/cdse-details-component”导入{CDSEDetailsComponent}；
从“./reports/direct-debit-bank-details/direct-debit-bank-detai‌ ls-component”导入 { DirectDebitBankDetailsComponent }；
从“./reports/machine-details/machine-details-component”导入{MachineDetailsComponent}；

上面的改动需要在app.module & app-routing.module中进行