Question

现在大约有一半的教程，我正确设置了以下文件：

的index.html，
app.component.ts
应用程序/ boot.ts
的package.json
tconfig.json

跑npm start并收到此错误：

Uncaught ReferenceError: require is not defined(anonymous function) @ boot.js:1 angular2-polyfills.js:143 Uncaught TypeError: Cannot read property 'split' of undefinedreadMemberExpression @ system.src.js:1456(anonymous function) @ system.src.js:3224(anonymous function) @ system.src.js:3749complete @ system.src.js:2487run @ angular2-polyfills.js:138zoneBoundFn @ angular2-polyfills.js:111

我发现了这个link about using the es6 shim，我加入了<script src="node_modules/es6-shim/es6-shim.js"></script>。

但我仍然遇到 Uncaught ReferenceError: require is not defined错误。

app.component.ts

import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }

（应用程序/ boot.ts）

import {bootstrap}    from 'angular2/platform/browser'
import {AppComponent} from './app.component'

bootstrap(AppComponent);

的index.html

<html>

  <head>
    <title>Angular 2 QuickStart</title>

    <!-- 1. Load libraries -->
    <script src="node_modules/es6-shim/es6-shim.js"></script>
    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>

    <!-- 2. Configure SystemJS -->
    <script>
      System.config({
        packages: {        
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
      System.import('app/boot')
            .then(null, console.error.bind(console));
    </script>

  </head>

  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>

</html>

的package.json

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
  },
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.0",
    "systemjs": "0.19.6",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.0",
    "zone.js": "0.5.10"
  },
  "devDependencies": {
    "concurrently": "^1.0.0",
    "lite-server": "^1.3.1",
    "typescript": "^1.7.3"
  }
}

tconfig.json

{
  "compilerOptions": {
    "target": "ES5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules"
  ]
}

已编译的app / boot.js

`npm start`

的上次日志

Answer 1

我发现我带来错误的原因是我的 tsconfig.json 文件中将模块设置为“commonjs”，将其更改为系统修复它，现在它看起来如下

{
  "compilerOptions": {
        "target": "es5",
        "module": "system",
        "declaration": false,
        "noImplicitAny": false,
        "removeComments": true,
        "noLib": false,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "sourceMap": true
    },
  "exclude": [
    "node_modules"
  ]
}

修改这个答案基于Angular 2 beta 17.根据这个答案的时间和角度2经历的快速变化，这可能不再适用了。

Answer 2

我在angular2.beta15版本中遇到了相同的错误。

我已通过删除

解决了这个问题

format: 'register',

out of index.html

<script>
    System.config({
        packages: {
            app: {
                format: 'register',
                defaultExtension: 'js'
            }
        }
    });
</script>

Answer 3

确定最终让我的“基本”应用程序正常运行。

首先我的问题是npm start没有编译我的打字稿.ts文件。

从this post，我在这里找到了答案Cannot find external module 'angular2/angular2' - Angular2 w/ Typescript

我需要运行npm install -g tsd@latest来更新我的TypeScript定义。之后，我需要更新Angular2 tsd install angular2的{{3}}定义（TSD）。

完成此操作后，我仍然从boot.js文件中收到错误。

而不是import {AppComponent} from './app.component'

我需要像import {AppComponent} from '../app.component.js'

这样写

现在可行了！ TypeScript

https://github.com/leongaban/angular2quickstart

一个恼人的问题是npm start仍然没有自动编译打字稿文件，所以我仍然需要手动编译每个.ts文件tsc app.component.ts --module system

Answer 4

我正在使用angular-cli，它现在使用webpack但是在加载css时我遇到了这个错误。我在我的组件之前添加了declare let require: any;，现在它可以正常工作。

Answer 5

如果您正在关注升级到Angular2教程，这可能会让您感到厌烦：

当您将文件转换为typescript并使用模块加载器加载它们时，请确保您还没有手动加载转换后的javascript文件。

我已将一些文件转换为TS，但仍在index.html中加载原始（现已转换的）JS文件。如果你这样做，你将继续得到＆＃34;要求没有定义＆＃34;因为＆＃34;要求＆＃34;库还没有加载。

底线： 所以，如果你得到＆＃34;要求没有定义＆＃34;在违规行之前放置一个调试器语句（对我来说，它是来自＆＃39; @ angular / core＆＃39;）的导入{Injectable}，查看已加载的源文件并确保您不会手动加载文件。

Answer 6

我遇到了类似的问题，这是因为我为包设置了错误的格式。包的格式非常重要，以便SystemJS知道如何处理它。文档Here

<script>
 System.config({
    packages: {
        appjs: {
            format: 'register',
            defaultExtension: 'js'
        },
        primeng: {
            format: 'cjs',
            defaultExtension: 'js'
        }
    },
    map: {
        'primeng': 'lib'
    }
});
 System.import('appjs/main').then(null, console.error.bind(console));
</script>

在我的情况下，我将primeng的格式设置为＆＃34;注册＆＃34;而不是＆＃34; cjs＆＃34;。

Answer 7

我使用了“无效”导入：

import {UrlSegment} from '@angular/router/index';

删除 / index 后，它又开始编译。

Angular2 5分钟安装错误 - 未定义需求