"模板解析错误:'app'不是已知元素"当使用Webpack2构建'OK'angle2应用程序并进行部署时

Question

我对使用angularfire2的angular(v2.4)应用程序在开发环境(快速服务器)中运行顺畅.当我使用"npm run build"构建它时,Webpack2构建应用程序并将其放入名为"target"的文件夹中.当我使用"npm run server"从目标文件夹运行构建的应用程序时,服务器启动并且浏览器不会显示应用程序的标题.在浏览器的控制台中,我收到此错误:

"未处理的承诺拒绝:模板解析错误:'app'不是已知元素:如果'app'是Angular组件,则验证它是该模块的一部分.如果'app'是Web组件,则添加"CUSTOM_ELEMENTS_SCHEMA"到这个组件的'@ NgModule.schemas'来抑制这个消息."

我在这里为您提供应用程序的应用程序组件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();
  }
}

这是我的app模块的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 {}

这是我的主要内容:

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% 的情况下这都是有效的。