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 - 无法加载组件

回答

相关问题