dim plank
I've got the shared-module bscomponents.module.ts and the shared module persons.module.ts , bscompoenents.module.ts declares and exports two components bs-button and bs-navbar. When I'm now importing BscomponentsModule in PersonsModule I can't access the components and get this error. But when I import it in app.module.ts using it in app-component it works just fine. What could cause this problem?
lethal cradle
Please also post the code (as text, not as an image) of the app module. Ideally, if you could share the whole code (as a link to a github project for example), that would help.
dim plank
I'm sorry, here is the code of my two modules:
persons:
import { CommonModule } from '@angular/common';
import { PersonsPageComponent } from './persons-page/persons-page.component';
import {BscomponentsModule} from "../bscomponents/bscomponents.module";
@NgModule({
declarations: [
PersonsPageComponent
],
imports: [
CommonModule,
BscomponentsModule
]
})
export class PersonsModule { }
bscomponents:
import { CommonModule } from '@angular/common';
import {BsbuttonComponent} from "./bsbutton/bsbutton.component";
import {BsnavbarComponent} from "./bsnavbar/bsnavbar.component";
@NgModule({
declarations: [
BsbuttonComponent,
BsnavbarComponent,
],
imports: [
CommonModule
],
exports: [
BsbuttonComponent,
BsnavbarComponent,
]
})
export class BscomponentsModule { }
I'm sorry I cant share the whole GitHub Project for this one because there is a lot of stuff in it I don't want to become public (including Personal Info etc.) 😦
compact jackal
I'm sorry I cant share the whole GitHub Project for this one because there is a ...
Could you share the @Component(...) of your components, without the class body, if it contains sensitive info?
Also, is the PersonsPageComponent in the declarations of any other module?
If you could create a Stackblitz that only contains these modules/components, reproducing the error, that could help as an alternative to sharing the whole project.
dim plank
Could you share the `@Component(...)` of your components, without the class body...
Yes of course. My @Component for the bs-button looks like this: @Component({ selector: 'bs-button', templateUrl: './bsbutton.component.html', styleUrls: ['./bsbutton.component.scss'] })```` For bsnavbar its basically the same: ````@Component({ selector: 'bs-navbar', templateUrl: './bsnavbar.component.html', styleUrls: ['./bsnavbar.component.scss'] })```` Persons-page has this @Component : ````@Component({ selector: 'app-persons-page', templateUrl: './persons-page.component.html', styleUrls: ['./persons-page.component.scss'] })```` My AppComponent looks like this (nothing changed): ````@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] })
I've already triple-checked if one of the components is declared in two modules but thats not the case.
Here is the whole project: https://workupload.com/file/eyhnBtNjTJm Sensitive info is only contained in other folders of my github Repo for this one so I just share this part 👍
compact jackal
I see PersonsPageComponent in root router, but I don't see anything that would be importing the PersonsModule, which declares the PersonsPageComponent.
const routes: Routes = [
{path: "**", redirectTo: '/Personen', pathMatch: 'full'},
{path: "Personen", component: PersonsPageComponent}
];
Unless you want to make PersonsPageComponent a standalone component, AppModule would need to import PersonsModule.
dim plank
Ahhh - yeah thats the issue. I've added an import to my AppModule on PersonsModule and now it works just fine - thanks man.
I'm just wondering, why the personsComponent was working with normal html stuff without importing it in AppModule 🤔
compact jackal
I don't know enough to explain it too detailed, so someone else may be able to clarify it better, but even a non-standalone component can be created on its own. Few are self-contained enough to not rely on at least the common directives, though, such as ngIf.