We Keep Coding

Uncaught Error: Unexpected module 'AppRoutingModule' declared by the module 'AppModule'. Please add a #Pipe/#Directive/#Component annotation

I writng about create ticket but it happen error.I am stuck in a situation here. I am getting an error like this.
Uncaught Error: Unexpected module 'AppRoutingModule' declared by the module 'AppModule'. Please add a #Pipe/#Directive/#Component annotation.
My add-ticket Component Looks like this
import { Component, OnInit } from '#angular/core';
import { TicketService } from './../../services/ticket.service';
import { FormBuilder, FormGroup, FormControl, Validators } from '#angular/forms';
#Component({
selector: 'app-add-ticket',
templateUrl: './add-ticket.component.html',
styleUrls: ['./add-ticket.component.scss']
})
export class AddTicketComponent implements OnInit {
public ticketForm: FormGroup;
constructor(
public ticketAPI: TicketService,
public fb: FormBuilder
) { }
ngOnInit() {
this.ticketAPI.getTicketsList();
}
}
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NavbarComponent } from './components/navbar/navbar.component';
import { LoginComponent } from './pages/login/login.component';
import { RouterModule, Routes } from '#angular/router';
import { HomeComponent } from './pages/home/home.component';
import { SignupComponent } from './pages/signup/signup.component';
import { ProfileComponent } from './pages/profile/profile.component';
import { AddTicketComponent } from './pages/add-ticket/add-ticket.component';
import { AngularFireModule } from 'angularfire2';
import { AngularFireAuthModule } from 'angularfire2/auth';
import { AngularFireDatabase, AngularFireObject } from 'angularfire2/database';
import { AngularFirestoreModule } from 'angularfire2/firestore';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
import { environment } from 'src/environments/environment';
import { AuthService } from './services/auth.service';
import { AuthGuard } from './guards/auth.guard';
import { from } from 'rxjs';
import { Component } from '#angular/Core';
// Routes
export const router: Routes = [
{ path: '', component: HomeComponent },
{ path: 'login', component: LoginComponent },
{ path: 'signup', component: SignupComponent },
{ path: 'profile', component: ProfileComponent, canActivate: [AuthGuard] },
{ path: 'add-ticket', component: AddTicketComponent}
];
#NgModule({
declarations: [
AppComponent,
HomeComponent,
LoginComponent,
NavbarComponent,
ProfileComponent,
SignupComponent,
AddTicketComponent,
AppRoutingModule,
],
imports: [
FormsModule,
ReactiveFormsModule,
BrowserModule,
AppRoutingModule,
RouterModule.forRoot(router),
AngularFireAuthModule,
AngularFireModule.initializeApp(environment.firebaseConfig),
AngularFirestoreModule,
],
providers: [AuthService, AngularFireDatabase, AuthGuard],
bootstrap: [AppComponent]
})
export class AppModule { }

