Question

我试图在app.component.ts＆＃39;内部导入一个组件。这是将在应用程序启动时运行的主要组件。

这是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>

Answer 1

根据您拥有的SystemJS配置，您需要将ContactListComponent放在app/contacts文件夹下的文件中：

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

您的contact-list.component.ts似乎不在此处，或者在将其转换为contact-list.component.js文件时出现问题。

AngularJS 2 - 无法加载组件

1 个答案: