Question

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

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

我也没有在bowser控制台中出错：/

有人看到错误吗？

INDEX

<!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>

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

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

    }
}

Answer 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>

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

<强>更新

如果您已将.ts代码转换为.js，请确保您已启用实验装饰器进行编译 - 您的tsconfig.json应该类似对此：

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

Answer 2

我的模板中有问题。我从应用中删除了Mobx和ng2-mobx，但忘记从模板中删除*mobxAutorun。删除该指令使其工作。

（显然Angular在模板中没有显示任何错误。这可能实际上是一个功能，所以如果你有一个失败的ngIf，它只会考虑如果为假，而不是显示错误.Don＆＃39;知道是否可以改变这种行为。）

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

2 个答案: