Angular2 5分钟安装bug – require没有定义
我正在做Angular2 5分钟的快速入门 。
现在，大约一半的教程，我有以下文件正确设置：
- 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
我发现这个链接关于使用es6填充 ，我包括<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最后日志
我发现我的错误的原因是由于模块设置为“commonjs”在我的tsconfig.json文件，更改为系统修复它，现在它看起来像下面
{ "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已经经历了快速的变化，这可能不再工作了。
我已经在angular2.beta15版本中有相同的错误。
我已经通过删除来解决它
format: 'register',
out of index.html
<script> System.config({ packages: { app: { format: 'register', defaultExtension: 'js' } } }); </script>
确定终于让我的“基本”应用程序工作。
首先我的问题是， npm start不编译我的打字稿.ts文件。
从这篇文章 ，我find了答案在这里找不到外部模块'angular2 / angular2' – Angular2瓦特/ Typescript
我需要运行npm install -g tsd@latest来更新我的TypeScript定义。 之后，我需要更新Angular2 tsd install angular2的TypeScript Definition（TSD）。
完成这个之后，我仍然从我的boot.js文件中得到错误。
而不是import {AppComponent} from './app.component'
我需要像这样import {AppComponent} from '../app.component.js'
现在它工作！ https://github.com/leongaban/angular2quickstart
一个恼人的问题是， npm start仍然不是自动编译打字稿文件，所以我仍然需要手工编译每个.ts文件tsc app.component.ts --module system
我正在使用angular-cli，现在它使用webpack，但是在加载css时出现这个错误。 我添加了declare let require: any; 在我的组件之前，现在它的工作。
我有一个类似的问题，这是由于我为包装设置了错误的格式。 包的格式对于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>
在我的情况下，我将primeng的格式设置为“注册”而不是“cjs”。
如果你正在学习升级到Angular2的教程，这可能会让你咬牙切齿：
确保你没有手动加载转换的JavaScript文件，当你将文件转换为打字稿，并使用模块加载器来加载它们。
我已经将某些文件转换为TS，但是仍然在index.html中加载原始（现在已转录）的JS文件。 如果你这样做，你会一直得到“require is not defined”，因为“require”库还没有被加载。
底线：所以，如果你得到“require is not defined”，在违规行之前加一个debugging器语句（对于我来说，它是来自@ angular / core的import {Injectable}），查看哪些源文件已经加载，确保你还没有手动加载文件。
我用“无效”导入：
import {UrlSegment} from '@angular/router/index';
删除/索引后开始重新编译。