Check your routing module is declared with #NgModule looks # is missing.
Check the components too.
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
const routes: Routes = [
{
path: '',
loadChildren: () => import('./components/home/home.module').then(m => m.HomeModule)
},
{
path: 'home',
loadChildren: () => import('./components/home/home.module').then(m => m.HomeModule)
},
{
path: 'cars',
loadChildren: () => import('./components/cars-list/cars-list.module').then(m => m.CarsListModule)
}
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

remove AppRoutingModule from declarations

You have a typo in the import in your app.module.ts file
import { Component } from '#angular/Core';
It's lowercase c, not uppercase
import { Component } from '#angular/core';

Angular 5 - Unable to navigate from one component to another component

I'm developing Angular application. In that I've two pages login and home. After login submit button it should navigate to home page. For this I tried multiple ways but it is not navigating to home page. Finally I used <router-outlet></router-outlet> in my login(app.component.html) file. So home page is displaying in login page. I want to navigate home page after login. Below is my current output and code
And when I'm refreshing http://localhost:4200/home it is showing errorlike below
app.component.html (login page)
<div align="center">
<form (ngSubmit)="onLoginSubmit()" class="fullForm">
<div class="imgcontainer"></div>
<h2>PL Auth</h2>
<div class="container">
<form (ngSubmit)="generateOtpSubmit()" class="generateOtpForm">
<label> <b>Username: </b>
</label> <input type="text" placeholder="Enter Username" id="username"
[(ngModel)]=userName name="uname" required> <br> <br>
<label> <b>Password : </b>
</label> <input type="password" placeholder="Enter Password" id="password"
[(ngModel)]=password name="psw" required> <br> <br>
<button type="submit" class="otpButton">Generate OTP</button>
</form>
<br> <br> <label> <b>Enter OTP : </b>
</label> <input type="text" placeholder="Enter OTP" id="otp" [(ngModel)]=otp
name="otp" required> <br> <br>
<button type="submit" class="loginButton">Login</button>
</div>
<div>
<p style="color: red;">{{ loginStatus }}</p>
</div>
</form>
<router-outlet></router-outlet>
</div>
app.component.ts
import { Component, OnInit } from '#angular/core';
import { Location } from '#angular/common';
import { HomepageComponent } from './homepage/homepage.component';
import { Headers, Http, Response } from '#angular/http';
import { RouterModule, Routes } from '#angular/router';
import { HttpClient } from '#angular/common/http';
import { Directive } from '#angular/core';
//import { Router } from '#angular/router';
import { Router } from "#angular/router";
import { Text } from '#angular/compiler';
export const appRoutes: Routes = [
{path: 'home', component:HomepageComponent}
];
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
otpsubmitted = false;
loginSubmitted = false;
userName = '';
password = '';
otp ='';
userAuthCheck:Text;
checkOtp:Text;
authCheck ='';
loginStatus='';
ngOnInit() {
}
constructor(private http: Http,private httpClient: HttpClient,private route: Router ) { }
private generateOtp(){
this.http.post('http://localhost:8080/loginController/generateotp', {
userMail: this.userName
})
.subscribe(
res => {
console.log(res);
},
err => {
console.log("Error occured");
}
);
}
private logSubmit(){
this.http.post('http://localhost:8080/loginController/authUser', {
userMail: this.userName,
password: this.password,
otp: this.otp
})
.subscribe(
res => {
const printResp=res.json();
console.log(res);
//this.loginStatus=printResp.status;
if (printResp.status === 'true'){
this.loginStatus = '';
console.log('in the clickName');
this.route.navigateByUrl('/home');
//this.route.navigate(['home/']);
} else if(printResp.status === 'false') {
this.loginStatus = printResp.Data.errorMessage;
}
},
err => {
console.log("Error occured"+err);
}
);
}
generateOtpSubmit() {
this.otpsubmitted = true;
this.generateOtp();
}
onLoginSubmit(){
this.loginSubmitted = true;
this.logSubmit();
}
}
app-routing.module.ts
import {ApplicationComponent} from './application/application.component';
import {NavigationComponent} from './navigation/navigation.component';
import { HomepageComponent } from './homepage/homepage.component';
import {AppComponent} from './app.component';
import {NgModule} from '#angular/core';
import {RouterModule, Routes} from '#angular/router';
import { CommonModule } from '#angular/common';
const routes: Routes = [
{path: 'home', component: HomepageComponent},
{path: 'application', component: ApplicationComponent},
{path: 'navigation', component: NavigationComponent},
];
#NgModule({
imports: [CommonModule,RouterModule.forRoot(routes)],
exports: [RouterModule],
declarations: []
})
export class AppRoutingModule {}
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { Router } from '#angular/router';
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { AppComponent } from './app.component';
import { HttpModule } from '#angular/http';
import { HttpClientModule } from '#angular/common/http';
import { HomepageComponent } from './homepage/homepage.component';
import { ApplicationComponent } from './application/application.component';
import { NavigationComponent } from './navigation/navigation.component';
import { SearchuserComponent } from './searchuser/searchuser.component';
#NgModule({
declarations: [
AppComponent,
HomepageComponent,
ApplicationComponent,
NavigationComponent,
SearchuserComponent
],
imports: [
BrowserModule,
FormsModule,
HttpClientModule,
HttpModule,
AppRoutingModule
],
bootstrap: [AppComponent]
})
export class AppModule { }
homepage.component.html
<p>
homepage works!
</p>
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CyberSecurityVw</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
homepage.component.ts
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-homepage',
templateUrl: './homepage.component.html',
styleUrls: ['./homepage.component.css']
})
export class HomepageComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}

Just use
this.route.navigate(['/home']);

First :you will need to move your login form to a new component called (login)
second :your app component html should hold only this line
<router-outlet></router-outlet>
because app component will act like your landing page so you shouldn't add login form on it
Third : you need to modify your routing
import { HomepageComponent } from './homepage/homepage.component';
import { LoginComponent } from './login/login.component';
import { AppComponent } from './app.component';
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { CommonModule } from '#angular/common';
const routes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{
path: 'home', component: HomepageComponent,
children: [
{ path: '', redirectTo: '/example', pathMatch: 'full' },
{
path: 'example', component: ExampleComponent
}
]
},
{ path: 'login', component: LoginComponent },
];
#NgModule({
imports: [CommonModule, RouterModule.forRoot(routes)],
exports: [RouterModule],
declarations: []
})
export class AppRoutingModule { }
-what will happen is when u type your website url without any routing it will navigate to home/example - so home component should contain your website design template so all children component will inject within home component and take the same template design
-login component is stand alone because u don't need it to take the same website design template
Fourth : in your home page html add this
<div>
//your header
<header></header>
<div class="content">
<router-outlet></router-outlet>
</div>
// your footer
<footer></footer>
</div>
</div>

First add import in your main component
import {Router } from '#angular/router';
In the same file add below code for constructor and method
constructor(private route: Router) {}
public Dashbord()
{
this.route.navigate(['/dashboard']);
}
In app-routing.module.ts file add dashboard
const routes: Routes =
[
{ path: '', pathMatch: 'full' ,component: TestComponent},
{ path: 'dashboard', component: DashboardComponent }
];
This is your .html file code
<button mat-button (click)="Dashbord()">Dashboard</button><br>
Good luck.

Angular 4 routing is not working

Angular routing is not working.. here is the code
routs.ts: routing url definitions file.
import {BlankComponent} from "../layouts/blank.component";
export const routes=[
{
path:'',
component:BlankComponent,
children:[
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', loadChildren: '../pages/dashboard/dashboard.module#DashboardModule' }
]
},
{ path: '**', redirectTo: 'home' }
]
routes.module.ts: routing module
import {NgModule} from "#angular/core";
import {RouterModule} from "#angular/router";
import { routes } from './routes';
#NgModule({
imports:[RouterModule.forRoot(routes)],
exports:[RouterModule,]
})
export class RoutesModule{
constructor(){
}
}
Layout module:
import {NgModule} from "#angular/core";
import { RouterModule } from '#angular/router';
import {BlankComponent} from "./blank.component";
import {TopnavComponent} from "./topnav.component";
#NgModule({
declarations:[BlankComponent,TopnavComponent],
exports:[BlankComponent,TopnavComponent,RouterModule],
imports:[]
})
export class LayoutsModule{}
BlankComponent:
import {Component} from "#angular/core";
#Component({
selector:"sig-blank",
templateUrl:'./blank.component.html'
})
export class BlankComponent{}
App module:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
import {LayoutsModule} from './layouts/layouts.module'
import {RoutesModule} from "./routes/routes.module"
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
LayoutsModule,
RoutesModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
blank.component.html
<div class="wrapper">
<section>
<div class="container">
<router-outlet></router-outlet>
</div>
</section>
</div>
app.component.html
<router-outlet></router-outlet>
This is the code i used in my project. but the routing is not working .
What is the wrong in my code. actually i have markup in my ./blank.component.html which i not included in the question. now the page displaying is the content in app.component.html only

You need to give the component name at {path:'home',component:ComponentName,loadChildren: '../pages/dashboard/dashboard.module#DashboardModule'}

'router-outlet' is not a known element Angular2

Repo: https://github.com/leongaban/lifeleveler.io
Not sure why I'm getting this error, I have Router imported in my app.component.ts
I'm trying to use the app.component to hold the main <router-outlet>, and serve up the login view first.
app.module
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms';
import { RouterModule } from '#angular/router';
import { routing } from './app.routing';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { AuthService } from './shared/services/auth.service';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/do';
import 'rxjs/add/observable/throw';
#NgModule({
imports: [
BrowserModule,
FormsModule,
RouterModule,
routing
],
declarations: [
AppComponent,
LoginComponent
],
providers: [
AuthService,
],
bootstrap: [ AppComponent ]
})
export class AppModule {}
app.component.ts
import { Component, OnInit } from '#angular/core';
import { User } from './shared/models/user';
import { Router } from '#angular/router';
#Component({
selector: 'my-app',
templateUrl: './app/app.component.html',
styleUrls: ['./app/app.component.css']
})
export class AppComponent implements OnInit {
ngOnInit() {
}
}
app.component.html
<router-outlet></router-outlet>
app.routing.ts
import { ModuleWithProviders } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { LoginComponent } from './login/login.component';
export const routes: Routes = [
{
path: '',
redirectTo: '/login',
pathMatch: 'full',
},
{
path: 'login',
component: LoginComponent
}
]
export const routing: ModuleWithProviders = RouterModule.forRoot(routes);

I just refactored your project with webpack , your same code works just fine:
github repo
first :
npm install -g #angular/cli
npm install
ng serve

It looks like you might be importing the RouterModule multiple times.
I would remove this line from your app.routing.ts
export const routing: ModuleWithProviders = RouterModule.forRoot(routes);
In your app.module I would import your routes with:
import { routes } from './app.routing';
And then import the RouterModule as:
RouterModule.forRoot(routes)

You should add the RouterModule.forRoot(routes) statement inside your AppModule:
#NgModule({
imports: [
BrowserModule,
FormsModule,
RouterModule.forRoot(routes)
],
declarations: [
AppComponent,
LoginComponent
],
providers: [
AuthService,
],
bootstrap: [ AppComponent ]
})
export class AppModule {}
and remove it from your app.routing.ts file:
export const routes: Routes = [
{
path: '',
redirectTo: '/login',
pathMatch: 'full',
},
{
path: 'login',
component: LoginComponent
}
];

Just import RouterOutlet
import { RouterOutlet } from '#angular/router';

The selector "login-app" did not match any elements while using different component Angular 2

I have a component in angular 2 as shown below
login.component.ts
import { Component } from '#angular/core';
import { LoginViewModel } from "../ViewModel/Login.ViewModel";
import { LoginService } from "../Service/Login.Service";
#Component({
selector: 'login-app',
templateUrl: 'Account/partialLogin',
providers: [LoginViewModel, LoginService]
})
export class LoginComponent {
constructor(private loginservicemodel: LoginService, private model: LoginViewModel) {
this.model.userName = 'erere#ada.com';
this.model.password = "test anand";
}
save(modelValue: LoginViewModel, isValid: boolean) {
if (isValid) {
this.loginservicemodel.loginHttpCall();
}
}
}
Home.Component.ts
import { Component } from '#angular/core';
#Component({
selector: 'Home-app',
template: `
<h1>Angular Router</h1>
<nav>
<a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
<a routerLink="/heroes" routerLinkActive="active">Heroes</a>
</nav>
<router-outlet></router-outlet>
`
})
export class HomeComponent {
}
The appModule.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms';
import { RouterModule, Routes } from '#angular/router';
import { HttpModule, JsonpModule } from '#angular/http';
import { LoginComponent } from "./Components/login.Component";
import { HomeComponent } from "./Components/home.component";
const appRoutes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'Account/Login', component: LoginComponent }
];
#NgModule({
imports: [BrowserModule, FormsModule, HttpModule, JsonpModule, RouterModule.forRoot(appRoutes)],
declarations: [LoginComponent, HomeComponent],
bootstrap: [HomeComponent]
})
export class AppModule { }
login.cshtml
#{
ViewData["Title"] = "Login";
}
<login-app>looding...</login-app>
partialLogin.cshtml
<router-outlet></router-outlet>
<p>THis is test</p>
Routing
app.UseMvc(routes =>
{
routes.MapRoute(
name: "default",
template: "{controller=Home}/{action=Index}/{id?}");
routes.MapRoute(
name: "spa-fallback",
template: "{*url}",defaults: new { controller = "Home", action = "Index" });
});
I have use the angular 2 routing as you can see in the appmodule.ts.If I navigate to homepage i,e Home/Index I will get an error as The selector "login-app" did not match any elements and when I navigate to Account/Login I will get an error as The selector "Home-app" did not match any elements.I know the the condition on appmodule is not working. How can I make this work. Please anyone can solve this issue

you are getting this error because you didn't import all your other component in you ngModule file. add them in declaration just like you have imported LoginComponent
#NgModule({
imports: [BrowserModule, FormsModule, HttpModule, JsonpModule],
declarations: [LoginComponent],<-- add all your component here
bootstrap: [LoginComponent]
})
export class AppModule { }

Below is an example of how to add route in Angular2:
//Create new app.module.ts file
import { ModuleWithProviders } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { LoginComponent } from './Components/login.Component';
const appRoutes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'login', component: LoginComponent}
];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
//Import the above define route in your App module
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms';
import { HttpModule, JsonpModule } from '#angular/http';
import { LoginComponent } from "./Components/login.Component";
//Import your route file
import { routing } from './app.routing';
#NgModule({
imports: [BrowserModule, FormsModule, HttpModule, JsonpModule,routing,],
declarations: [LoginComponent],
bootstrap: [LoginComponent]
})
export class AppModule { }

Finally the working code.Call the respective selector in HTML page
AppModule.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms';
import { RouterModule, Routes } from '#angular/router';
import { HttpModule, JsonpModule } from '#angular/http';
import { ModuleWithProviders } from '#angular/core';
import { AppComponent} from "./app.component";
import { LoginComponent } from "./Components/login.Component";
import { HomeComponent } from "./Components/home.component";
const appRoutes: Routes = [
{ path: '', redirectTo: 'Home/Index', pathMatch: 'full' },
{ path: 'Account/Login', component: LoginComponent },
{ path: 'Home/Index', component: HomeComponent }
];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
#NgModule({
imports: [BrowserModule, FormsModule, HttpModule, routing],
declarations: [AppComponent,LoginComponent, HomeComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
app.Component.ts
import { Component } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
#Component({
selector: 'main-app',
template: '<router-outlet></router-outlet>'
})
export class AppComponent { }
Home.Component.ts
import { Component } from '#angular/core';
#Component({
selector: 'Home-app',
template: `
<h1>Angular Router</h1>
<nav>
<a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
<a routerLink="/heroes" routerLinkActive="active">Heroes</a>
</nav>
`
})
export class HomeComponent {
}
login.Component.ts
import { Component } from '#angular/core';
import { LoginViewModel } from "../ViewModel/Login.ViewModel";
import { LoginService } from "../Service/Login.Service";
#Component({
selector: 'login-app',
templateUrl: 'Account/partialLogin',
providers: [LoginViewModel, LoginService]
})
export class LoginComponent {
constructor(private loginservicemodel: LoginService, private model: LoginViewModel) {
this.model.userName = 'erere#ada.com';
this.model.password = "test anand";
}
save(modelValue: LoginViewModel, isValid: boolean) {
if (isValid) {
this.loginservicemodel.loginHttpCall();
}
}
}