Angularjs 2 和 Typescript 导入问题（systemjs？）答案

【问题标题】：Angularjs 2 & Typescript import issue (systemjs?)Angularjs 2 和 Typescript 导入问题（systemjs？）
【发布时间】：2017-04-21 21:41:40
【问题描述】：

我的应用是这样的结构：

app
- assets
- src
-- autogenerated
-- components
---- app
---- tabs

“自动生成”文件夹包含使用与组件文件夹相同的目录结构从 typescript 生成的已编译 javascript 文件。我使用 gulp-tsc 来创建它。（我最终会将其重命名为“build”）

应用程序和选项卡是组件...应用程序是顶级组件。

在 app.ts 中（在 app/components/app 中）是：

import {Component, bootstrap} from 'angular2/angular2';
import {Tabs} from '../Tabs/tabs';
@Component({
    selector: 'my-app',
    templateUrl: 'src/components/app/app.html',
    directives: [Tabs]
})
class AppComponent { }
bootstrap(AppComponent);

这个编译的时候，生成的js文件是这样的：

var tabs_1 = require('../Tabs/tabs');

它无法解析并导致 404，因为它在被浏览器加载时没有 .js 扩展名。

编辑...刚刚意识到“require”来自nodejs，而不是systemjs...仍然不确定如何继续。

** 编辑 2 ** gulp 任务：

gulp.task('compile', function() {
  // compile sass to css
  gulp.src('./app/assets/sass/*.scss')
    .pipe(sass.sync({outputStyle: 'compressed'}).on('error', sass.logError))
    .pipe(gulp.dest('./app/assets/css'));

  // compile typescript
  // this ignores tsconfig.json, but ideally configuration in both places should match
  gulp.src(['./app/src/**/*.ts'])
    .pipe(typescript({  target: "ES5",
                        experimentalDecorators: true,
                        sourceMap: true,
                        emitDecoratorMetadata: true }))
    .pipe(gulp.dest('./app/src/autogenerated/'));
});

gulp 任务不应该使用 tsconfig.json...我添加它是为了消除 Visual Studio 代码中的错误...但这是 tsconfig.json 中的内容

{
  "compilerOptions": {
    "target": "ES5",
    "module": "commonjs",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  }
}

index.html 代码：

<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <script src="../../node_modules/systemjs/dist/system.src.js"></script>
    <script src="../../node_modules/angular2/bundles/angular2.dev.js"></script>
<script>
  System.config({
    packages: {'app': {
        defaultExtension: 'js'}
      }
  });
  System.import('../src/components/app/app.js');
</script>
  </head>
  <body>
    <my-app>Loading... please wait</my-app>
  </body>
</html>

【问题讨论】：

你能显示更多配置吗？例如 Gulp 文件？
我已经添加了 gulp 任务。它使用 gulp-tsc 包。

标签： angular typescript systemjs

【解决方案1】：

使用 tsconfig.json，这是配置 TypeScript 编译器的最佳方式，它由 TypeScript 团队维护。不需要一些 gulp 任务来理解什么是打字稿。只需在命令行中运行 'tsc'（让 gulp 运行 'exec'）。
如果你把你的模块编译成commonjs，（这是完全有效的）你应该有办法在浏览器中加载commonjs 模块。 SystemJS（与 angular2 使用的相同）是目前最好的模块加载器。因此，只需为您的应用创建一个 SystemJs 配置文件并导入该应用即可。

【讨论】：

我觉得我的大脑被所有不同的模块加载器等（jspm、commonjs、systemjs...）炸毁了。我会建议只使用 typescript 编译器而不是一些 gulp 包。只是要清楚......我不认为我创建了任何模块。我只是使用 npm 来安装节点模块。 Typescript 将 import 语句编译为 require 语句，我无法将其加载到浏览器中。一个例子会很棒......我在互联网上找不到任何好的。我已将 index.html 中的 systemjs 代码添加到我的问题中
我现在看到你有 systemjs 作为你的模块加载器。现在有什么问题？（据我所知，它应该可以工作）
在 Electron 中查看 angular2 应用程序时，它会尝试加载 /Tabs/tabs 而不是 /Tabs/tabs.js。如果没有 js 扩展，它不会解析。

【解决方案2】：

安装了 TypeScript 的 Visual Studio 会忽略您的 tsconfig 文件。

在 TypeScript Build 下的项目属性中，将模块系统设置为“系统”

您必须通过在 PropertyGroup 下添加以下行来手动更改您的项目文件：

<TypeScriptExperimentalDecorators>true</TypeScriptExperimentalDecorators>
<TypeScriptModuleResolution>node</TypeScriptModuleResolution>

【讨论】：