Angular2- 'router-outlet'은 알려진 요소가 아닙니다.


79

깊은 자식 경로가있는 경로를 만들었습니다. NgModule에 래핑 <router-outlet>AdminComponent 구성 요소에 추가 했습니다 . 하지만 페이지를 새로 고친 후이 오류가 발생했습니다.

'router-outlet' is not a known element

admin.module.ts로 일부 모듈을 가져 오는 것을 잊었 기 때문에 발생했을 수 있습니다.

도와주세요. 감사.

app.routes.ts

export const routes: Routes = [
    {
        path: '',
        component: AppComponent,
        children: [
            {
                path: '',
                component: LoginComponent
            },
            {
                path: 'admin',
                component: AdminComponent
            },
            {
                path: 'user',
                component: UserComponent
            },
            {
                path: 'there',
                component: ThereComponent
            }
        ]
    }
]

app.module.ts

@NgModule({
    imports: [
        BrowserModule,
        AppRoutes,
        FormsModule,
        ReactiveFormsModule,
        HttpModule,
        RouterModule,
        TranslateModule.forRoot({
            provide: TranslateLoader,
            useFactory: (http: Http) => {
                return new TranslateStaticLoader(http, './src/assets/i18n', '.json')
            },
            deps: [Http]
        }),
        UserComponentModule,
        AdminComponentModule,
        LoginComponentModule,
        ThereComponentModule,
        DashboardComponentModule
    ],
    declarations: [
        AppComponent
    ],
    providers: [
        FormBuilder
    ],
    bootstrap: [AppComponent]
})

admin.component.tsadmin.module.ts

//  admin.component.ts
import {Component} from "@angular/core";

@Component({
    selector: 'admin',
    template: "<router-outlet></router-outlet>",
})

export class AdminComponent {
    constructor() {

    }
}

//  admin.module.ts
const ADMIN_DECLARATION = [
    AdminComponent
];

@NgModule({
    imports: [
        BrowserModule,
        TranslateModule,
        FormsModule,
        ReactiveFormsModule
    ],
    declarations: [
        ADMIN_DECLARATION
    ],
    exports: [
        ADMIN_DECLARATION
    ],
    providers: [
        TranslateService,
        FormBuilder
    ]
})

export class AdminComponentModule {

}

난 그냥 없어진;
Mehraj 말릭

답변:


87

AdminComponent의 일부이며 모듈 내부로 AdminComponentModule가져 오지 않았습니다 .RouterModuleAdminComponentModule

//  admin.component.ts
import {Component} from "@angular/core";

@Component({
    selector: 'admin',
    template: "<router-outlet></router-outlet>",
})

export class AdminComponent {
    constructor() {

    }
}

//  admin.module.ts
const ADMIN_DECLARATION = [
    AdminComponent
];

@NgModule({
    imports: [
        BrowserModule,
        TranslateModule,
        RouterModule,
        FormsModule,
        ReactiveFormsModule
    ],
    declarations: [
        ADMIN_DECLARATION
    ],
    exports: [
        ADMIN_DECLARATION
    ],
    providers: [
        TranslateService,
        FormBuilder
    ]
})

export class AdminComponentModule {

}

안녕하세요 @yankee 저는 지연 모듈 기능을 사용하고 있으며 app.routing.module.ts 파일을 분리했습니다. './app-routing.module'에서 'import {AppRoutingModule}을 포함하면'; app.module.ts에서 가져온 다음 다시 stackoverflow.com/questions/49670232/… 문제에 직면 합니다. 가능하면 도움을 요청하세요. '
Swapnil Yeole

46

RouterModule을 내 보내지 않았습니다.

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

1
알겠습니다. 고마워!
Jonca33 2018

7

이 코드 추가

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

너의 ~에게 app.module.ts

나를 위해 일했습니다.


내 기쁨 선생님 :)
pulkit219

도움이 돼서 고마워 .... 일반적으로 웹 사이트에서 모든 문서를 읽거나 경험으로 알고 있습니까 ????
Gvs Akhil

@Akhil 내 기쁨 아니, 방금 당신처럼 보였고 일부 의견이 나를 도왔습니다. 문서를 읽는 것만으로는 결코 쉬운 일이 아닙니다!
pulkit219

4

app.module.ts 파일에서

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

//and then write within imports
@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent
  ],
  imports: [
    BrowserModule,
    **routing**,
    EmployeeModule
  ],

0

이것은 나를 위해 작동합니다.

[NO_ERRORS_SCHEMA]AppModule에 스키마 를 추가합니다 .

import { NO_ERRORS_SCHEMA } from '@angular/core';

@NgModule({
  schemas : [NO_ERRORS_SCHEMA]  
})

0

app.module.ts

import { MyRoutingModule } from './MyRoutingModulePath';

  @NgModule({
  imports: [
    MyRoutingModule
  ])

이것은 저자의 질문에 답할 수 있지만 설명하는 단어와 문서 링크가 부족합니다. 원시 코드 조각은 주변에 일부 문구가 없으면 그다지 도움이되지 않습니다. 좋은 답변을 작성하는 방법을 찾을 수도 있습니다. 매우 도움 있습니다. 답변을 수정하십시오.
hellow

내 늦은 답변에는 원본이 없습니다. 인터넷에서 찾은 솔루션을 구현하는 데 어려움을 겪었습니다. 내 건축 적 특성으로 인해 과도하고 혼란스럽고 시간이 많이 걸립니다. 프로세스를 가르치는 대신 해결책을 알려줄 짧은 대답을 찾고있었습니다. 마침내 그것을 관리하고 나서 전체 예제에서 관찰하기 어려운 것이 무엇인지 분명해졌습니다. 물론 실패 할 수있는 방법은 많습니다. 그러나 많은 사람들이 나와 같은 방식으로 실패 할 것입니다. 이 대답은 문제를 해결하기에는 너무 가깝지만 제대로하기에는 거리가 먼 사람들을위한 것입니다.
profimedica
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.