Angular25分钟安装错误 - 要求没有被定义 [英] Angular2 5 minute install bug - require is not defined
问题描述
我做的 Angular25分钟快速启动。
关于通过教程现在半路上，我有以下的文件设置正确：
About half way through the tutorial now, I have the following files setup correctly:
- 的index.html，
- app.component.ts
- 应用程序/ boot.ts
- 的package.json
- tconfig.json
然 NPM启动和我得到这个错误：
未捕获的ReferenceError：要求没有被定义（匿名函数）@ boot.js：1
angular2-polyfills.js：143
1456（匿名函数）@ system.src.js：3224（匿名函数）@ system.src.js：3749complete @系统遗漏的类型错误：undefinedreadMemberEx $ P $ @ pssion的system.src.js无法读取属性'分裂'。 src.js：2487run @ angular2-polyfills.js：138zoneBoundFn @ angular2-polyfills.js：111
我发现关于使用ES6垫片这链接，我包括＆LT;脚本SRC =node_modules / ES6-垫片/ ES6-shim.js＆GT;＆LT; / SCRIPT＆GT;
I found this link about using the es6 shim and I included <script src="node_modules/es6-shim/es6-shim.js"></script>.
但是我仍然得到 未捕获的ReferenceError：要求没有定义错误
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"
]
}
编译应用程序/ boot.js
![在这里输入的形象描述](\"http://i.stack.imgur.com/Qm8b3.png\")
![在这里输入的形象描述](\"http://i.stack.imgur.com/kWxKW.png\")
推荐答案
确定终于得到了我的'基本'应用工作。
首先我的问题是， NPM启动不是我编打字稿 .TS 文件。
First my problem was that npm start was not compiling my typescript .ts files.
From this post, I found an answer here Cannot find external module 'angular2/angular2' - Angular2 w/ Typescript
我需要运行 NPM安装-g TSD @最新更新我的打字稿定义。紧接着，我需要为Angular2 TSD安装angular2 打字稿定义（TSD） C>。
I needed to run npm install -g tsd@latest to update my TypeScript definition. Right after that I needed to update the TypeScript Definition (TSD) for Angular2 tsd install angular2.
在这样做是我还是从我boot.js文件得到错误。
After this was done I was still getting errors from my boot.js file.
而不是从'./app.component
Instead of this import {AppComponent} from './app.component'
我需要把它写像这样进口{} AppComponent从'../ app.component.js
现在，它的作品！ https://github.com/leongaban/angular2quickstart
![](\"http://i.stack.imgur.com/EK9wZ.png\")
一个恼人的问题是， NPM启动仍然没有自动编译打字稿文件，所以我还是要手动编译手动每个.TS文件 TSC app.component.ts --module系统
One annoying problem is that npm start still 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
这篇关于Angular25分钟安装错误 - 要求没有被定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
