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

时间:2018-03-20 23:46:44

标签: angular

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

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

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

enter image description here

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

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

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);

1 个答案:

答案 0 :(得分:17)

请注意角色的vs代码中的自动导入,确保导入

来自Component, NgModule

@angular/core @angular/compiler/src/core

@angular/compiler/src/core有时会在您点击标签进行自动导入时插入