This happens when I try to declare more than one component inside a module. I've this working on other modules but in this one it doesn't run.

I tried some things of other posts but It still not working.

How it should work: I have a parent module with his own component on 'some-route', when I push a button this route changes to 'some-route/:id' and then It has to show the other component declared inside.

SOLUTION

This error happens because the 'templatUrl: 'url'' wasn't referring to the correct URL.

Error:

error NG6001: The class 'ShowTemplatesComponent' is listed in the declarations of the NgModule 'PackagingMaterialModule', but is not a directive, a component, or a pipe. Either remove it from the NgModule's declarations, or add an appropriate Angular decorator.

Also says:

export class ShowTemplatesComponent implements OnInit {    
             ~~~~~~~~~~~~~~~~~~~~~~ ShowTemplatesComponent' is declared here.

Child component

import { Component, OnInit, Renderer2 } from '@angular/core';
import { ActivatedRoute, Router } from "@angular/router";
import { Title } from "@angular/platform-browser";
import { PackagingMaterialService } from "...";

@Component({
  selector: 'app-show-packaging-material',
  templateUrl: './show-packaging-material.component.html',
  styleUrls: ['./show-packaging-material.component.scss']
})
export class ShowTemplatesComponent implements OnInit {

  constructor(
    private router: Router,
    private packagingMaterialService: PackagingMaterialService,
    private title: Title,
    private renderer: Renderer2,
    private activatedRoute: ActivatedRoute,
  ) { }

  ngOnInit(): void {
    ...
  }

  ...

}

Parent module

... // Some other imports
import { ShowTemplatesComponent } from './show-template/show-template.component';
    
@NgModule({
    declarations: [
        TemplatesComponent,
        ShowTemplatesComponent
    ],
    imports: [
        CommonModule,
        RouterModule.forChild([
            {
                path: '',
                component: TemplatesComponent,
            },
            {
                path: 'some-url',
                component: ShowTemplatesComponent,
            }
        ]),
        ...
    ],
})
export class TemplateModule{ }

Routing.ts

  {
        path: 'templates',
        canActivate: [AuthGuard],
        loadChildren: () =>
          import('./templates/templates.module').then((m) => m.TemplateModule)
  },

Files organization

CodePudding user response：

Maybe you declared your Component in more than 1 module, for example in AppModule and ParentModule.

CodePudding user response：

As I understood right from your example, does the TemplatesComponent is the parent component for ShowTemplatesComponent? If so, your router should look like this:

            {
            path: '',
            pathMatch: 'full',
            redirectTo: 'some-url',
            },
            {
                path: 'some-url',
                component: TemplatesComponent,
            }
        ])