简单的初学者angular2应用程序产生：“例外：在AppComponent上找不到指令注释”

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

该应用程序非常简单。从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'中的'mponent}“是Angular指定的人员应该使用的内容（在”5 MIN QUICKSTART“中）。但是QUICKSTART假定应用程序将使用指定的Typescript编译器编译并使用Node.js执行。 “从'@ angular/core'导入{Component}”的工作原理是在systemjs.config.js中配置了模块加载器SystemJS。使用Visual Studio 2015（VS）进行开发时，将使用特定于VS的Typescript编译器，并使用特定于VS的服务器来执行应用程序。在VS中使用'@ angular/core'导入{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”时必须使用它，因为它指的是所需文件的确切位置。但是使用该路径会导致上述错误。

来源

2016-06-28 CCubed

我认为你应该导入Component装饰是这样的：

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

来源

2016-06-28 18:31:57

“@角/核心”不使用Visual Studio 2015年见除了上面原来的问题时，工作。 – CCubed

简单的初学者angular2应用程序产生：“例外：在AppComponent上找不到指令注释”

回答

相关问题