index.html в SpringBoot 2.0.5.RELEASE + Angular 5 + Spring Data + Rest project - PullRequest
0 голосов
/ 08 октября 2018

Я полностью новичок в Angular, и я создал проект, используя SpringBoot 2.0.5.RELEASE, Angular 5 и данные Spring для создания сквозного одностраничного Java-веб-приложения.Я использую весеннюю загрузку 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:

import {Component} из '@ 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
...