Error: Can't resolve '@angular/compiler/src/core'

Question

I am trying to learn Angular 5 and after completing several tutorial I have purchased a template to help me learn how to structure my application.

I am trying to add my own module while following the structure of this template I purchased but I get the below message.

ERROR in ./src/app/pages/property/property.component.ts Module not found: Error: Can't resolve '@angular/compiler/src/core' in '....\myProject\src\app\pages\property'

My module definatly exists in that location so I feel I have have misunderstood how modules and components are referenced and how the routing is used.

I think the best way to try and get help here is by walking you through what I think is/should be happening.

index.html

index.html calls the component with the selector az-root, in this case app.component

...other stuff...
<az-root></az-root>
...other stuff...

app.component.ts

displays the default page defined in the routes property of app.routing.ts

...some imports...
@Component({
  selector: 'az-root',
  encapsulation: ViewEncapsulation.None,
  template:`<router-outlet></router-outlet>`,
  styleUrls: ['./app.component.scss']
})
export class AppComponent { }

app.routing.ts

loads the pages module located at app/pages/pages.module.ts

...some imports...
export const routes: Routes = [
  { path: '', redirectTo: 'pages', pathMatch: 'full' },
  { path: 'pages', loadChildren: 'app/pages/pages.module#PagesModule' },
  { path: '**', component: ErrorComponent }
];
...other stuff...

PagesModule

i'm not sure how the PagesModule defines the PagesComponent because the PagesComponent selector is never called. But I have guessed that pages.routing.ts defines it

...some imports...
@NgModule({
  imports: [
    CommonModule,
    routing
  ],
  declarations: [ 
    SidebarComponent,
    NavbarComponent,
    PagesComponent
  ],
  providers:[
  ]
})
export class PagesModule { }

pages.routing.ts

displays the pagesComponenet which calls a <router-outlet></router-outlet> in its template. Under the <router-outlet></router-outlet> of the pagesComponenet I would expect the propertyComponent to display but adding a reference to my propertyModule in the children array I get the afore mentioned error, what have I done wrong?

...some imports
export const routes: Routes = [
    {
        path: '', 
        component: PagesComponent,
        children:[
            { path:'', redirectTo:'property', pathMatch:'full' },
            { path: 'property', loadChildren: 'app/pages/property/property.module#PropertyModule' }
        ]
    }
];

export const routing: ModuleWithProviders = RouterModule.forChild(routes);

pages.component.ts

...some  imports...
@Component({
  selector: 'az-pages',
  encapsulation: ViewEncapsulation.None,
  templateUrl: './pages.component.html',
  styleUrls: ['./pages.component.scss'],
  providers: [ AppState ]
})
export class PagesComponent implements OnInit {
...other stuff...

pages.component.html

<div class="container-fluid">         
    <div class="row"> 
        <div class="main">
            <router-outlet></router-outlet>
        </div> 
    </div>
</div>

Answer 1

Be careful with the auto import in vs code for angular, make sure that you are importing

Component, NgModule from @angular/core, not @angular/compiler/src/core

@angular/compiler/src/core is sometimes what gets inserted when you hit tab to auto-import