Why doesn't it follow the route of a single element?

Question

JavaScript

I created a dialog from the component: "GalleryItemComponent" where I display information about the item, when I click on the "edit" button in the dialog, I want to follow the route ": id" of the item I need to the component "GalleryItemComponent" where I will already edit the item. But when I navigate to the route I need, I get this error: "Error: StaticInjectorError(AppModule)[MatDialogTitle -> MatDialogRef]:
StaticInjectorError(Platform: core)[MatDialogTitle -> MatDialogRef]:
NullInjectorError: No provider for MatDialogRef!". Tried to add "MatDialogRef" to "GalleryModule" providers and got error: "Can't resolve all parameters for MatDialogRef: (?, ?, ?). unit testing Angular ". Clarify please,
GalleryRoutingModule:

const galleryRoutes: Routes = [
    {
        path: '',
        canActivate: [AuthGuard],
        children: [
            {path: '', component: GalleryComponent, resolve: {posts: PostsResolver}},
            {path: 'add', component: GalleryAddComponent},
            {path: ':id', component: GalleryItemComponent, resolve: {post: PostResolver}},
        ]
    },
];

PostResolver:

@Injectable({
    providedIn: 'root',
})

export class PostResolver implements Resolve<Picture> {
    constructor( private galleryService: GalleryService) {
    }
    resolve(route: ActivatedRouteSnapshot): Observable<Picture> {
        return this.galleryService.getPicture(+route.paramMap.get('id'));
    }
}

gallery.component.ts:

export class GalleryComponent implements OnInit {
    collection: Picture[] = [];


    fileNameDialogRef: MatDialogRef<GalleryItemComponent>;

    constructor(private route: ActivatedRoute, private dialog: MatDialog) {
}
    ngOnInit() {
        this.getPictures();
    }
   getPictures() {
        this.route.data.subscribe(data => {
            data.posts.forEach(post => {
                if (post.id > 10) {
                    this.collection.unshift(post);
                } else {
                    this.collection.push(post);
                }
                this.save();
                this.getCollection();
            });
        })
    }

    openAddFileDialog(pic?) {
        this.fileNameDialogRef = this.dialog.open(GalleryItemComponent, {
            minWidth: 300,
            minHeight: 400,
            data: pic
        });
    }
}

gallery.component.html:

<div class="row">
    <div class="col-lg-3 col-md-4 col-6" *ngFor="let pic of collection; ">
        <div class="info">
            <a [routerLink]="[pic.id]" >
                <img [src]="pic.url" alt="test" class="img-responsive">
                <p class="lead"><span>{{pic.id}}:</span>{{pic.title | truncate:'14':true}}</p>
            </a>
            </p>
        </div>
        <div class="card buttons">
            <button (click)="openAddFileDialog(pic)">Add file</button>
        </div>
    </div>
</div>

GalleryItem.component.html:

<div *ngIf="data" class="item">
        <div class="card  w-100">
            <h3 mat-dialog-title>About orc</h3>

                <img class="card-img-top" [src]="data.url" alt="Card image cap">
                <div class="card-body">
                    <h5 class="card-title">Orc number: {{data.id}}</h5>
                    <p class="card-text"><strong>What orc says about himself:</strong> {{data.title}}</p>

                    <p class="card-text"><strong>Orc birthday:</strong> <span class="date-info" [Highlight]>{{ data.date | date: 'fullDate'}}</span>
                    </p>
                </div>
            <mat-dialog-actions>
                <button routerLink="gallery/{{data.id}}">Edit</button>
            </mat-dialog-actions>
        </div>
    </div>
</mat-dialog-content>

GalleryItem.component.ts:

export class GalleryItemComponent implements OnInit {
   pic: Picture;

    constructor( private route: ActivatedRoute,
                 private dialogRef: MatDialogRef<GalleryItemComponent>,
                 @Inject(MAT_DIALOG_DATA) private data
                ) {

    }

    ngOnInit() {
        this.showPost();
    }

    showPost(): void {
        this.route.data.subscribe(params => {
            this.pic = params.post;
        })
    }
}

Answer 1

Routes can be done like this:

{ path: 'main', component: HelloComponent },
  { path: 'main/:id', component: HelloComponent },

Follow the link
and the fact that you have an error is not related to routes, there is an error specifically with MatDialogRef.