Почему мой файл app.component.html не работает? - PullRequest
Новая
       21

Почему мой файл app.component.html не работает?

0 голосов
/ 21 сентября 2018

Мое основное угловое приложение не отображает содержимое app.component.html, всегда у меня есть содержимое индекса html.

Индекс HTML: 

<!DOCTYPE html>
<html>
  <head>
    <title>Angular 6</title>
    <base href="/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">

    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>

    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <script src="systemjs.config.js"></script>
    <script>
      System.import('main.js').catch(function(err){ console.error(err); });
    </script>
  </head>

  <body>
      <my-app></my-app>
  </body>
</html>

Компонент приложения ts: 

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

@Component({
  selector: 'my-app',
    templateUrl: 'wwwroot/app.component.html'
})
export class AppComponent { title = 'My First Angular App!'; }

Модуль приложения ts: 

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

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

@NgModule({
  
    imports: [BrowserModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

html компонента приложения: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
   abc
    
</body>
</html>

Результат:

введите описание изображения здесь

введите изображениеописание здесь

Я использую Angular 6 с приложением ASP.NET CORE 1.1.

Ответы [ 2 ]

0 голосов
/ 21 сентября 2018

app.component.html не является корнем вашей веб-страницы, это корень вашего углового приложения.index.html - единственное место, где должен быть тэг <html>.index.html содержит тег <my-app></my-app>, который является корнем вашего углового приложения.

Если вы добавите <html></html> в свой angular.component.html, когда ваше угловое приложение будет помещено в index.html после запуска 'ng start', ваша скомпилированная веб-страница будет выглядеть примерно так: 

<html> <!-- from index.html -->
   ...
   <my-app>
      <html> <!-- from app.component.html -->
         ...
      </html>
   </my-app>
</html>

, и ваша веб-страница не может содержать два корневых элемента <html>.

Чтобы ваш пример работал, удалите из приложения следующие теги.component.html:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title> and <body>

0 голосов
/ 21 сентября 2018

Вам не нужны <!DOCTYPE html> <html> <head> <body> теги за пределами index.html, поскольку HTML-код в component.html вставляется туда, где находится тег <my-app></my-app>.

С содержимым component.html страница результатов будет: 

<!DOCTYPE html>
<html>
  <head>
    <title>Angular 6</title>
    <base href="/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">

    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>

    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <script src="systemjs.config.js"></script>
    <script>
      System.import('main.js').catch(function(err){ console.error(err); });
    </script>
  </head>

  <body>
      <!DOCTYPE html>
      <html>
      <head>
          <meta charset="utf-8" />
          <title></title>
      </head>
      <body>
         abc

      </body>
      </html>

  </body>
</html>

, следовательно, недействительно, потому что у вас будет два тезиса: <!DOCTYPE html> <html> <head> <body>

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...