각도 2 4.0 버전 구성 요소가

입니다 main.ts의 아주 기본적인 모듈을 렌더링 할 수 없습니다 renderring되지 않은 : 여기

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 버전 구성 요소가

답변

관련 문제