Angular 2 ver 4.0 组件未呈现

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 甚至可以 link 到实际的 ts 代码。但是浏览器什么也没显示，调试工具什么也没显示。我真的不明白为什么这个垃圾不渲染

Answer 1

看看你的 index.html，这些行造成了问题

 <script src="systemjs.config.js"></script>
    <script>
        System.import('app/main').catch(console.error.bind(null));
    </script>

原因：错误的打开和关闭脚本标签

还要检查导入的路径app/main，认为一定是app，这取决于你的文件夹结构

Angular 2 ver 4.0 组件未呈现

Angular 2 ver 4.0 component is not renderring

angular4

angular