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％的时间有效。

Answer 2

FeedBackTypes

在文件中添加以下修改

“模板解析错误：'app'不是已知元素”当使用Webpack2构建'OK'angle2应用程序并部署

2 个答案: