gpt4 book ai didi

angular 2 应用程序未加载,但我没有收到任何错误

转载 作者:太空狗 更新时间:2023-10-29 17:28:17 24 4
gpt4 key购买 nike

当我加载我的 typescript angular 2 测试应用程序时,它没有按预期加载。

我总是在索引 html 文件中看到“正在加载...”来自 my-app 的内容。

我在 bowser 控制台中也没有错误:/

有人看到错误了吗?

索引

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>test</title>
<script src="~/lib/es6-shim.js"></script>
<script src="~/lib/es6-promise.js"></script>
<script src="~/lib/system-polyfills.js"></script>
<script src="~/lib/angular2-polyfills.js"></script>
<script src="~/lib/system.js"></script>
<script src="~/lib/Rx.js"></script>
<script src="~/lib/angular2.js"></script>
<script src="~/lib/http.dev.js"></script>
<script src="~/lib/router.dev.js"></script>
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/main')
.then(null, console.error.bind(console));
</script>
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>

ma​​in.ts

///<reference path="../node_modules/angular2/typings/browser.d.ts"/>

import {provide} from 'angular2/core';
import {bootstrap, ELEMENT_PROBE_PROVIDERS} from 'angular2/platform/browser';
import {HTTP_PROVIDERS} from 'angular2/http';
import {AppComponent} from './app.component'

bootstrap(AppComponent).catch(err => console.error(err));

app.component.ts

import {Component} from 'angular2/core';
@Component({
selector: 'my-app',
// providers: [...FORM_PROVIDERS],
// directives: [...ROUTER_DIRECTIVES, RouterActive],
pipes: [],
styles: [],
template: `
<h1>Hello {{ name }}</h1>
`
})
export class AppComponent {
angularclassLogo = 'assets/img/angularclass-avatar.png';
name = 'Angular 2 Webpack Starter';
url = 'https://twitter.com/AngularClass';
constructor() {

}
}

最佳答案

尝试研究伟大的 Angular2 Plunker https://angular.io/resources/live-examples/quickstart/ts/plnkr.html ( typescript )

你正在使用 Typescript,但没有将它包含在 HTML 中,也没有在 systemjs 中正确配置:

// Missing typescript transpiler
<script src="https://code.angularjs.org/tools/typescript.js"></script>

<script>
System.config({
transpiler: 'typescript', // <-- missing!
typescriptOptions: { emitDecoratorMetadata: true },
packages: {'app': {defaultExtension: 'ts'}} // <-- you have bad extension
});
System.import('app/main') // <-- main.ts should be inside 'app' folder!
.then(null, console.error.bind(console));
...
</script>

此外,我认为在脚本的 src 属性中使用波浪号 ~ 字符是不合适的。

更新

如果您已经将 .ts 代码转换为 .js,请确保您在编译它时启用了实验性装饰器 - 您的tsconfig.json 应该类似于这样:

{
"compilerOptions": {
"target": "ES5",
"experimentalDecorators": true
}
}

关于angular 2 应用程序未加载,但我没有收到任何错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35668393/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com