使用systemjs

Question

以下是我对 index.html 的导入：

 <script src="https://unpkg.com/core-js/client/shim.min.js"></script>

    <script src="https://unpkg.com/zone.js@0.7.4?main=browser"></script>
    <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
    <script src="https://cdn.rawgit.com/angular/angular.io/b3c65a9/public/docs/_examples/_boilerplate/systemjs.config.web.js"></script>
    <script>
      System.import('main.js').catch(function(err){ console.error(err); });
    </script>

我收到错误：app / app.module.ts 404（未找到）

这是我的文件夹结构：

- app
   - app.module.ts
   - app.compontent.ts
- main.ts

奇怪的是，每个人都在同一个文件夹下（如下）：

- angular2
  - app
    - app.module.ts
    - app.compontent.ts
  - main.ts

现在一切正常。那是为什么？

main.ts 档案：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule }              from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

tsconfig ：

{
  "compilerOptions": {
    "baseUrl": "",
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es6", "dom"],
    "mapRoot": "./",
    "module": "commonjs",
    "moduleResolution": "node",
    "outDir": "../dist/out-tsc",
    "sourceMap": true,

    "inlineSources": true,

    "target": "es5",
    "typeRoots": [
      "../node_modules/@types"
    ]

  }
}

Answer 1

我相信这是因为'./'从项目的根目录开始。也许当你删除angular2文件夹时，root会被更改，因此main.ts导入找不到app目录

Answer 2

要导入.ts文件，您需要在程序包配置中配置默认​​扩展名。

SystemJS.config({
  packages: {
    "app": {
      "defaultExtension": "ts"
    }
  }
});

但是，在您的示例中，您似乎导入main.js，这与您在编写时指示的目录结构不一致

  

  
• 应用      
    
  • app.module.ts
    
  • app.compontent.ts
    
  
• main.ts