角度2应用程序不加载,但我没有错误

Question

角度2应用程序不加载,但我没有错误

当我加载我的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>

Run Code Online (Sandbox Code Playgroud)

main.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));

Run Code Online (Sandbox Code Playgroud)

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() {

    }
}

Run Code Online (Sandbox Code Playgroud)

Answer 1

mse*_*mys 1

尝试学习伟大的 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>

Run Code Online (Sandbox Code Playgroud)

~另外，我认为在脚本的属性中使用波浪号字符是不可以的src。

更新

如果您已经将.ts代码转换为.js，请确保您在启用实验装饰器的情况下编译它- 您的tsconfig.json代码应该类似于：

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	10 年，2 月前
查看次数：	8920 次
最近记录：	9 年，3 月前