javascript - Angular 2 导入自定义组件未找到

Question

我正在尝试导入一个新创建的组件，该组件与 app.ts 位于同一根目录中。

/
-app.js
-mock_feed_service.js

在 app.ts 中:

import { mock_item_feed } from 'mock_feed_service';

错误信息:

angular2-polyfills.js:332 Error: Error: XHR error (404 Not Found) loading http://localhost:63342/mock_feed_service(…)

问题似乎是 mock_feed_service 调用缺少 .js 扩展名，因此浏览器无法找到它。

<script>
    System.config({
        packages: {
            app: {
                format: 'register',
                defaultExtension: 'js',
            },
        },
    });
    System.import('app.js')
            .then(null, console.error.bind(console));
</script>

我试图添加:"defaultJSExtensions": true,

这似乎解决了这个模块的 NOT FOUND 问题，但随后破坏了我所有其他导入(rxjs/angular2 等)。

例如

system.src.js:1085 GET http://rxjs/Rx.js 404 (Not Found)

Answer 1

根据您的 SystemJS 配置，您需要将 TypeScript 文件放在 app 文件夹下。否则，packages block (app 条目)中指定的配置将不适用，并且 js 扩展名将不会附加到模块名称中找出对应的JS文件。

并以这种方式导入您的组件:

import { mock_item_feed } from './mock_feed_service';

同时更新导入 app 模块的方式:

<script>
  System.config({
    packages: {
      app: {
        format: 'register',
        defaultExtension: 'js'
      },
    }
  });
  System.import('app/app') // <-----------
        .then(null, console.error.bind(console));
</script>