Вот код сервиса

import { Injectable } from "@angular/core";


export interface Phone{
 id?:number,
 brand:string,
 model:string,
 url:string
}
@Injectable({providedIn:'root'})
export class PhoneService{
 params: any;
 subscribe(arg0: (post: Phone) => void): any {
   throw new Error('Method not implemented.');
 }
 phones:Phone[]=[
   {id:1001,brand:'Apple',model:'Iphone6s',url:'https://assets.swappie.com/cdn-cgi/image/width=600,height=600,fit=contain,format=auto/iPhone-6s-Plus-space-gray-back.png'},
   {id:1002,brand:'Apple',model:'Iphone7',url:'https://avatars.mds.yandex.net/get-mpic/1859063/img_id4109987386688090174.jpeg/9hq'},
   {id:1003,brand:'Apple',model:'Iphone12',url:'https://store.storeimages.cdn-apple.com/4668/as-images.apple.com/is/iphone-12-purple-select-2021?wid=470&hei=556&fmt=jpeg&qlt=95&.v=1617130317000'},
   {id:1004,brand:'Apple',model:'Iphone11Pro',url:'https://www.bite.lv/sites/default/files/products/2019-09/iPhone_11_Pro_Silver_2.png'},
   {id:1005,brand:'Samsung',model:'GalaxyS10',url:'https://airoom.ru/wp-content/uploads/2019/03/Samsung-Galaxy-S10-Black.jpg'},
   {id:1006,brand:'Xiaomi',model:'Note9',url:'https://mi-shop.com/upload/resize_cache/iblock/3f2/445_473_2/3f25656a3f31802bc090faf1db7a1f34.jpg'},
 ]

 getPhone(id:number){
   return this.phones.find((phone)=>{
     phone.id === id
   })
 }

вот код компонента

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Phone, PhoneService } from '../phone.service';



@Component({
 selector: 'app-phones',
 templateUrl: './phones.component.html',
 styleUrls: ['./phones.component.css']
})
export class PhonesComponent implements OnInit {
 phones:Phone[]|any

 constructor(private route:Router,private posts:PhoneService) { }

 ngOnInit(): void {
   this.phones = this.posts.phones
   console.log(this.phones)
 }

}

вот шаблон

<div class="content" *ngFor='let phone of phones'>
<div class="title">
 <h1>N||{{phone.id}}</h1>
 <hr>
</div>
<img [src]='phone.url' [routerLink]="['posts/:',phone.id]">
<hr>
<strong>BRAND||{{phone.brand}}</strong>
<hr>
<h2>MODEL||{{phone.model}}</h2>
<router-outlet></router-outlet>
</div>

это все мягко говоря нечитаемо. перенеси в стакблиц

Вот так ты вот и с докой ангуляра и докой js

не) там с докой все ок. Кроме раздела с цветовой палитрой)

Сразу что бросилось в глаза. posts/:....зачем ":"?

Кто-нибудь знает что за прикол?
NG0303: Can't bind to 'ngif' since it isn't a known property of 'a'.
<a *ngif="!auth.user">Login</a>

CommonModule в импортах. 12.0.1

перезапуск не помог?

Перезапуск, чиска node_modules и package-lock

магия

Добрый день, ребят подскажите плиз, какая разница если импортировать дочерний модуль сразу или через роутинг модуль чрез children

path: '',
       component: DemoComponent,
       children: [
           {
               path: 'styles',
               loadChildren: () => import('./pages/styles/styles.module').then(m => m.StylesModule)
           },
           {
               path: 'shared',
               loadChildren: () => import('./pages/shared/shared.module').then(m => m.SharedModule)
           }
       ]

как лучше? сразу или через роутинг подгружать?

Сразу 2 большие разницы. Как минимум)

не ну ясно что они не подгружены сразу