簡單的初學者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上找不到指令註釋」

回答

相關問題