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 {}