Question

我遇到了与路线相关的问题：

例外：未捕获（承诺）：错误：无法找到主要插座加载＆＃39; HomeComponent＆＃39;

这是package.json文件：

因此，路由器版本是3.2.0。

我的app.module.ts文件：

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { FormsModule } from '@angular/forms';
import { Location, LocationStrategy, HashLocationStrategy } from '@angular/common';
import { Headers, RequestOptions, BaseRequestOptions} from '@angular/http';

import { AppComponent }  from './app.component';
import { HomeComponent } from './components/home.component';
import { MonitoringComponent } from './components/monitoring.component';
import { MonitoringApiComponent } from './components/monitoringApi.component';
import { PerfComponent } from './components/perf.component';
import { TaciteComponent } from './components/tacite.component';

import { routing } from './routes';

class AppBaseRequestOptions extends BaseRequestOptions {
    headers: Headers = new Headers();

    constructor() {
        super();
        this.headers.append('Content-Type', 'application/json');
        this.body = '';
    }
}

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        routing
    ],
    declarations: [AppComponent, HomeComponent, MonitoringComponent, MonitoringApiComponent, PerfComponent, TaciteComponent],
    providers: [
        { provide: LocationStrategy, useClass: HashLocationStrategy },
        { provide: RequestOptions, useClass: AppBaseRequestOptions }],
    bootstrap: [AppComponent]
})
export class AppModule { }

我的routes.ts文件：

import { ModuleWithProviders }  from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { HomeComponent } from './components/home.component';
import { MonitoringComponent } from './components/monitoring.component';
import { MonitoringApiComponent } from './components/monitoringApi.component';
import { PerfComponent } from './components/perf.component';
import { TaciteComponent } from './components/tacite.component';

const appRoutes: Routes = [
    {
        path: '',
        component: HomeComponent
    },
    {
        path: 'home',
        component: HomeComponent
    },
    {
        path: 'monitoring',
        component: MonitoringComponent
    },
    {
        path: 'monitoringapi',
        component: MonitoringApiComponent
    },
    {
        path: 'perf',
        component: PerfComponent
    },
    {
        path: 'tacite',
        component: TaciteComponent
    }
];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

我的home.component.ts文件：

import { Component } from '@angular/core';
//import { ROUTER_DIRECTIVES } from '@angular/router';

@Component({
    selector: 'home',
    templateUrl: 'app/components/home.component.html'
})
export class HomeComponent {

    constructor() {}
}

在我的app.component.html和home.component.html中，我只需添加：

<router-outlet></router-outlet>

我听说有些人说我们必须添加这段代码：

import { ROUTER_DIRECTIVES } from '@angular/router';

但遗憾的是，该组件版本似乎已弃用。

请问任何建议/解决方案？此致

Answer 1

从 home.component.html

中删除<router-outlet></router-outlet>

快乐的编码！

Answer 2

这个错误意味着您已经定义了路由，但是您从未定义过路由器插座，或者您已经在子组件（home.component）中定义了它，但是您还没有为它定义子路由， 所以Angular很难找到主要的路由器插座。

因此，你应该从home.component中删除路由器插座，或者如果你需要它，你应该定义子路由。

Angular 2和路由问题

2 个答案: