1

I can't render the very basic module of this stupid Angular 2

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

Here is 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>

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

Everything looks to be compiled and Intellij can even link to actual ts code. But browser shows nothing, debug tool shows nothing. I really can't understand why this crap doesn't render

4

1 回答 1

3

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

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

原因：打开和关闭脚本标签放错了位置

还要检查导入的路径app/main，认为它必须app取决于您的文件夹结构

于 2017-03-25T23:36:55.033 回答