Angular2 - 'router-outlet' không phải là một phần tử đã biết


79

Tôi đã tạo các tuyến đường với các đường con sâu. Tôi thêm <router-outlet>vào AdminComponent thành phần mà tôi quấn vào NgModule. Nhưng sau khi làm mới trang, tôi gặp lỗi này:

'router-outlet' is not a known element

Có thể nó xảy ra vì tôi quên nhập một số mô-đun vào admin.module.ts

Xin vui lòng giúp đỡ. Cảm ơn.

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 {

}

Tôi chỉ thiếu một;
Mehraj Malik

Câu trả lời:


87

AdminComponentlà một phần của AdminComponentModulevà bạn chưa nhập mô-đun RouterModulebên trong AdminComponentModule:

//  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 {

}

Xin chào @yankee Tôi đang sử dụng tính năng mô-đun lười biếng và tôi đã tách tệp app.routing.module.ts. nếu tôi bao gồm 'nhập {AppRoutingModule} từ' ./app-routing.module '; và nhập trong app.module.ts, sau đó một lần nữa tôi phải đối mặt với sự cố stackoverflow.com/questions/49670232/… . Yêu cầu bạn giúp đỡ nếu có thể '
Swapnil Yeole

46

bạn đã không xuất RouterModule.

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

1
Vâng thưa ngài. Cảm ơn!
Jonca33

6

Thêm mã này

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

cho bạn app.module.ts

Đã làm cho tôi.


Rất hân hạnh, thưa ngài :)
pulkit219 23/07/17

Cảm ơn nó đã giúp tôi .... Nói chung hỏi các bạn có đọc tất cả các tài liệu từ các trang web hay chỉ biết những điều theo kinh nghiệm ????
Gvs Akhil,

@Akhil Niềm vui của tôi không, tôi chỉ nhìn lên như bạn và một số bình luận đã giúp tôi. Chỉ đọc tài liệu chưa bao giờ là dễ dàng đối với tôi!
pulkit219

4

Trong tệp app.module.ts của bạn

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

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

0

Điều này phù hợp với tôi:

Thêm lược đồ [NO_ERRORS_SCHEMA]trong AppModule.

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

@NgModule({
  schemas : [NO_ERRORS_SCHEMA]  
})

0

app.module.ts

import { MyRoutingModule } from './MyRoutingModulePath';

  @NgModule({
  imports: [
    MyRoutingModule
  ])

Mặc dù điều này có thể trả lời câu hỏi của các tác giả, nhưng nó thiếu một số từ giải thích và liên kết đến tài liệu. Các đoạn mã thô không hữu ích lắm nếu không có một số cụm từ xung quanh nó. Bạn cũng có thể thấy cách viết một câu trả lời hay rất hữu ích. Vui lòng chỉnh sửa câu trả lời của bạn.
hellow

Không có gì nguyên bản trong câu trả lời muộn của tôi. Tôi đã cố gắng triển khai các giải pháp tìm thấy trên internet. Tăng tốc, khó hiểu và tốn kém thời gian vì đặc thù kiến ​​trúc của tôi. Tôi đang tìm kiếm một câu trả lời ngắn gọn để chỉ cho tôi giải pháp thay vì dạy tôi quy trình. Cuối cùng thì tôi cũng quản lý được nó, tôi thấy rất khó để quan sát những ví dụ đầy đủ. Chắc chắn, có nhiều cách để thất bại. Nhưng nhiều người sẽ thất bại giống như tôi. Câu trả lời này dành cho những người rất gần để sửa nó nhưng vẫn chưa làm được nó đúng.
profimedica,
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.