Я полностью новичок в 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