Question

我刚运行ng serve -o，仅看到我刚开始修改的angular应用程序中显示的index.html文件。该页面暂时只打个招呼：

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

Answer 1

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

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>应该定义。

检查working demo

基本角度组件未显示在浏览器中

1 个答案: