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

发布时间：2020-12-17 07:01:22 所属栏目：安全来源：网络整理

导读：当我加载我的typescript angular 2测试应用程序时,它没有按预期加载. 我总是看到“正在加载…”索引html文件中的my-app是什么. 在bowser控制台中我也没有错误：/ 有人看到错误吗？指数 !DOCTYPE htmlhtmlhead meta charset="utf-8" / meta name="viewport"

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

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

    }
}

解决方法

尝试研究伟大的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属性中使用tilde~字符是可以的.

UPDATE

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!