Develop Reference

Angular 7 :Error with Angular routing **'router-outlet'** is not a known element: [duplicate]

This question already has answers here:
'router-outlet' is not a known element
(24 answers)
Closed 8 months ago.
I have tried to include all imports to the necessary files,But I have got the following error while compiling. How could I solve it?
I have generated four differnet commonents Menu,home,contact,and about.Additional to this thare are also Header component that will later help to contain the memu bar to switch between the differnt components.And also footer component.The app-routing.ts and routes.ts files are also attached with this file,which helps for routing purpose.
'router-outlet' is not a known element:
1. If 'router-outlet' is an Angular component, then verify that it is part of this module.
2. If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the
'#NgModule.schemas' of this component to suppress this message. ("<app-header></app-header>
[ERROR ->]<router-outlet></router-outlet>
<app-footer></app-footer>"): ng:///AppModule/AppComponent.html#1:0
at syntaxError (compiler.js:1021)
at TemplateParser.push../node_modules/#angular/compiler/fesm5 /compiler.js.TemplateParser.parse (compiler.js:14830)
at JitCompiler.push../node_modules/#angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:24018)
at JitCompiler.push../node_modules/#angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:24005)
at compiler.js:23948
at Set.forEach (<anonymous>)
at JitCompiler.push../node_modules/#angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:23948)
at compiler.js:23858
at Object.then (compiler.js:1012)
at JitCompiler.push../node_modules/#angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:23857)
routes.ts file
import { Routes } from '#angular/router';
import { MenuComponent } from '../menu/menu.component';
import { DishdetailComponent } from '../dishdetail/dishdetail.component';
import { HomeComponent } from '../home/home.component';
import { AboutComponent } from '../about/about.component';
import { ContactComponent } from '../contact/contact.component';
export const routes: Routes = [
{ path: 'home', component: HomeComponent },
{ path: 'menu', component: MenuComponent },
{ path: '', redirectTo: '/home', pathMatch: 'full' }
];
app-routing.module.ts file
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { RouterModule, Routes } from '#angular/router';
import { routes } from './routes';
#NgModule({
imports: [
CommonModule,
RouterModule.forRoot(routes)
],
exports: [ RouterModule ],
declarations: []
})
export class AppRoutingModule { }
app.module.ts file
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { MatToolbarModule } from '#angular/material/toolbar';
import {MatListModule} from '#angular/material/list';
import {MatGridListModule} from '#angular/material/grid-list';
import {MatCardModule} from "#angular/material/card";
import {MatButtonModule} from "#angular/material/Button";
import { FlexLayoutModule } from '#angular/flex-layout';
import 'hammerjs';
import { AppComponent } from './app.component';
import { MenuComponent } from './menu/menu.component';
import { FooterComponent} from './footer/footer.component';
import { HeaderComponent} from './header/header.component';
import { DishdetailComponent } from './dishdetail/dishdetail.component';
import { HomeComponent } from './home/home.component'
import { AboutComponent } from './about/about.component';
import { ContactComponent } from './contact/contact.component';
import {DishService} from './services/dish.service';
import {RouterModule} from '#angular/router';
import { AppRoutingModule } from './app-routing/app-routing.module';
#NgModule({
declarations: [
AppComponent,
MenuComponent,
DishdetailComponent,
HeaderComponent,
FooterComponent,
HomeComponent,
AboutComponent,
ContactComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
FlexLayoutModule,
MatToolbarModule,
MatGridListModule,
MatCardModule,
MatButtonModule,
MatListModule,
AppRoutingModule,
RouterModule
],`
`providers: [
DishService
],`
`bootstrap: [AppComponent]`
`})`
export class AppModule { }
app.component.html file
<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

I see you are missing app-routing.module.ts inside the imports of AppModule
#NgModule({
imports: [
CommonModule,
routingModule
],
})
export class AppModule{ }

I noticed that in your app.module.ts file you have back ticks ``` in inappropriate places somewhere around providers & bootstrap array. I copied & pasted this from your own code so you can see it better:
...MatListModule,
AppRoutingModule,
RouterModule
],`
`providers: [
DishService
],`
`bootstrap: [AppComponent]`
`})`
export class AppModule { }
Do this:
Remove all the back ticks in the app.module.ts file like I have done below and restart your terminal. This should solve any problems you are having.
...MatListModule,
AppRoutingModule,
RouterModule
],
providers: [
DishService
],
bootstrap: [AppComponent]
})
export class AppModule { }
I copied and pasted your code and worked on the files you provided information about. With the back ticks removed, your code works fine here on my laptop. Here's the result in the gif below, route works properly & no errors in the console. Example with just home & menu components.
Final result:
I removed all other things that didn't relate to routing from your code so that it would be easier to detect errors. Here's my folder structure.
Folder structure:
And here are the contents of my files:
route.ts file:
import { Routes } from '#angular/router';
import { MenuComponent } from './menu/menu.component';
import { HomeComponent } from './menu/home.component';
export const routes: Routes = [
{ path: 'home', component: HomeComponent },
{ path: 'menu', component: MenuComponent },
{ path: '', redirectTo: '/home', pathMatch: 'full' }
];
app.module.ts file:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
import { MenuComponent } from './menu/menu.component';
import { HomeComponent } from './menu/home.component';
import { AppRoutingModule } from './app-routing.module';
import { RouterModule } from '#angular/router';
#NgModule({
declarations: [
AppComponent,
HomeComponent,
MenuComponent
],
imports: [
BrowserModule,
AppRoutingModule,
RouterModule
],
providers: [
],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.ts file:
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
template: `
<router-outlet></router-outlet>
`
})
export class AppComponent {
}
app-routing.module.ts:
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { RouterModule, Routes } from '#angular/router';
import { routes } from './routes';
#NgModule({
imports: [
CommonModule,
RouterModule.forRoot(routes)
],
exports: [ RouterModule ],
declarations: []
})
export class AppRoutingModule { }
menu.component.ts:
import { Component } from '#angular/core';
#Component({
template: '<h1>Menu Component</h1>'
})
export class MenuComponent {
}
home.component.ts:
import { Component } from '#angular/core';
#Component({
template: '<h1>Home Component</h1>'
})
export class HomeComponent {
}
Like I said, once I removed those unnecessary back ticks from the app.module.ts, your code worked fined with no errors.

I have started everything from scratch.Then my issue was fixed.I don't exactly know where is my problem.But,probably I have made routes file in separate folder.Making routes file in app-routing folder, fixed my issue.

Custom components are not known elements in Angular CLI app

I am looking at learning Angular 8 with the Angular CLI.
I have added two new components to a core module which i have then imported to the app module.
When I try to render the components in my app html the 'not known element' error is thrown in the console.
I am unsure as to why?
Here is my app.module.ts
import { BrowserModule } from "#angular/platform-browser";
import { NgModule } from "#angular/core";
import { AppComponent } from "./app.component";
import { NoopAnimationsModule } from "#angular/platform-browser/animations";
import { CoreModule } from "./core/core.module";
#NgModule({
declarations: [AppComponent],
imports: [BrowserModule, NoopAnimationsModule, CoreModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
My core.module.ts
import { NgModule } from "#angular/core";
import { CommonModule } from "#angular/common";
import { InputComponent } from "../input/input.component";
import { GraphComponent } from "../graph/graph.component";
#NgModule({
declarations: [InputComponent, GraphComponent],
imports: [CommonModule],
exports: [InputComponent, GraphComponent]
})
export class CoreModule {}
app.component.html
<div>
<InputComponent></InputComponent>
<GraphComponent></GraphComponent>
</div>
And an example of one of the custom components:
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-input',
templateUrl: './input.component.html',
styleUrls: ['./input.component.scss']
})
export class InputComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}

I just realised that I am not referring to the components with the correct selectors!
I should be using: app-input & app-graph in the app.component.html.

why module not found error in angular

I am getting error in module not found error I already install that module .
here is my code
https://stackblitz.com/edit/angular-bup8gb
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { HttpClientModule } from '#angular/common/http'
import { DataService } from './dataservice'; // our custom service, see below
import { AppComponent } from './app.component';
#NgModule({
imports: [ BrowserModule ,HttpClientModule],
providers: [DataService],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }

ERROR while adding custom module to parent app module in angular

I am trying to add new module to make my angular application more modular and for lazy loading.
app.module
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { HttpModule,BrowserXhr } from "#angular/http";
import { LabService } from './lab/lab.service';
import { FormsModule } from '#angular/forms';
import { AppComponent } from './app.component';
import { OphistoryModule } from './Ophistory/ophistory.Module' //after adding this module ERROR is thrown
#NgModule({
imports:[
BrowserModule,
HttpModule,
FormsModule,
RouterModule.forRoot([
{path: 'labDetails/:labName',component:LabDetailsComponent},
{path:'showRoboLog/:labName',component:RoboLogComponent},
{path:'',component:LabComponent}
]),
OphistoryModule
],
declarations: [
AppComponent
],
bootstrap:[ AppComponent ]
})
export class AppModule {}
app.component
import { Component } from '#angular/core';
import { Http } from '#angular/http';
import { LabComponent } from './lab/lab.component';
import { LabService } from './lab/lab.service';
#Component({
selector: 'my-app',
template: `
<router-outlet></router-outlet>
`,
providers: [LabService]
})
export class AppComponent {
constructor() {
}
pageTitle: string = 'ABC';
}
The problem I am facing after adding the module OphistoryModule is an error message saying
my-app' is not a known element:
But when I give the same name to the selector of my newly added module it is working fine.
Here are the custom module and component
ophistory.module
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser'
import { OphistoryComponent } from './ophistory.component'
import {CommonModule} from '#angular/common'
#NgModule({
imports: [RouterModule.forChild([
{path: 'test',component:OphistoryComponent}
]),CommonModule],
declarations:[OphistoryComponent]
})
export class OphistoryModule {}
ophistory.component
import { Component } from '#angular/core'
import { LabService } from '../lab/lab.service'
#Component({
selector:'my-ap',
templateUrl:'./ophistory.component.html'
})
export class OphistoryComponent {
constructor (private _service:LabService){}
}
Can anyone confirm if it is a bug in angular 2 or any other solution you have?

Angular2 (CLI): separate common components and logic-components

In angular 1.4 i was using ng6 boilerplate and it was generating an awesome structure, like:
app
common
components
services
etc...
Now i'm trying to learn angular2 with typescript. I'm using Angular CLI.
And i wanna port some of structure from angular 1.4: i mean to separate, for example, select-component from customer-component etc.
And i created such structure:
components - is a module, customer is a module, list - is a component.
How in my app.component.html i can use list-component? Like:
<app-customer-list></app-customer-list>
I have troubles with importing modules & components.
I do it in a such way:
**app.module.ts**
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import { AppComponent } from './app.component';
import { ComponentsModule } from './components/components.module';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
ComponentsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
--
**components.module.ts**
import { NgModule } from '#angular/core';
import { CustomerModule } from './customer/customer.module';
#NgModule({
imports: [
CustomerModule
],
declarations: []
})
export class ComponentsModule { }
--
**customer.module.ts**
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { CustomerComponent } from './customer.component';
import { ListComponent } from './list/list.component';
#NgModule({
imports: [
CommonModule
]
declarations: [CustomerComponent, ListComponent]
})
export class CustomerModule { }
--
**list.component.ts**
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-customer-list',
templateUrl: './list.component.html',
styleUrls: ['./list.component.css']
})
export class ListComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
What i do wrong? How can i correctly import them?

You are forgetting to export your components/modules in those modules that you are sharing with other modules:
**customer.module.ts**
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { CustomerComponent } from './customer.component';
import { ListComponent } from './list/list.component';
#NgModule({
imports: [
CommonModule
]
declarations: [CustomerComponent, ListComponent],
exports: [CustomerComponent, ListComponent]
})
export class CustomerModule { }
**components.module.ts**
import { NgModule } from '#angular/core';
import { CustomerModule } from './customer/customer.module';
#NgModule({
imports: [
CustomerModule
],
exports: [CustomerModule]
declarations: []
})