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

Question

提问by Leon Gaban

I'm doing the Angular2 5 minute quick start.

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

About half way through the tutorial now, I have the following files setup correctly:

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

index.html,
app.component.ts
app/boot.ts
package.json
tconfig.json

索引.html，
app.component.ts
应用程序/boot.ts
包.json
配置文件

Ran npm startand am getting this error:

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

I found this link about using the es6 shimand I included <script src="node_modules/es6-shim/es6-shim.js"></script>.

我找到了关于使用 es6 shim 的链接，我将<script src="node_modules/es6-shim/es6-shim.js"></script>.

However I'm still getting theUncaught ReferenceError: require is not definederror.

但是我仍然收到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 { }

(app/boot.ts)

（应用程序/boot.ts）

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

bootstrap(AppComponent);

index.html

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

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

The compiled app/boot.js

编译后的 app/boot.js

Last log from `npm start`

最后一个日志来自 `npm start`

Answer 1

采纳答案by Leon Gaban

OK finally got my 'basic' app to work.

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

First my problem was that npm startwas not compiling my typescript .tsfiles.

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

From this post, I found an answer here Cannot find external module 'angular2/angular2' - Angular2 w/ Typescript

从这篇文章中，我在这里找到了答案无法找到外部模块'angular2/angular2' - Angular2 w/ Typescript

I needed to run npm install -g tsd@latestto update my TypeScript definition. Right after that I needed to update the TypeScriptDefinition (TSD) for Angular2 tsd install angular2.

我需要运行npm install -g tsd@latest以更新我的 TypeScript 定义。在那之后，我需要更新Angular2的TypeScript定义（TSD）tsd install angular2。

After this was done I was still getting errors from my boot.js file.

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

Instead of this import {AppComponent} from './app.component'

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

I needed to write it like this import {AppComponent} from '../app.component.js'

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

Now it works!https://github.com/leongaban/angular2quickstart

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

One annoying problem is that npm startstill isn't auto compiling the typescript files, so I still have to manually compile each .ts file by hand tsc app.component.ts --module system

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

Answer 2

回答by Michael Gikaru

I found that the reason mine brought an error was due module set as "commonjs" in my tsconfig.jsonfile, changing it to systemfixed it, now it looks like below

我发现我带来错误的原因是由于在我的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"
  ]
}

EDITThis answer was based on Angular 2 beta 17 .Based on the time of this answer and the rapid changes angular 2 has undergone, this may not work anymore.

编辑此答案基于 Angular 2 beta 17 。基于此答案的时间以及 angular 2 经历的快速变化，这可能不再起作用。

Answer 3

回答by Reinhard

I've got the same Error in the angular2.beta15 version.

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

I've solved it by removing

我已经通过删除解决了

format: 'register',

out of index.html

超出 index.html

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

Answer 4

回答by Helzgate

I'm using angular-cli and it now uses webpack but I was getting this error when loading css. I added declare let require: any;before my component and now it works.

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

Answer 5

回答by user910531

If you are following the Upgrade to Angular2 tutorial, this may bite you:

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

Make sure you are not still manually loading your converted javascript files when you convert the files to typescript and use the module loaders to load them.

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

I had converted some files to TS, but was still loading the original (now transpiled) JS files in the index.html. If you do this, you'll keep getting "require is not defined" because the "require" library hasn't been loaded yet.

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

Bottom line:So, if you get "require is not defined" put a debugger statement before the offending line (for me, it was import { Injectable } from '@angular/core' ), look at what source files have been loaded and make sure you're not still loading the file manually.

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

Answer 6

回答by Nicolae Anghel

I had a similar problem which was caused by the fact that I was setting the wrong format for the package. The format of the package is very important in order for SystemJS to know how to handle it. Documentation Here

我有一个类似的问题，这是因为我为包设置了错误的格式。包的格式对于 SystemJS 知道如何处理它非常重要。文档在这里

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

In my case I was setting the format of primeng to "register" instead of "cjs".

就我而言，我将primeng 的格式设置为“注册”而不是“cjs”。

Answer 7

回答by D R

I used "invalid" import:

我使用了“无效”导入：

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

After removing /indexit started to compile again.

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

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

提问by Leon Gaban

app.component.ts

app.component.ts

(app/boot.ts)

（应用程序/boot.ts）

index.html

索引.html

package.json

包.json

tconfig.json

配置文件

The compiled app/boot.js

编译后的 app/boot.js

Last log from `npm start`

最后一个日志来自 `npm start`

采纳答案by Leon Gaban

回答by Michael Gikaru

回答by Reinhard

回答by Helzgate

回答by user910531

回答by Nicolae Anghel

回答by D R

相关推荐

最近更新

标签

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

提问by Leon Gaban

app.component.ts

app.component.ts

(app/boot.ts)

（应用程序/boot.ts）

index.html

索引.html

package.json

包.json

tconfig.json

配置文件

The compiled app/boot.js

编译后的 app/boot.js

Last log from npm start

最后一个日志来自 npm start

采纳答案by Leon Gaban

回答by Michael Gikaru

回答by Reinhard

回答by Helzgate

回答by user910531

回答by Nicolae Anghel

回答by D R

相关推荐

将 Angular2 TypeScript 文件和 JavaScript 文件分离到不同的文件夹中，可能是“dist”

如何调试在 iPad 上的 webview 中运行的 Javascript？

Javascript 我可以在 setState 更新完成后执行函数吗？

Javascript 失去焦点/模糊时隐藏 DIV

相关推荐

最近更新

标签

Last log from `npm start`

最后一个日志来自 `npm start`