Question

我有以下Angular plnkr.co：https://plnkr.co/edit/xA8jU4QYDGxzohNg5NFj?p=preview。

// app.component.ts

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html'
})
export class AppComponent { name = 'Angular'; }

// app.component.html

testing...
<router-outlet></router-outlet>

浏览器中的oputput是：

Loading AppComponent content here ...

为什么它没有看到app.component.html文件？或者这是另一个问题吗？

Answer 1

试试这样：

在 app.module.ts

下面添加以下内容

import { NgModule, CUSTOM_ELEMENTS_SCHEMA  } from '@angular/core';

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

plnkr demo

Answer 2

您的app.component.html包含<router-outlet></router-outlet>，但未定义子路由。这导致了这个问题。

要解决此问题，您需要从app.component.html中删除路由器插座，或者您应该在app.router.ts中定义子路由配置。

工作示例：https://plnkr.co/edit/wbW1s8PqDtu35GR8HC8D?p=preview

访问Angular Guide for routes以了解有关路由配置和子路由的更多信息。

Answer 3

app.component.ts

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

    @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
    })
    export class AppComponent {
    title = 'app';
    }
    app.component.html
    <router-outlet></router-outlet>

请在index.html中写下以下代码

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Myapp</title>
    <base href="/">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    </head>
    <body>
    <app-root></app-root>  
    </body>
    </html>

Answer 4

在这里你错过了正确的路由实现，控制台中有几个错误请参考它们。

app.component.html：

testing...
<div routeLink="x" routerLinkActive="active">
  Click
</div>
<router-outlet></router-outlet>

app.route.ts：

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


@Component({
  selector: 'x',
  templateUrl: './route.html'
})

export class X{

}


const routes1: Routes = [
    {path : '', redirectTo: '/x', pathMatch: 'full'},
    {path : 'x', component: X}
  ]

@NgModule({
  imports:      [ RouterModule.forRoot(routes1) ],
  exports: [RouterModule]
})
export class AppRoutingModule{

}

请在下面找到非常接近您要求的工作示例： https://plnkr.co/edit/xA8jU4QYDGxzohNg5NFj?p=preview

Answer 5

它对我不起作用，请尝试以下方法：

src / app / app.module.ts

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

通过此有用的链接： https://malcoded.com/posts/why-angular-not-works/

为什么app.component.html没有渲染？

5 个答案: