错误:无法解析'@ angular/compiler/src/core'

Question

我正在尝试学习Angular 5,在完成几个教程后,我购买了一个模板来帮助我学习如何构建我的应用程序.

我正在尝试添加我自己的模块,同时遵循我购买的这个模板的结构,但我收到以下消息.

./src/app/pages/property/property.component.ts中的错误找不到模块:错误:无法解析'....\myProject\src\app \中的'@ angular/compiler/src/core'网页\财产"

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

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

的index.html

在这种情况下,index.html使用选择器az-root调用组件 app.component

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

app.component.ts

显示routes属性中定义的默认页面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

加载位于的页面模块 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

显示在其模板中pagesComponenet调用a的内容<router-outlet></router-outlet>.根据<router-outlet></router-outlet>对的pagesComponenet我会期待propertyComponent显示,但在添加引用我propertyModule children阵列我得到上述提到的错误,我做了什么错？

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

小心角色的vs代码中的自动导入,请确保您正在导入

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

@angular/compiler/src/core 有时候当你点击Tab键进行自动导入时会插入什么