我正在尝试学习Angular 5,在完成几个教程后,我购买了template来帮助我学习如何构建我的应用程序。
我正在尝试添加自己的模块,同时遵循我购买的此模板的结构,但我收到以下消息。
> ./src/app/pages/property/property.component.ts中的错误 找不到模块:错误:无法解析' @ angular / compiler / src / core'在' .... \ myProject \ src \ app \ pages \ property'
我的模块肯定存在于该位置,因此我觉得我误解了如何引用模块和组件以及如何使用路由。
我认为在这里尝试和获得帮助的最佳方式是引导您完成我认为/应该发生的事情。
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
的{{1}}。在<router-outlet></router-outlet>
的{{1}}下我希望propertyComponent显示但是在<router-outlet></router-outlet>
数组中添加了对propertyModule的引用我得到了上面提到的错误,我做错了什么?< / p>
pagesComponenet
pages.component.ts
children
pages.component.html
...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);
答案 0 :(得分:17)
请注意角色的vs代码中的自动导入,确保导入
来自Component, NgModule
的 @angular/core
,不 @angular/compiler/src/core
@angular/compiler/src/core
有时会在您点击标签进行自动导入时插入