web-dev-qa-db-ja.com

<app-root>がいっぱいにならない

私はAngular 2の初心者で、次のファイルで構成される小さなプロジェクトから始めました。

app.module.ts

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

import { MaterialModule } from './material/material.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

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

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

app.component.ts

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

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

app.component.html

<span>Welcome to {{title}}</span>

また、私のindex.htmlは次のようになります。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My App</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-root>タグは結果のページで空のままであり、テンプレートHTMLが追加されていません。テンプレートのURLを変更してテンプレートの読み込みに問題があるかどうかをテストしましたが、テンプレートファイルが見つからず、コンパイルに失敗します。これは、これが問題になることはないことを意味します。

ここで足りないものはありますか？

angulartypescriptangular-components
4
fusionlightcat

モジュールのNgModuleセクションにAppComponentデコレータとimportsクラスを追加しましたがこれは誤りです。 NgModuleセクションからimportsデコレータを削除します。また、モジュールのAppComponentからimportsを削除します。

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

imports属性には、NgModuleで装飾されたクラスのみを含める必要があります。

8
cyr_x

そのため、ng build --prodを実行し、python -m http.serverを使用してサービスを提供しようとしたときに、この問題が発生しました。 この問題は私が得ていたもののように見えます 私が遭遇した問題は、chromeが誤った「テキスト/プレーン」MIMEタイプであるためにcssまたはjsファイルをロードしないということでした。ノードに切り替えてpythonからエクスプレスし、そこにファイルをロードすると、すべてが完全にロードされました。これをExpressで実行するためのコードは次のとおりです。

 const express = require('express')
 const app = express()
 const port = 4545
 app.use('/', express.static('public')) //public is a folder in the directory where your index.html and other content go
 app.get('/', function (req, res) {
 res.redirect("/index.html")
    })
 app.listen(port, () => console.log("Example app listening on port"+port+"!"))

これをindex.jsとして保存し、ノードindex.jsを実行すると、ポート4545で実行され、パブリックディレクトリにサービスを提供します。

ザ・

<app-root> </ app-root>

充填しました

0
user1562431