Electron Forge + Angular 4 breaks with `'anonymous' is not a known element`

• I have read the contribution documentation for this project.
• I agree to follow the code of conduct that this project follows, as appropriate.
• I have searched the issue tracker for an issue that matches the one I want to file, without success.

Please describe your issue:

I’ve got a fresh install of Electron Forge with the angular2 template. I bumped the Angular dependencies to ^4.3.1, zone.js to ^0.8.14 and added hammerjs to package.json (to use Angular 4 material components).

I then added the source of a functional NG4 app in the src/app directory.

When running electron-forge start the console output is correct and the app starts, but the DevTools show this error:

Unhandled Promise rejection: Template parse errors:
'anonymous' is not a known element:
1. If 'anonymous' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("tin\Desktop\ef-ng\node_modules\electron-compile\lib\protocol-hook.js:216:25)
    at Generator.next ([ERROR ->]<anonymous>)
    at step (C:\Users\Quentin\Desktop\ef-ng\node_modules\electron-compile\lib\protocol-h"): ng:///C:/Users/Quentin/Desktop/ef-ng/src/app/app.component.html@4:23

Here’s how my app.component.html looks:

<app-main-toolbar></app-main-toolbar>
<app-tree-item-tabs></app-tree-item-tabs>
<app-search-view *ngIf="appState.searchIsVisible"></app-search-view>
<app-media-view *ngIf="appState.activeMedia" [media]="appState.activeMedia"></app-media-view>

If I replace it with this, then it runs OK (but of course this is not what I’m looking for):

<app-main-toolbar></app-main-toolbar>
<app-tree-item-tabs></app-tree-item-tabs>
<app-search-view></app-search-view>

Notice I removed the app-media-view component and the *ngIf on the app-search-view one. I used to use a trick adding moduleId : module.id.split('\\').join('/'), to my @Component declarations, but that doesn’t work here.

I’m really stuck here. Any idea? Thanks!

[justindujardin]

@ebordon thanks, that pointed me in the right direction. Also be on the lookout for a missing reference to moduleId in your components.

In my case I had this:

@Component({
  selector: 'pv-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent {}

But I needed to add moduleId so the template lookup could happen in the proper subdirectory of my project.

@Component({
  moduleId: module.id,
  selector: 'pv-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent {
}

[ebordon]

This is probably a bad reference to a template. Check the routes in your Component declaration. May be there is a typo or something like that.