錯誤：無法解析'@ 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

顯示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>

Answer 1

小心角色的vs代碼中的自動導入，請確保您正在導入

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

當您點擊Tab鍵進行自動導入時，有時會插入@angular/compiler/src/core