Question

我是angular的新手，我已经使用SpringBoot 2.0.5.RELEASE，Angular 5和spring数据创建了一个项目，以构建端到端的单页Java Web应用程序。我使用Spring Boot 1.5来公开REST API和angular5，并通过路由来构建将消耗服务器公开的API的客户端。

这是我的index.html页面：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>PortalApp</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>

这是我的app.component.ts：

从'@ angular / core'导入{组件};

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

并且当我启动该应用程序时，我只会看到一个白页并且没有错误

如果检查源代码，我会看到：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>PortalApp</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>
<script type="text/javascript" src="runtime.js"></script>
<script type="text/javascript" src="polyfills.js"></script>
<script type="text/javascript" src="styles.js"></script>
<script type="text/javascript" src="vendor.js"></script>
<script type="text/javascript" src="main.js"></script></body>
</html>

，这里是app.component.html

的内容

  <!--The content below is only a placeholder and can be replaced.-->
    <div style="text-align:center">
      <h1>
        Welcome to {{ title }}!
      </h1>
      <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
    </div>
    <h2>Here are some links to help you start: </h2>
    <ul>
      <li>
        <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
      </li>
      <li>
        <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
      </li>
      <li>
        <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
      </li>
    </ul>

在控制台错误中，我看到了：

compiler.js:1021 Uncaught Error: Template parse errors:
Unexpected character "<" ("
  </tr>
  </theadv
  [ERROR ->]<tbody>
  <tr *ngFor="let user of users">
    <td class="hidden"></td>
"): ng:///AppModule/UserComponent.html@13:2
    at syntaxError (compiler.js:1021)
    at DirectiveNormalizer.push../node_modules/@angular/compiler/fesm5/compiler.js.DirectiveNormalizer._preparseLoadedTemplate (compiler.js:2439)
    at compiler.js:2431
    at Object.then (compiler.js:1012)
    at DirectiveNormalizer.push../node_modules/@angular/compiler/fesm5/compiler.js.DirectiveNormalizer._preParseTemplate (compiler.js:2431)
    at DirectiveNormalizer.push../node_modules/@angular/compiler/fesm5/compiler.js.DirectiveNormalizer.normalizeTemplate (compiler.js:2417)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.loadDirectiveMetadata (compiler.js:10330)
    at compiler.js:23883
    at Array.forEach (<anonymous>)
    at compiler.js:23882

SpringBoot 2.0.5.RELEASE + Angular 5 + Spring Data + Rest项目中的index.html

0 个答案: