ERROR
ERROR Error: Uncaught (in promise): Error: Type PrincipalTemplateComponent is part of the declarations of 2 modules: AppModule and AuthModule! Please consider moving PrincipalTemplateComponent to a higher module that imports AppModule and AuthModule. You can also create a new NgModule that exports and includes PrincipalTemplateComponent then import that NgModule in AppModule and AuthModule.
Error: Type PrincipalTemplateComponent is part of the declarations of 2 modules: AppModule and AuthModule! Please consider moving PrincipalTemplateComponent to a higher module that imports AppModule and AuthModule. You can also create a new NgModule that exports and includes PrincipalTemplateComponent then import that NgModule in AppModule and AuthModule
APP MODULE
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { HomeComponent } from './components/home/home.component';
import { NotFoundComponent } from './components/not-found/not-found.component';
import { PrincipalTemplateComponent } from './layouts/principal-template/principal-template.component';
import { NavComponent } from './layouts/nav/nav.component';
import { FooterComponent } from './layouts/footer/footer.component';
#NgModule({
declarations: [
AppComponent,
HomeComponent,
NotFoundComponent,
PrincipalTemplateComponent,
NavComponent,
FooterComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
AUTH MODULE
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { CommonModule } from '#angular/common';
import { SignInComponent } from './sign-in/sign-in.component';
import { LogInComponent } from './log-in/log-in.component';
import { FormComponent } from './form/form.component';
import { PrincipalTemplateComponent } from 'src/app/layouts/principal-template/principal-template.component';
import { FooterComponent } from 'src/app/layouts/footer/footer.component';
import { NavComponent } from 'src/app/layouts/nav/nav.component';
const routes: Routes = [
{ path: 'sign-in', component: SignInComponent },
{ path: 'log-in', component: LogInComponent },
];
#NgModule({
imports: [CommonModule, RouterModule.forChild(routes)],
declarations: [
SignInComponent,
LogInComponent,
FormComponent,
PrincipalTemplateComponent,
NavComponent,
FooterComponent
]
})
export class AuthModule {}
APP ROUTING MODULE
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { HomeComponent } from './components/home/home.component';
import { NotFoundComponent } from './components/not-found/not-found.component';
const routes: Routes = [
{ path: 'home', component: HomeComponent },
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: 'auth', loadChildren: './components/auth/auth.module#AuthModule' },
{ path: 'ad', loadChildren: './components/ad/ad.module#AdModule' },
{ path: '**', component: NotFoundComponent }
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
HOME COMPONENT && SIGN-IN COMPONENT
<ng-template #template>
hola
</ng-template>
<app-principal-template></app-principal-template>
<ng-template #template>
hola 2
</ng-template>
<app-principal-template></app-principal-template>
Issue
You had desclared the same component PrincipalTemplateComponent in two modules AppModule and AuthModule.
Fix
You just remove PrincipalTemplateComponent from AppModule
Note : If you are using PrincipalTemplateComponent in other modules (excluding AuthModule) then you should declare in Shared Module.
shared.module.ts
#NgModule({
declarations: [
PrincipalTemplateComponent
],
exports:[PrincipalTemplateComponent]
})
export class SharedModule {}
The whole information you need is in the error message including the solution. Basically you only can 'declare' a component as part of a single module.
For this case, you should create a module that declares this shared component then import this shared 'module' within the other 2 modules, this way you can use the component in these 2 modules.
Related
I'm trying to use <router-outlet> but getting an error.
Error: 'router-outlet' is not a known element:
If 'router-outlet' is an Angular component, verify that it is part of this module.
If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' component to suppress this message.ng
Angular CLI: 13.3.5
Node: 16.15.0
Package Manager: npm 8.18.0
Visual Studio Code Version: 1.70.2
I checked many other similar questions on StackOverflow but my code seems right.
app.module.ts :
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule } from '#angular/common/http'
import { RouterModule } from '#angular/router';
import { SearchBarComponent } from './components/search-bar/search-bar.component';
import { HomeComponent } from './components/home/home.component';
#NgModule({
declarations: [
AppComponent,
SearchBarComponent,
HomeComponent
],
imports: [
AppRoutingModule,
BrowserModule,
RouterModule,
HttpClientModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app-routing.module.ts
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { HomeComponent } from './components/home/home.component';
const routes: Routes = [
{
path:'',
component: HomeComponent
},
{
path: 'search/:game-search',
component: HomeComponent
}
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
app.component.html
<app-search-bar></app-search-bar>
<router-outlet></router-outlet>
I'm experimenting with Angular Lazy Load, I have a strange error, while one of the route work flawlessly, while the other (similar structure and implementation) give me an error.
Here is my simple code:
in app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { AppComponent } from './app.component';
const routes: Routes = [
{
path: 'customers',
loadChildren: 'app/customers/customers.module#CustomersModule'
},
{
path: 'orders',
loadChildren: 'app/orders/orders.module#OrdersModule'
},
{
path: '',
redirectTo: '',
pathMatch: 'full'
}
];
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
RouterModule.forRoot(routes)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
while in orders.module.ts
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { OrdersRoutingModule } from './orders-routing.module';
import { OrderListComponent } from './order-list/order-list.component';
#NgModule({
imports: [
CommonModule,
OrdersRoutingModule
],
declarations: [OrderListComponent]
})
export class OrdersModule { }
and in orders-routing.module.ts
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { OrderListComponent } from './order-list/order-list.component';
const routes: Routes = [
{
path: '',
component: OrderListComponent
}
];
#NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class OrdersRoutingModule { }
when i go to localhost:4200/orders everything works flawlessly, i.e. no error, and the lazy loading feature works as expected.
while in customers.module.ts
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { CustomersRoutingModule } from './customers-routing.module';
import { CustomerListComponent } from './customer-list/customer-list.component';
#NgModule({
imports: [
CommonModule,
CustomersRoutingModule
],
declarations: [CustomerListComponent]
})
export class CustomersModule { }
and in customers-routing.module.ts
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { CustomerListComponent } from './customer-list/customer-list.component';
const routes: Routes = [
{
path: '',
component: CustomerListComponent
}
];
#NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class CustomersRoutingModule { }
But when i go to localhost:4200/customers it will give me an error:
Error: Component CustomerListComponent is not part of any NgModule or the module has not been imported into your module.
Why is this happening only on customers route? How to fix this?
I have a module for routing and, since it needs to reference the components it will route to, I have to import those as well.
import { NgModule } from "#angular/core";
import { Routes, RouterModule } from "#angular/router";
import { RegisterComponent } from "./admin/register/register.component";
import { LoginComponent } from "./admin/login/login.component";
import { ErrorComponent } from "./admin/error/error.component";
const routes: Routes = [
{ path: "register", component: RegisterComponent },
{ path: "login", component: LoginComponent },
{ path: "**", component: ErrorComponent }
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
The components are placed in another module - AdminModule. All future components will be placed there (or in an appropriate module of their own). I wanted to replace the three imports with a single one like this.
// import { RegisterComponent } from "./admin/register/register.component";
// import { LoginComponent } from "./admin/login/login.component";
// import { ErrorComponent } from "./admin/error/error.component";
import { RegisterComponent, LoginComponent, ErrorComponent } from "./admin/admin.module";
This doesn't work and the message says that the module Admin has no exported member with name RegisterComponent etc. So I added exports section to the decorator of the AdminModule class like this.
import { NgModule } from "#angular/core";
import { CommonModule } from "#angular/common";
import { RegisterComponent } from "./register/register.component";
import { LoginComponent } from "./login/login.component";
import { ErrorComponent } from "./error/error.component";
#NgModule({
imports: [CommonModule],
exports: [RegisterComponent, LoginComponent, ErrorComponent],
declarations: [RegisterComponent, LoginComponent, ErrorComponent]
})
export class AdminModule { }
Regrettably, the error message remains and I'm not sure how to make the components to be recognized as exportees of AdminModule. How come that neither exports section nor declaration section seems to expose them and what can I do to make it so recognizable?
You are mixing Typescript exports with Angular exports. #NgModule's exports array is designed to describe the module's public API. It does not affect how Typescript will resolve your file imports.
For this line to work like expected:
import {
RegisterComponent,
LoginComponent,
ErrorComponent
} from "./admin/admin.module";
You need to export the components from the file itself.
import { NgModule } from "#angular/core";
import { CommonModule } from "#angular/common";
import { RegisterComponent } from "./register/register.component";
import { LoginComponent } from "./login/login.component";
import { ErrorComponent } from "./error/error.component";
export { RegisterComponent } from "./register/register.component";
export { LoginComponent } from "./login/login.component";
export { ErrorComponent } from "./error/error.component";
#NgModule({
imports: [CommonModule],
exports: [RegisterComponent, LoginComponent, ErrorComponent],
declarations: [RegisterComponent, LoginComponent, ErrorComponent]
})
export class AdminModule { }
Read more about Typescript's import, export and modules in the official docs.
I have an Angular application that navigates to two routes:
http://localhost:8080/ /* Landing page */
http://localhost:8080/details/:id /* Result page */
Whenever I navigate to, for example, http://localhost:8080/details/4235. I'm met with the error: Cannot GET /details/4235
Here is how I setup my routes, in my:
app-routing.module.ts
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { LandingPage } from './components/landingpage/landingpage.component';
import { ResultPage } from './components/resultpage/resultpage.component';
import { TitleService } from './services/title.service';
const routes: Routes = [
{ path: '', component: LandingPage },
{
path: 'details/:id', component: ResultPage, pathMatch: 'full'
}
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
providers: [TitleService]
})
export class AppRoutingModule { }
Which I import into my:
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { HttpModule } from '#angular/http';
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms'; // <-- NgModel lives here
import { RouterModule, Routes } from '#angular/router';
import { AppComponent } from './app.component';
import { LandingPage } from './components/landingpage/landingpage.component';
import { ResultPage } from './components/resultpage/resultpage.component';
import { AppRoutingModule } from './app-routing.module';
#NgModule({
declarations: [
AppComponent,
LandingPage,
ResultPage
],
imports: [
BrowserModule,
FormsModule, // <-- import the FormsModule before binding with [(ngModel)]
HttpModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
I'm having trouble finding a working Angular 2 method of dealing with direct-linking to a url.
How can I setup direct linking in Angular 2, so that when I load, say, http://localhost:8080/details/4235 it loads my ResultPage component.
edit:
Loading http://localhost:8080/#/details/4235 , is valid, but it re-loads the LandingPage component. And I am trying to load the ResultPage component when there is an extended url.
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { LandingPage } from
'./components/landingpage/landingpage.component';
import { ResultPage } from
'./components/resultpage/resultpage.component';
import { TitleService } from './services/title.service';
const routes: Routes = [
{ path: '', component: LandingPage },
{
path: 'details/:id', component: ResultPage
}
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
providers: [TitleService]
})
export class AppRoutingModule { }
here you're loading the empty path first. Then the other paths will load. Update the empty path route. Keep it at last in the hierarchy.
Updated Code:
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { LandingPage } from '
./components/landingpage/landingpage.component';
import { ResultPage } from
'./components/resultpage/resultpage.component';
import { TitleService } from './services/title.service';
const routes: Routes = [
{
path: 'details/:id', component: ResultPage
},
{ path: '', component: LandingPage } //<-- here
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
providers: [TitleService]
})
export class AppRoutingModule { }
EDIT:
Also there might be problem that your browser doesn't support HTML5 pushState. I'm referring some SO links that might help out.
Configure history.pushState for Angular 2
enter link description here
Angular 2.0 router not working on reloading the browser
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';