基本的Angular组件在浏览器中没有显示

Question

基本的Angular组件在浏览器中没有显示

4

我刚刚运行了ng serve -o命令，但在我刚刚开始修改的angular应用程序中，只看到我的index.html文件显示出来。目前，页面上只显示了“hello”：

// index.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Appclient</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>hello</app-root>
</body>
</html>

app.component.html 文件中包含以下内容:

world
<app-header></app-header>
<router-outlet></router-outlet>

以下是 app.component.ts：

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

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

我不确定自己缺少了什么。

控制台错误如下：

ReferenceError: global is not defined

index.js:43 Webpack 18

- cdub

使用 angular-cli 来设置项目。 - Kamil Kiełczewski

我已经设置好了，但当我开始添加东西时出了问题。 - cdub

浏览器控制台显示的错误是什么？ - ArunKumar M N

1

不要忘记检查控制台！ - Prashant Pimpale

1

请查看以下链接：https://dev59.com/qVUL5IYBdhLWcg3wb3lz - ArunKumar M N

显示剩余6条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Piyush Jain · Answer 1

你需要在 app.module.ts 中使用 @angular/route

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

const routes: Routes = [
  { path: 'hello', component: HelloComponent }
];

@NgModule({
  imports:      [ BrowserModule, FormsModule, RouterModule.forRoot(routes) ],
  exports:      [ RouterModule ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

需要定义 <app-header></app-header>。

请检查工作演示。