角2版本4.0组件不renderring

这里是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代码。但浏览器什么都没显示，调试工具什么也没有显示我真的不明白为什么这个垃圾不呈现

来源

2017-03-25 Alex Bondar

看您的index.html，这些线被创建问题

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

原因：找不到打开和关闭脚本标记

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

来源

2017-03-25 23:36:55 Aravind

角2版本4.0组件不renderring

回答

相关问题