angular - “Template parse errors: ' app ' is not a known element” 当使用 Webpack2 构建并部署 'OK' angular2 应用程序时

Question

我使用 angularfire2 的 angular (v2.4) 应用程序在开发环境(快速服务器)中运行顺利。当我使用“npm run build”构建它时，Webpack2 构建应用程序并将其放入名为“target”的文件夹中。当我使用“npm run server”从目标文件夹运行构建的应用程序时，服务器启动并且浏览器除了应用程序的标题外什么也没有显示。在浏览器的控制台中，我收到此错误:

"Unhandled Promise rejection: Template parse errors: 'app' is not aknown element: If 'app' is an Angular component, then verify that itis part of this module. If 'app' is a Web Component then add"CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this componentto suppress this message."

我在这里为您提供应用程序的应用程序组件、index.ts、main.ts。如果您想查看 webpack.config.js，我也可以提供。

这是我的应用组件:

import { Component } from '@angular/core';
import { AuthService } from '../../auth';

@Component({
  selector: 'app',
  template: ` 
    <app-header
      [authenticated]="auth.authenticated"
      (signOut)="signOut()"></app-header>
           
      <router-outlet></router-outlet>
       
     <app-footer
      [authenticated]="auth.authenticated"></app-footer>      
  `
})

export class AppComponent {
  constructor(private auth: AuthService) {}

  signOut(): void {
    this.auth.signOut();
  }
}

这是我的应用程序模块的 index.ts:

import {NgModule} from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule} from '@angular/router';
import { HttpModule } from '@angular/http';

import { AuthModule } from '../auth';
import { FirebaseModule } from '../firebase';
import { HomeModule} from  '../home';


import { AppComponent } from './components/app';
import { AppHeaderComponent } from './components/app-header';
import {AppFooterComponent} from './components/app-footer';

@NgModule({

  declarations: [
    AppComponent,
    AppHeaderComponent,
    AppFooterComponent
  ],
  bootstrap: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot([], {useHash: false}),
    HttpModule,
    AuthModule,
    FirebaseModule,
    HomeModule,
  ]
})

export class AppModule {}

这是我的 main.ts:

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

// AppModule
import { AppModule } from './app';

// common styles
import './common/styles/_styles.scss';


if (process.env.NODE_ENV === 'production') {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

Answer 1

我认为您需要更新您的项目。我不时遇到同样的问题。偶尔，我只是创建一个新项目并将代码复制过来。这在 99% 的时间里都有效。