“Template parse errors: 'app' is not a known element” when an 'OK' angular2 app is built with Webpack2 and deployed

Question

My angular (v2.4) application with angularfire2 is running smoothly in the development environment (express server). When I build it with "npm run build" Webpack2 builds the app and puts it into a folder named 'target'. When I run the built app from the target folder using "npm run server", the server starts up and the browser shows nothing expect the title of the app. In the console of the browser I get this error:

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

I am providing the app's app component, index.ts, main.ts here for you. In case, if you want to see the webpack.config.js, I can provide that too.

Here is my app component:

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();
  }
}

Here is index.ts of the my app module:

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 {}

Here is my 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);

sometimes I run into the same issue because of some runtime errors in my templates. please, replace your template with more simple one (for example: `
testing app.component template
`): if the reason is in the template, the error will gone. If it won't, we'll have to thing about other possible reasons. — Johnny Svarog, Apr 19 '17 at 11:38
Within the body of your index.html you should verify there is ``. I normally call mine app-root instead in the AppComponent.ts selector - but what you have should suffice. — JGFMK, Feb 15 '19 at 23:06
Seems a duplicate of this perhaps.. https://stackoverflow.com/a/40407697/495157 — JGFMK, Feb 15 '19 at 23:08

score 1 · Answer 1 · answered Sep 11 '20 at 18:24

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 {}

Add the following modification to the file

score 0 · Answer 2 · answered Jun 11 '19 at 14:54

0

I think you need to update your project. I have encountered this same issue from time to time. Occasionally, I just create a fresh project and copy code over. That works 99% of the time.

answered Jun 11 '19 at 14:54

Thanos T. M.

52
6

“Template parse errors: 'app' is not a known element” when an 'OK' angular2 app is built with Webpack2 and deployed

testing app.component template

2 Answers2