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

首先，您通过脚本标记加载的角度polyfill与通过jspm安装的版本之间存在版本不匹配。

其次我认为你的问题的主要原因是你拥有的自举逻辑对于最新版本的角度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 {}

Answer 2

当您分享完整的文件时。以下是您所犯的错误

您使用的是 javascript 文件，而不是打字稿文件
您尚未正确配置 systemjs
可以从 post

问题是引用的层次结构

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

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

Angular 2 bootstrapping主要组件无法正常工作

2 个答案: