Angular 2 загрузочный основной компонент не работает

У меня есть следующие файлы и коды: index.html:

<!doctype html>
  <html>
    <head lang="en">
      <title>Angular 2 Components</title>
    </head>
    <body>
      <ngc-app></ngc-app>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.15/angular2-polyfills.js"></script>
      <script src="jspm_packages/system.js"></script>
      <script src="config.js"></script>
      <script>
        System.import('lib/bootstrap.js');
      </script>
    </body>
  </html>

bootstrap.js:

// Import Angular bootstrap function
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
// Import our main app component
import {App} from  './app';
// We are bootstrapping Angular using our main application component
bootstrap(App);

app.js:

// We need the Component annotation as well as the
// ViewEncapsulation enumeration
import {Component, ViewEncapsulation} from '@angular/core';
// Using the text loader we can import our template
import template from './app.html!text';
// This creates our main application component
@Component({
  // Tells Angular to look for an element <ngc-app> to create this component
  selector: 'ngc-app',
  // Let use the imported HTML template string
  template,
  // Tell Angular to ignore view encapsulation
  encapsulation: ViewEncapsulation.None
})
export class App {}

и мой app.html файл:

<div>Hello World!</div>

И package.json:

{
  "name": "taskmanagement",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "jspm": "^0.16.52"
  },
  "jspm": {
    "dependencies": {
      "@angular/common": "npm:@angular/[email protected]^2.4.7",
      "@angular/compiler": "npm:@angular/[email protected]^2.4.7",
      "@angular/core": "npm:@angular/[email protected]^2.4.7",
      "@angular/platform-browser-dynamic": "npm:@angular/[email protected]^2.4.7",
      "rxjs": "npm:[email protected]^5.1.0",
      "text": "github:systemjs/[email protected]^0.0.9"
    },
    "devDependencies": {
      "typescript": "npm:[email protected]^2.0.7"
    }
  }

}

Но в браузере отображается следующая ошибка:

Я обыскал и обнаружил, что каждый основной компонент находится внутри NgModule, но, согласно книге, которую я читаю, для этого нет никакого модуля и не упоминается для создания этого. Так в чем проблема с этим, и я должен создать файл модуля? За любую помощь и благодарность за руководство.

Ответ 1

Как вы делились полными файлами. Ниже перечислены ошибки, которые вы совершили.

Вы используете javascript файлы вместо typescript файлов
Вы не правильно настроили systemjs
Файлы стартеров можно взять из этого сообщения

Проблема заключается в иерархии ссылок

<body>

    <ngc-app></ngc-app>
    <script src="jspm_packages/system.js"></script>         
    <script src="config.js"></script>
    <script>
        System.import('lib/bootstrap.js');
    </script>        

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.15/angular2-polyfills.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>

</body>

Сообщите мне, нужны ли дополнительные вещи.

Ответ 2

Во-первых, похоже, что существуют несоответствия версии между angular полиполками, которые вы загружаете с помощью тегов script и версий, которые вы установили через jspm.

Во-вторых, я полагаю, что основной причиной вашей проблемы является то, что у вас есть логика начальной загрузки, которая больше не подходит для последних версий angular 2.

У вас есть

// Import Angular bootstrap function
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
// Import our main app component
import {App} from  './app';
// We are bootstrapping Angular using our main application component
bootstrap(App);

Вам нужно

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app.module';

const platform = platformBrowserDynamic();

platform.bootstrapModule(AppModule, {
  useDebug: true
});

Это означает, что вам нужно создать AppModule и импортировать и подключить к нему компонент приложения, а затем передать его в bootstrap. Это будет выглядеть так.

app.module.ts

import {NgModule} from '@angular/core';
import {App} from './app';

@NgModule({
  declarations: [App],
  bootstrap: [App],
}) 
export class AppModule {}