'app-messages' is not a known element

[robtong21]

Versions

Angular CLI: 1.7.4
Node: 9.11.1
OS: win32 x64
Angular: 5.2.10
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.7.4
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.2
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.5.3
webpack: 3.11.0

Windows 10

Repro steps

Step 1. Run ng test as directed from https://angular.io/guide/testing after finishing the tutorial from https://angular.io/tutorial (i.e., running ng test using the code from the tutorial).

Step 2. Chrome window automatically opens. Get error about "'router-outlet' is not a known element". Googled that error and found fix. But no such fix found for "'app-messages' is not a known element".

Observed behavior

<!-- Normally this includes a stack trace and some more information. -->

Error: Template parse errors:
'app-messages' is not a known element:
1. If 'app-messages' is an Angular component, then verify that it is part of this module.
2. If 'app-messages' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
</nav>
<router-outlet></router-outlet>
[ERROR ->]<app-messages></app-messages>"): ng:///DynamicTestModule/AppComponent.html@6:0
    at syntaxError (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/compiler/esm5/compiler.js:486:22)
    at TemplateParser.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.TemplateParser.parse (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/compiler/esm5/compiler.js:24674:1)
    at JitCompiler.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.JitCompiler._parseTemplate (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/compiler/esm5/compiler.js:34629:1)
    at JitCompiler.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.JitCompiler._compileTemplate (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/compiler/esm5/compiler.js:34604:1)
    at http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/compiler/esm5/compiler.js:34505:48
    at Set.forEach (<anonymous>)
    at JitCompiler.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.JitCompiler._compileComponents (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/compiler/esm5/compiler.js:34505:1)
    at http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/compiler/esm5/compiler.js:34393:1
    at Object.then (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/compiler/esm5/compiler.js:475:33)
    at JitCompiler.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.JitCompiler._compileModuleAndAllComponents (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/compiler/esm5/compiler.js:34391:1)

Desired behavior

Mention any other details that might be useful (optional)

Ran ng test from my code root directory.

[jiovanniro]

I created a home component that I could not render and kept getting the same error. Here is how I solved it.

I checked the app.module.ts file to see if the component was imported and added to @NgModule declarations. Since it wasn't I added the following:

1. import { HomeComponent } from './home/home.component';

2. @NgModule({
   declarations: [
   AppComponent,
   HomeComponent
   ]

I'm not sure why it wasn't added when the CLI generated the component but this is was my solution. Let me know if it worked for you or what you ended up finding as a solution.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}