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

IT技术 javascript angular
2021-03-08 19:08:37

我正在做Angular2 5 分钟快速入门

现在教程进行到一半时,我正确设置了以下文件:

  • 索引.html,
  • app.component.ts
  • 应用程序/boot.ts
  • 包.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


我找到了有关使用 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);

索引.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>

包.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"
  }
}

配置文件

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

在此处输入图片说明

6个回答

我发现我带来错误的原因是由于我的tsconfig.json文件中的module设置为“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 。基于此答案的时间以及 angular 2 经历的快速变化,这可能不再起作用。

“module”:“系统”,并没有阻止我收到此错误
2021-05-08 19:08:37
赞成。过时的例子太多了,尤其是对于 IIS / Visual Studio。我一直在混合示例,试图构建任何东西。没有注意到 5 分钟的演练使用系统而不是 commonjs!谢谢你。
2021-05-12 19:08:37

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

我已经通过删除解决了

format: 'register',

超出 index.html

<script>
    System.config({
        packages: {
            app: {
                format: 'register',
                defaultExtension: 'js'
            }
        }
    });
</script>
它对我有用,但我不喜欢删除我不明白的东西。所以我找到了其他解决方案。我只是通过 npm update 更新包。
2021-04-19 19:08:37

好的,我的“基本”应用程序终于可以工作了。

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

这篇文章中,我在这里找到了一个答案无法找到外部module'angular2/angular2' - Angular2 w/ Typescript

我需要运行npm install -g tsd@latest以更新我的 TypeScript 定义。在那之后,我需要更新Angular2TypeScript定义 (TSD) tsd install angular2

完成此操作后,我的 boot.js 文件仍然出现错误。

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

我需要这样写 import {AppComponent} from '../app.component.js'


现在它起作用了! https://github.com/leongaban/angular2quickstart

在此处输入图片说明


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

我也尝试了该指南,我遇到的问题与 lite-server module有关,使用 http-server 为应用程序提供服务为我解决了这个问题。
2021-05-03 19:08:37

我正在使用 angular-cli,它现在使用 webpack,但在加载 css 时出现此错误。declare let require: any;在我的组件之前添加了它,现在它可以工作了。

如果您正在关注升级到 Angular2 教程,这可能会困扰您:

当您将文件转换为 typescript 并使用module加载器加载它们时,请确保您没有仍然手动加载转换后的 javascript 文件。

我已将一些文件转换为 TS,但仍在 index.html 中加载原始(现已转译)的 JS 文件。如果你这样做,你会不断收到“require is not defined”,因为“require”库还没有被加载。

底线: 所以,如果你得到“require is not defined”在违规行之前放一个调试器语句(对我来说,它是 import { Injectable } from '@angular/core' ),看看哪些源文件已经被加载并确保您还没有手动加载文件。