angular2快速启动仅显示正在加载..而不显示index.html的内容

2024-01-09

第一次使用 angular2 ,按照以下说明5 分钟快速入门指南 https://angular.io/docs/ts/latest/quickstart.html#对于角度 2。

一切正常,意味着运行时没有错误npm start

npm 启动镜像 https://i.stack.imgur.com/c8Pq7.png

但当我打开时

本地主机:3000

it show 加载中...不期望的文本。根据这个示例,index.html 的内容应该反映这一点。

在控制台中有错误:

异常:类型错误:无法将属性“endSourceSpan”设置为 null

main.ts

import { bootstrap } from '@angular/platform-browser-dynamic';

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

bootstrap(AppComponent);

应用程序组件.ts

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

@Component({
    selector: 'my-app',
    template: 'My first Angular 2 App</h1>'
})

export class AppComponent {}

索引.html

<html>
  <head>
    <title>Angular 2 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="node_modules/es6-shim/es6-shim.min.js"></script>

    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/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>

请帮我看看出了什么问题。


我认为你的主要组件的模板有问题。例如,未正确关闭的 HTML 元素:

template : '<div</div>'

请参阅此问题了解更多详细信息:

  • https://github.com/angular/angular/issues/7849 https://github.com/angular/angular/issues/7849

Edit

问题是你的h1不正确(没有开始元素):

@Component({
  selector: 'my-app',
  template: '<h1>My first Angular 2 App</h1>' // <------
})
export class AppComponent {}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

angular2快速启动仅显示正在加载..而不显示index.html的内容 的相关文章

随机推荐

  • C# 反序列化已移动或重命名的类

    如果我在名为 AssemblyA 的程序集中有一个名为 MyClass 的类 并使用 NET 的 BinaryFormatter 将其序列化为文件 然后将 MyClass 的代码移动到名为 AssemblyB 的程序集中 并尝试反序列化该文
  • Node.js JSON 解析错误

    我正在尝试使用 node js 制作 Facebook 应用程序 但是在检查签名请求时遇到问题 每次我发出请求时 程序都会抛出一个语法错误 意外的标记非法像这样 undefined 1 721599476 SyntaxError Unexp
  • Android - 如何在 ListView 或 ExpandableListView 中设置 TextView 的填充

    我需要设置填充TextView在每一行ListView or ExpandableListView 我尝试使用android padding和孩子 paddingLeft 但没有任何结果 我能怎么做 谢谢 EDIT 这是该项目的代码Expa
  • 对象无效作为 React 子反应错误?

    你能告诉我为什么我收到这个错误吗 对象作为 React 子对象无效 发现 带有键的对象 seo val text val 如果你想渲染一组孩子 使用数组代替 我正在尝试击中http请求并尝试制作下拉菜单 import React from
  • 如果a>=b 那么O(a+b)=O(a)?

    我试图更好地理解这个想法O n 所以我对此感到好奇 如果我们知道 a gt b 那么O a b O a 我知道O a O a O 2a O a 但我想知道对于比 a 小的东西是否正确 我的意思是 如果O a b O a 我认为这是真的 因为
  • 使用 Perl 从文件中读取部分

    我正在尝试从 Perl 中的输入文件读取值 输入文件如下所示 1 sampledata1 This is a sample test and data for this continues 2 sampledata2 This is sam
  • 如果我在商业网页中添加微软雅黑粗体字体,是否会与微软产生版权问题? (使用CSS3)

    如果我添加以下内容 我会遇到 Microsoft 的版权问题吗 font face我的商业网页中的 CSS3 属性 字体为 Microsoft YaHei Bold Windows Vista 的 Cleartype 中文字体 看来还是小心
  • Orange() 与 range() 和 xrange() 有什么不同?

    当我遇到这个时 我正在浏览 Python Generators Wiki范围发生器 https wiki python org moin RangeGenerator谈论的页面irange 这将使我们能够对大范围的数字进行迭代 而无需 求助
  • JavaScript 有元组吗?

    我很想知道 JavaScript 中是否有 python 类型元组 我正在开发一个项目 我需要只使用对象列表而不是数组 JavaScript 不支持元组数据类型 但在数组解构的帮助下 可以像元组一样使用数组 有了它 数组可用于从函数返回多个
  • 中继器内的 ASP.NET DataGrid

    我有一个有两列的表 CommunityID PersonID 和一个 人员 表 其中包含 除其他外 FirstName LastName 我想为每个社区显示不同的数据网格 每个数据网格仅包含属于该社区的人员 我想在不使用 4 个单独的 Sq
  • Android 打电话时播放声音

    我想在有人接到电话时播放 Android 手机上的音乐 我可以播放音乐 但对方听不到该音乐 如何让对方听音乐 应该怎样编码才能将音乐播放插入麦克风让对方听到 我收到了关于此功能的不同建议 检查这里是可能的 http forums whirl
  • 芹菜失去心跳(on_node_lost)

    我刚刚升级到 celery 3 1 现在我在我的日志中看到了这个 on node lost INFO missed heartbeat from celery queue name for every queue worker in my
  • jsonconvert.deserializeobject 返回 null

    当用户输入城市和街道等地址的 2 个值 目前 时 我试图从谷歌地图获取坐标 来自谷歌地图 api 的 Json 字符串的反序列化遇到问题 必须非常简单 请帮助我关于我所缺少的 这是 json 字符串 http pasted co d9e7c
  • 如何在 Markdown 中为 Pandoc Beamer 幻灯片指定 YAML 元数据?

    我正在尝试使用 YAML 元数据块来指定 Pandoc 的 Markdown 文档中的一些文档属性 我将其转换为 LaTeX Beamer 我在这里阅读了描述 http johnmacfarlane net pandoc README ht
  • 使用 TableAdapter 重新加载数据

    private void UserList Load object sender EventArgs e TODO This line of code loads data into the workOrdersDataSet users
  • 使用 ES6 import 语句时,有没有办法防止项目未定义?

    import foobar1 foobar2 foobor3 typo this key doesn t exist in the module from module file js console log foobar1 foobar2
  • PHP preg_match_all 在长字符串上失败

    这是我的代码 long str repeat a very long string text 100 try changing 100 to 5000 str lt lt
  • 为什么我的汇编输出位于字母位置? (1+1=b)

    我正在使用塔斯姆 这是一个简单的程序 可以读取用户的输入并将两个数字相加 但是 我的输出是根据字母位置显示字母 例如 3 5 h 8 我希望它以整数显示 model small stack 100h data input db 13 10
  • 如何在 Apache 中集成 Clojure Web 应用程序

    Note 鉴于这个OP是大约两年前写的 我不想再问同样的问题 我想知道是否存在分步说明 以便我可以将Noir或其他Clojure Web应用程序集成到Apache中 无论是Jetty Tomcat 或者是其他东西 Django 也有类似的说
  • angular2快速启动仅显示正在加载..而不显示index.html的内容

    第一次使用 angular2 按照以下说明5 分钟快速入门指南 https angular io docs ts latest quickstart html 对于角度 2 一切正常 意味着运行时没有错误npm start npm 启动镜像