Question

我的路线类似：

app-routing.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.module.ts

npm start

运行ng serve时出现错误

无法读取未定义的属性'loadChildren'

Answer 1

原因：路由变量未定义为常量。

特别是，当我处于npm start（let routes: Routes; routes = [ { path: '', children: [ { path: '', children: [ { path: '', children: [ {path: '', component: HeaderComponent, outlet: 'header'}, {path: '', component: FooterComponent, outlet: 'footer'} // Routes that display a header and footer go here. ] }, { path: '', children: [ { path: '/frame', children: [{ path: 'search', loadChildren: () => import('./search/search.module').then(module => module.SearchModule) }] } ] } ] } ] }, { path: '**', redirectTo: '/frame/search', pathMatch: 'full' } ];）模式下并且浏览器处于/ frame / search路径时，我修改了routes文件以使其包含**路径（只是随机添加来自另一个工作应用程序的内容。

npm start

浏览器刷新，出现控制台错误：

未捕获的错误：组件HeaderComponent不属于任何NgModule或模块尚未导入到模块中。

很确定，我没有将这些导入添加到app.module中。我不知道是否仅通过进行任何更改或通过添加此特定的路由更改来显示错误消息。我确实知道，如果在添加**路径后运行import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { FooterModule } from './footer/footer.module'; import { HeaderModule } from './header/header.module'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule, HeaderModule, FooterModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }，将无法显示控制台错误。

添加这些导入后：

let routes: Routes;
routes = [
  {
    path: '',
    children: [
      {
        path: '',
        children: [
          {
            path: '',
            children: [
              {path: '', component: HeaderComponent, outlet: 'header'},
              {path: '', component: FooterComponent, outlet: 'footer'}
              // Routes that display a header and footer go here.
            ]
          },
          {
            path: '',
            data: {header: false, footer: false},
            children: [
              {
                path: 'frame',
                children: [{
                  path: 'search',
                  loadChildren: () => import('./search/search.module').then(module => module.SearchModule)
                }]
              }
            ]
          }
        ]
      }
    ]
  },
  {
    path: '**',
    redirectTo: '/frame/search',
    pathMatch: 'full'
  }
];

我又遇到了一个控制台错误：

路由“ / frame”的配置无效：路径不能以斜杠开头

我已解决：

npm start

我很乐意去（或者我想）。

const routes: Routes = [ { path: '', children: [ { path: '', children: [ { path: '', children: [ {path: '', component: HeaderComponent, outlet: 'header'}, {path: '', component: FooterComponent, outlet: 'footer'} // Routes that display a header and footer go here. ] }, { path: '', data: {header: false, footer: false}, children: [ { path: 'frame', children: [{ path: 'search', loadChildren: () => import('./search/search.module').then(module => module.SearchModule) }] } ] } ] } ] }, { path: '**', redirectTo: '/frame/search', pathMatch: 'full' } ];仍在引发错误。

在比较新项目和我的项目之间的路线文件时，我注意到路线被定义为常量。我可能是从先前项目复制了路由，或者WebStorm不确定地修改了代码。

所以最后我的应用程序路由了。

public interface Human {
    void say();
}

public void test(Human human) {
    ...
    human.say();
    ...
}
.....
public static void main(String[] args) {
    ...
    object.test(new Human{
        @Override
        public void say() {
            System.out.println("saying...")
        }
    })    

}

如何解决无法读取未定义的属性“ loadChildren”

1 个答案: