AngularJS 2 - 無法加載組件

我想導入一個組件在'app.component.ts'內，它是將在應用程序啓動時運行的主要組件。AngularJS 2 - 無法加載組件

這裏是app.component.ts的一段簡單代碼。

import {Component} from 'angular2/core'; 
    import {ContactListComponent} from './contacts/contact-list.component'; 

    @Component({ 
     selector: 'my-app', 
     template: `Hello`, 
     directives: [ContactListComponent], 
    }) 

export class AppComponent {}

我上第二進口的錯誤，當我去到瀏覽器控制檯我看到這個錯誤：

我的index.html是這樣的：

<html> 
<head> 
    <title>Angular 2 application</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- 1. Load libraries --> 
    <!-- IE required polyfills, in this exact order --> 
    <script src="node_modules/es6-shim/es6-shim.min.js"></script> 
    <script src="node_modules/systemjs/dist/system-polyfills.js"></script> 
    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script> 
    <script src="node_modules/systemjs/dist/system.src.js"></script> 
    <script src="node_modules/rxjs/bundles/Rx.js"></script> 
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script> 
    <script src="node_modules/angular2/bundles/router.dev.js"></script> 
    <script src="node_modules/angular2/bundles/http.js"></script> 
    <!-- 2. Configure SystemJS --> 
    <script> 
     System.config({ 
      packages: { 
       app: { 
        format: 'register', 
        defaultExtension: 'js' 
       } 
      } 
     }); 
     System.import('app/boot') 
       .then(null, console.error.bind(console)); 
    </script> 

    <link rel="stylesheet" href="src/css/app.css"> 
</head> 
<!-- 3. Display the application --> 
<body> 
<my-app>Loading...</my-app> 
</body> 
</html>

來源

2016-02-05 splunk

根據您擁有的SystemJS配置，您需要將ContactListComponent放在app/contacts文件夾下的文件中：

app/ 
- boot.ts 
- app.component.ts 
- contacts/ 
    - contact-list.component.ts

看來你contact-list.component.ts這裏沒有找到或沒有時transpiled入contact-list.component.js文件有問題。

來源

2016-02-05 16:18:51

我的樹文件夾結構就像你說的 – splunk

你有'contact-list.component.js'文件是從'contact-list.component.ts'創建的嗎？（在同一個文件夾中） –

不，我沒有，老實說，我也沒有app.component.js，但在嘗試導入聯繫人列表組件之前，我的應用程序正在工作 – splunk

AngularJS 2 - 無法加載組件

回答

相關問題