Question

我无法渲染这个愚蠢的Angular 2的基本模块

这是main.ts：

 import {Component, NgModule} from '@angular/core';
    import {BrowserModule} from '@angular/platform-browser';
    import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';


    @Component({
        selector: 'base-selector',
    template: '<h1 class="text-center"> {{greeting}} </h1>'
       })
    export class BasicComponent {
      greeting: string;

    constructor() {
        this.greeting = 'Hello Angular 2!';
    }

     }


    @NgModule({
    imports: [BrowserModule],
    declarations: [BasicComponent],
    bootstrap: [BasicComponent]
     })
      export class AppModule{}

    const platform = platformBrowserDynamic();
    platform.bootstrapModule(AppModule);

这是index.html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> Angular 2 Demo</title>
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <script src="systemjs.config.js">

        System.import('app/main').catch(console.error.bind(null));
    </script>

    <link rel="stylesheet" 
       href="node_modules/bootstrap/dist/css/bootstrap.min.css">
     </head>
     <body>
     <base-selector></base-selector>
     </body>

     </html>

还有systemjs.confiig.js：

(function (global) {
System.config({
    map: {
        app: 'app',

        '@angular/core': 'node_modules/@angular/core/bundles/core.umd.js',
        '@angular/common': 'node_modules/@angular/common/bundles/common.umd.js',
        '@angular/compiler': 'node_modules/@angular/compiler/bundles/compiler.umd.js',
        '@angular/platform-browser': 'node_modules/@angular/platform-browser/bundles/platform-browser.umd.js',
        '@angular/platform-browser-dynamic': 'node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
        '@angular/http': 'node_modules/@angular/http/bundles/http.umd.js',
        '@angular/router': 'node_modules/@angular/router/bundles/router.umd.js',
        '@angular/forms': 'node_modules/@angular/forms/bundles/forms.umd.js',


        'rxjs': 'node_modules/rxjs'
    },
    packages: {
        app: {
            main: './index.js',
            defaultExtension: 'js'
        },
        rxjs: {
            defaultExtension: 'js'
        }
    }
});
})(this);

一切看起来都要编译，Intellij甚至可以链接实际的ts代码。但是浏览器什么也没显示，调试工具什我真的无法理解为什么这个废话无法呈现

Answer 1

查看你的index.html，这些行正在创建问题

probabilities[index]

原因：错误地打开和关闭脚本标记

同时检查导入<script src="systemjs.config.js"></script> <script> System.import('app/main').catch(console.error.bind(null)); </script>的路径，认为它必须是app/main，这取决于您的文件夹结构

Angular 2 ver 4.0组件没有渲染

1 个答案: