更新到角度6后找不到app-root

Posted 2021-04-09

我已经将我的Angular项目从5.2.11更新到6.1.0。

我正在使用Angular的更新指令，现在编译器正在运行而没有任何错误。

现在我访问localhost：4200并且找不到app-root。

Unhandled Promise rejection: The selector "app-root" did not match any elements ; Zone: <root> ; Task: Promise.then ; Value: Error: The selector "app-root" did not match any elements
at DefaultDomRenderer2.push../node_modules/@angular/platform-browser/fesm5/platform-browser.js.DefaultDomRenderer2.selectRootElement (VM3279 vendor.js:69776)

app.module

@NgModule({
  declarations: [
    AppComponent,
    ...,
bootstrap: [AppComponent]
})
export class AppModule { }

app.component

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: []
})

export class AppComponent implements OnInit {
  ...
}

app.component.html

<router-outlet></router-outlet>

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
...

platformBrowserDynamic().bootstrapModule(AppModule);

的index.html

<app-root>
  <div class="app-loading">
    <img src="../../assets/images/icon.svg">
    <p>Loading...</p>
  </div>
</app-root>

有什么遗失的吗？

答案

在app.module中的@NgModule({...之前添加以下代码路由器规则

例：

const appRoutes: Routes = [
  { 
    path: '', 
    redirectTo: 'home-page',
    pathMatch: 'full',
  },
  {
    path: 'home-page',
    component: HomePageComponent,
  },
  { 
    path: 'foo-page', 
    component: FooPageComponent 
  },
  { 
    path: '**', 
    component: NotFoundComponent 
  }
];

加入imports:[...

RouterModule.forRoot(
  appRoutes
)

请记住，<router-outlet></router-outlet>将仅作为“路由控制器”提供