Angular 2 引导主要组件不工作

Question

我有以下文件和代码： 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's 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/common@^2.4.7",
      "@angular/compiler": "npm:@angular/compiler@^2.4.7",
      "@angular/core": "npm:@angular/core@^2.4.7",
      "@angular/platform-browser-dynamic": "npm:@angular/platform-browser-dynamic@^2.4.7",
      "rxjs": "npm:rxjs@^5.1.0",
      "text": "github:systemjs/plugin-text@^0.0.9"
    },
    "devDependencies": {
      "typescript": "npm:typescript@^2.0.7"
    }
  }

}

但是在浏览器中显示如下错误：

我搜索并发现每个主要组件都在 NgModule 中，但根据我正在阅读的书，没有任何模块，也没有提到创建那个模块。那么这有什么问题，我应该创建模块文件吗？对于任何帮助和指导，谢谢。

Answer 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>

如果还有其他需要，请告诉我。

Answer 2

首先，您通过脚本标签加载的 angular polyfill 与您通过 jspm 安装的版本之间似乎存在版本不匹配。

其次，我认为您的问题的主要原因是您拥有的 bootstrap 逻辑对于 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 {}

Angular 2 引导主要组件不工作

Angular 2 bootstrapping main component not working

bootstrapping

typescript

systemjs

angular