Question

尝试执行基于Angular的“5 MIN QUICKSTART”的非常简单的Angular 2应用程序总是失败，并在Chrome浏览器的控制台窗口中显示以下错误消息：“例外：在AppComponent上找不到指令注释”。该应用程序与Angular的“5 MIN QUICKSTART”的不同之处在于该节点没有使用.js。相反，Visual Studio 2015用于编写和执行应用程序。 NPM用于下载“node_modules”和“typings”目录及其内容。然后修改“5 MIN QUICKSTART”代码以适应使用NPM下载的内容。基本上，这相当于用“node_modules / @ angular / core / index”替换“@ angular / core”。 “node_modules”中的单个文件以这种方式被修改。这些修改似乎有效。所有角度模块和应用模块都已成功加载。但是，一旦完成，应用程序将失败。

应用程序非常简单。从Angular下载的所有东西都是它的假设。该应用程序似乎非常接近成功加载和执行...但在最后一秒失败。任何人都可以提供有关如何运行此应用程序的一些指导？

以下是相关的代码文件。

的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

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

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

使用来自'@ angular / core'的“import {Component}”是Angular指定的人应该使用的（在“5 MIN QUICKSTART”中）。但是QUICKSTART假定应用程序将使用指定的Typescript编译器进行编译并使用Node.js执行。 “@ angular / core”中的“import {Component}”工作原因是因为SystemJS（模块加载器）是如何在systemjs.config.js中配置的。使用Visual Studio 2015（VS）进行开发时，使用特定于VS的Typescript编译器，并使用特定于VS的服务器来执行应用程序。在VS内部使用“@ angular / core”中的“import {Component}”导致Intellisense（代码完成）和编译器错误，因为'@ angular / core'意味着一个名称为“core”（加上扩展名）的文件，它可以可以在名为“@angular”的目录中找到，该目录是应用程序目录的子目录。当然没有这样的目录或文件。当Intellisence运行时，实际文件可以在“~/node_modules/@angular/core/index.d.ts”找到，当编译器运行时，可以在“〜/ node_modules/@angular/core/index.js”找到。执行（我认为）。所以当使用VS时，必须使用“node_modules / @ angular / core / index”，因为它引用了所需文件的确切位置。但是使用该路径会导致上述错误。

Answer 1

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

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

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

1 个答案: