简单的启动程序angular2应用产生：“异常：在AppComponent上找不到指令注释”

Question

Trying to execute a very simple Angular 2 application based on Angular's "5 MIN QUICKSTART" always fails with the following error message being displayed in the console window of the Chrome browser: "Exception: No Directive annotation found on AppComponent". 尝试基于Angular的“ 5 MIN QUICKSTART”执行非常简单的Angular 2应用程序始终会失败，并在Chrome浏览器的控制台窗口中显示以下错误消息：“异常：在AppComponent上找不到指令注释”。 The application differs from Angular's "5 MIN QUICKSTART" in that node.js is not being used. 该应用程序与Angular的“ 5 MIN QUICKSTART”不同，在于未使用node.js。 Rather Visual Studio 2015 was used to write and execute the application. 而是使用Visual Studio 2015编写和执行应用程序。 NPM was used to download the "node_modules" and "typings" directories and their contents. NPM用于下载“ node_modules”和“ typings”目录及其内容。 The "5 MIN QUICKSTART" code then was modified to accommodate what was downloaded using NPM. 然后修改了“ 5 MIN QUICKSTART”代码，以适应使用NPM下载的内容。 Basically that amounted to replacing "@angular/core" with "node_modules/@angular/core/index". 基本上，这相当于用“ node_modules / @ angular / core / index”替换“ @ angular / core”。 A single file in "node_modules" was modified in this fashion. 以这种方式修改了“ node_modules”中的单个文件。 These modifications appeared to work. 这些修改似乎起作用。 All the angular modules and application modules were successfully loaded. 所有角度模块和应用程序模块均已成功加载。 However once that completes the application fails. 但是，一旦完成，应用程序就会失败。

The application is very simple. 该应用程序非常简单。 Everything downloaded from Angular is where it is suppose to be. 可以从Angular下载所有内容。 The application appears to get very close to successfully loading and executing...but fails at the last second. 该应用程序似乎非常接近成功加载和执行...但是在最后一秒失败。 Can anyone provide some guidance on how to make this app run? 谁能提供一些有关如何运行此应用程序的指导？

Following are the relevant code files. 以下是相关的代码文件。

index.html index.html

<html>
<head>
    <title>Angular 2 QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 1. Load libraries -->
    <!-- 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/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.paths = {
            "Components/App.Component": "Components/App.Component.js"
        }
    </script>

    <script>
        System.import('main.js').catch(
            function (err) {
                console.error(err);
            }
        );
    </script>

</head>

<!-- 3. Display the application -->
<body>
    <app-view>Loading...</app-view>
</body>

</html>

Main.ts 维护

import {bootstrap} from 'node_modules/@angular/platform-browser-dynamic/index';
import {AppComponent} from 'Components/App.Component';

bootstrap(AppComponent).catch(err => alert(err)).then(compRef => {
});

App.Component.ts App.Component.ts

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

@Component({
    selector: 'app-view',
    template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent
{
}

Using "import {Component} from '@angular/core'" is what the folks at Angular specify should be used (in the "5 MIN QUICKSTART"). 使用“从'@ angular / core'导入{Component}”是Angular的指定人员（在“ 5 MIN QUICKSTART”中使用）。 But the QUICKSTART assumes the app will be compiled using the specified Typescript compiler and executed using Node.js. 但是QUICKSTART假定将使用指定的Typescript编译器编译该应用程序，并使用Node.js执行该应用程序。 "import {Component} from '@angular/core'" works because of how SystemJS, the module loader, is configured in systemjs.config.js. 之所以能执行“从'@ angular / core'导入{Component}'”，是因为如何在Systemjs.config.js中配置模块加载器SystemJS。 When developing with Visual Studio 2015 (VS) a Typescript compiler specific to VS is used and a server specific to VS is used to execute the application. 使用Visual Studio 2015（VS）开发时，将使用特定于VS的Typescript编译器，并使用特定于VS的服务器来执行应用程序。 Using "import {Component} from '@angular/core'" inside VS leads to Intellisense (code completion) and compiler errors because '@angular/core' implies a file whose name is "core" (plus an extension) and which can be found in a directory called "@angular" which is a sub-directory of the application directory. 在VS中使用“从'@ angular / core'导入{Component}”会导致Intellisense（代码完成）和编译器错误，因为'@ angular / core'意味着文件名为“ core”（加上扩展名）并且可以可以在名为“ @angular”的目录中找到，该目录是应用程序目录的子目录。 Of course there is no such directory or file. 当然没有这样的目录或文件。 The actual file(s) can be found at "~/node_modules/@angular/core/index.d.ts" when Intellisence is operating and at "~/node_modules/@angular/core/index.js" when the compiler is executing (I think). 实际文件可在Intellisence运行时在“ ~/node_modules/@angular/core/index.d.ts”中找到，而在编译器运行时可在“ ~/node_modules/@angular/core/index.js”中找到执行（我认为）。 So when using VS "node_modules/@angular/core/index" has to be used because it refers to the exact location of the desired file. 因此，在使用VS时，必须使用“ node_modules / @ angular / core / index”，因为它指向所需文件的确切位置。 But using that path leads to the error mentioned above. 但是使用该路径会导致上述错误。

Answer 1

我认为您应该以这种方式导入Component装饰器：

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

简单的启动程序angular2应用产生：“异常：在AppComponent上找不到指令注释”

问题描述

1 个解决方案

解决方案1
0 2016-06-28 18:31:57

简单的启动程序angular2应用产生：“异常：在AppComponent上找不到指令注释”

问题描述

1 个解决方案

解决方案1 0 2016-06-28 18:31:57

解决方案1
0 2016-06-28 18:31:57