2017-09-18 11 views
1

質問が非常に簡単な場合は、私を許してください。私はちょうどAngularを学び始めました。 私は最初のアプリを試しています。しかし、それはコンパイルされません。それは私のコードの一部を認識しないためです。 私がここで間違っていることについて誰かが私にいくつかのヒントを与えることができるかどうか疑問に思っていましたか?モジュールの解析に失敗しました:このファイルタイプを処理するために適切なローダーが必要な場合があります

app.component.htmlファイル:

<!--The whole content below can be removed with the new code.--> 
<div style="text-align:center"> 
    <h1> 
    Welcome to {{pageTitle}}!! 
    </h1> 
    ... Starter Files ... 
</div> 

app.component.tsをファイル

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

@Component({ 
    selector: 'pm-root', 
    template: <div><h1>{{pageTitle}}</h1></div> // **this line of code created error** 
}) 
export class AppComponent { 
    pageTitle: string = 'Angular: Getting Started'; 
} 

app.module.ts

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { AppComponent } from './app.component'; 

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

index.htmlを

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Acme Product Management</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> 
    <pm-root></pm-root> 
</body> 
</html> 

ここにエラーがあります:enter image description here これを解決する方法についていくつかお手伝いしますか?

答えて

3

あなたのテンプレートでバッククォートや引用符を持っていない:

テンプレートは、ECMAScriptの内の複数行の文字列である2015年バッククォート単一引用符 と同じ文字ではありません-which (). The backtick () ( ') - 複数行にわたる文字列を構成できます。 は、HTMLをより読みやすくします。

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

    @Component({ 
     selector: 'pm-root', 
     template: `<div><h1>{{pageTitle}}</h1></div>` // **added backticks** 
    }) 
    export class AppComponent { 
     pageTitle: string = 'Angular: Getting Started'; 
    } 
+0

ご協力いただきありがとうございます。今コンパイル中 – user1836957

関連する問題