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

Posted 2023-02-19

【中文标题】“模板解析错误：\'app\' 不是已知元素”当使用 Webpack2 构建和部署“OK”angular2 应用程序时

【英文标题】：“Template parse errors: 'app' is not a known element” when an 'OK' angular2 app is built with Webpack2 and deployed“模板解析错误：'app' 不是已知元素”当使用 Webpack2 构建和部署“OK”angular2 应用程序时

【发布时间】：2017-05-30 22:46:57

【问题描述】：

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

"未处理的 Promise 拒绝：模板解析错误：'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();
  

这是我的应用模块的 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);

【问题讨论】：

有时我会遇到同样的问题，因为我的模板中存在一些运行时错误。请用更简单的模板替换您的模板（例如：<h1>testing app.component template</h1>）：如果原因在模板中，错误将消失。如果没有，我们将不得不考虑其他可能的原因。

github.com/angular/angular/issues/15860

请粘贴您的 index.html 文件

在 index.html 的正文中，您应该验证有 <app></app>。我通常在 AppComponent.ts 选择器中调用我的 app-root - 但你所拥有的就足够了。

似乎与此重复.. ***.com/a/40407697/495157

【参考方案1】：

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

【参考方案2】：

import NgModule, CUSTOM_ELEMENTS_SCHEMA  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
  ],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA
  ],
  bootstrap: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot([], useHash: false),
    HttpModule,
    AuthModule,
    FirebaseModule,
    HomeModule,
  ]
)

export class AppModule 

在文件中添加如下修改