Question

我试图在另一个组件中创建一个组件。但是，当我添加嵌套组件（ticket-adder）时，它会破坏我的应用程序。即我得到的只是＆＃34; loading ...＆＃34;没有别的东西加载。

app.module.ts

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

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

app.component.ts

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

@Component({
    selector: 'my-app',
    template: `<h1>Hello There, I\'m Angular2</h1>
                </br>
                <ticket-adder></ticket-adder>`
})
export class AppComponent { }

票证adder.component.ts

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

@Component({
    selector: 'ticket-adder',
    template: '<h1>Ticket Adder</h1>'
})

export class TicketAdderComponent { }

ETA：添加错误日志

(index):16 Error: (SystemJS) Template parse errors:(…)(anonymous function) @     (index):16
ZoneDelegate.invoke @ zone.js:203
Zone.run @ zone.js:96 (anonymous function) @ zone.js:462
ZoneDelegate.invokeTask @ zone.js:236
Zone.runTask @ zone.js:136
drainMicroTaskQueue @ zone.js:368
ZoneTask.invoke @ zone.js:308

的index.html

<html>
<head>
    <title>Angular QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
    <!-- 1. Load libraries -->
    <!-- Polyfill(s) for older browsers -->
    <script src="libs/core-js/shim.min.js"></script>
    <script src="libs/zone.js/zone.js"></script>
    <script src="libs/reflect-metadata/Reflect.js"></script>
    <script src="libs/systemjs/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
        System.import('app').catch(function (err) { console.error(err); });
    </script>
</head>
<!-- 3. Display the application -->
<body>
    <my-app>Loading...</my-app>
</body>
</html>

ETA 2：我注意到visual studio正在报告此错误＆＃34;找不到模块＆＃39; ./标签＆＃39;。＆＃34;在Angular / Core

中的parser.d.ts中

Answer 1

原来模板中的</br>标签是问题所在。一旦我删除它。一切都开始了。

@anshuVersatile示例中没有标记，所以它有效。

工作代码

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

@Component({
    selector: 'my-app',
    template: `<h1>Hello There, I\'m Angular2</h1><ticket-adder></ticket-adder>`
})
export class AppComponent { }

嵌套在app.component中的组件会中断app

1 个答案: