错误：无法解析“@angular/compiler/src/core”答案

【问题标题】：Error: Can't resolve '@angular/compiler/src/core'错误：无法解析“@angular/compiler/src/core”
【发布时间】：2018-03-21 07:50:20
【问题描述】：

我正在尝试学习 Angular 5，在完成了几个教程后，我购买了 template 来帮助我学习如何构建我的应用程序。

我正在尝试按照我购买的此模板的结构添加自己的模块，但我收到以下消息。

./src/app/pages/property/property.component.ts 中的错误未找到模块：错误：无法解析“....\myProject\src\app\pages\property”中的“@angular/compiler/src/core”

我的模块肯定存在于那个位置，所以我觉得我误解了如何引用模块和组件以及如何使用路由。

我认为在这里尝试获得帮助的最佳方式是引导您了解我认为/应该发生的事情。

index.html

index.html 使用选择器 az-root 调用组件，在本例中为 app.component

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

app.component.ts

显示在app.routing.ts 的routes 属性中定义的默认页面

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

app.routing.ts

加载位于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

我不确定PagesModule 是如何定义PagesComponent 的，因为从未调用过PagesComponent 选择器。但我猜到pages.routing.ts 定义了它

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

pages.routing.ts

显示在其模板中调用<router-outlet></router-outlet> 的pagesComponenet。在pagesComponenet 的<router-outlet></router-outlet> 下，我希望propertyComponent 能够显示，但是在children 数组中添加对我的propertyModule 的引用我得到了上述错误，我做错了什么？

...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>

【问题讨论】：

标签： angular

【解决方案1】：

注意 Angular 的 vs 代码中的自动导入，确保您正在导入

Component, NgModule 来自@angular/core，不是 @angular/compiler/src/core

@angular/compiler/src/core 有时会在您点击选项卡自动导入时插入

【讨论】：

谢谢，就是这样！虽然对我来说 VSCode 从“@angular/compiler/src/core”添加了 NO_ERRORS_SCHEMA 的导入。将其更改为 import { NO_ERRORS_SCHEMA } from '@angular/core' 解决了问题。