Riv*_*diz 31 javascript typescript angular
嗨,我有一点点Angular 1背景,我正在学习Angular 2.
对于使用Angular 1启动,只有依赖是添加角度源angular.js或者angular.min.js,
通过脚本标记尝试使用Angular 2时,
<script src="angular2.js"></script>
我收到的错误是,
Uncaught ReferenceError: System is not definedUncaught ReferenceError: define is not defined所以我搜索了SE并找到了,system.js并且require.js必须在加载之前加载angular2.
我设法加载这两个库的任何方式,
我喜欢编译TypeScript并提供js文件,而不是将所有脚本发送到客户端并编译/转换客户端的所有内容.
我的IDE是WebStorm,当我尝试编写一个简单的组件时,
import {Component} from 'angular2/core';
@Component
class Hello{
name:string;
constructor() {
this.name = "HelloWorld";
}
}
我在TypeScript编译器上收到此错误main.ts,编译为main.js,
Error:(1, 25) TS2307: Cannot find module 'angular2/core'.
TypeScript编译所有内容但不从angular进行导入.
我的简单index.html如下所示,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
</head>
<body>
<script src="system.js"></script>
<script src="require.js"></script>
<script src="angular2.js"></script>
<script src="main.js"></script>
</body>
</html>
什么导致TypeScript不从angualr2导入模块？我应该使用Angular2配置TypeScript吗？
我是TypeScript的新手,
非常感谢你的帮助
更新
tsc main.ts - 手表输出:
main.ts(1,25): error TS2307: Cannot find module 'angular2/core'.
main.ts(4,7): error TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.
11:43:39 PM - Compilation complete. Watching for file changes.
Jai*_*Jai 40
你是TypeScript的新手.我仍然建议你按照angular.io docs进行5分钟的启动.这有特定的指导,并且很好地解释了开始使用它.
Angular2 5分钟快速入门页面@ angular.io.
你需要基本上开始:
安装节点js,它还安装npm (节点包管理器).现在,您需要按照以下步骤开始:
.ts文件/组件文件,你可以命名它的app 名称就像文档一样.npm start在我们完成加载所有依赖项时,运行此命令来开始编译并观察应用程序,同时开发其他组件.现在,根据第3点,这些文件中应该有什么.
3.1:tsconfig.json:
Run Code Online (Sandbox Code Playgroud){ "compilerOptions": { "target": "es5", "module": "system", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "removeComments": false, "noImplicitAny": false }, "exclude": [ "node_modules", "typings/main", "typings/main.d.ts" ] }3.2:typings.json
Run Code Online (Sandbox Code Playgroud){ "ambientDependencies": { "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#6697d6f7dadbf5773cb40ecda35a76027e0783b2" } }3.3:package.json
Run Code Online (Sandbox Code Playgroud){ "name": "ng2-test", "version": "1.0.0", "scripts": { "start": "concurrent \"npm run tsc:w\" \"npm run lite\" ", "tsc": "tsc", "tsc:w": "tsc -w", "lite": "lite-server", "typings": "typings", "postinstall": "typings install" }, "license": "ISC", "dependencies": { "angular2": "2.0.0-beta.7", "systemjs": "0.19.22", "es6-promise": "^3.0.2", "es6-shim": "^0.33.3", "reflect-metadata": "0.1.2", "rxjs": "5.0.0-beta.2", "zone.js": "0.5.15" }, "devDependencies": { "concurrently": "^2.0.0", "lite-server": "^2.1.0", "typescript": "^1.7.5", "typings":"^0.6.8" } }
祝你好运!但我们需要最重要的文件index.html.
3.4:index.html
<!doctype html>
<html>
<head>
<title>Angular 2 QuickStart</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.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/main')
.then(null, console.error.bind(console));
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
我们的基本设置非常好,但我们需要安装所有依赖项和devdependencies,这是绝对必需的.你需要跑npm install.这将安装我们所拥有的所有依赖项package.json.
当程序包安装完成后,您可以找到一个名为node_modules的文件夹,其中包含所有依赖项的文件package.json.
如果在npm install您只需要更新dev/dependencies 时发生任何错误.
所以,我假设你安装了所有的依赖项,让我们开始吧:
现在按照第2点,我们有一个名为appnow 的文件夹,我们将把.ts文件放入其中.
创建一个名为的文件app.component.ts,请参阅命名约定.component.ts,该约定表示它是一个组件文件.把这段代码放进去:
import {Component} from 'angular2/core'; // <-- importing Component from core
@Component({
selector: 'my-app', //<----the element defined in the index.html
template: '<h1>My First Angular 2 App</h1>' // <---this is the template to put in the component.
})
export class AppComponent { } // <--- we need to export the class AppComponent.
现在创建另一个名为main.ts.为什么main.ts？这是因为index.html我们已经定义了我们的Systemjs模块加载器,请参阅此内容index.html
System.import( '应用程序/主')
这个内容main.ts:
import {bootstrap} from 'angular2/platform/browser' // import bootstrap
import {AppComponent} from './app.component' // import the component we just created
bootstrap(AppComponent); // finally bootstrap it.
现在我们完成了.
然而,我们需要运行它,为此我们必须cd ng2Playgroud进入它.我们需要从命令提示符运行此命令,或者如果您安装了git bash,请运行以下命令:
npm start
并按Enter键.现在它将编译并启动lite-server作为依赖项安装.如果一切顺利,那么您将看到My First Angular 2 App在浏览器中呈现的模板.
小智 12
我能够通过在我的tsconfig.json文件中添加"moduleResolution":"node"来解决这个问题
{
"compilerOptions": {
"target": "es5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"node_modules",
"typings/main.d.ts",
"typings/main"
]
}
| 归档时间： |
|
| 查看次数： |
85151 次 |
| 最近记录： |