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等）。

e.g。

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

Answer 1

根据您的SystemJS配置，您需要将TypeScript文件放在app文件夹下。否则，packages块（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>

Angular 2导入自定义组件NOT FOUND

1 个答案: