typescript - 使用 Typescript 1.7 从 Angular 2 模块导入类的问题

Question

我在理解如何从 TypeScript 中的模块导入类时遇到一些问题，特别是在 Visual Studio 2015(更新 1)中使用 TypeScript 1.7 的 Angular 2。

在 Angular 2 文档中我到处都能看到导入语句，例如:从“angular2/core”导入{Component}；。这些文件位于 node_modules/angular2/* 中。是什么让 angular2/* 起作用？

只有当我有来自应用程序目录的相对路径时，我才能摆脱 Visual Studio 中的错误，例如:./../node_modules/angular2/platform/browser';。这修复了 Visual Studio 构建错误，但是当我尝试使用 System.import('app/boot') 运行应用程序时，我得到了一堆这样的错误:

system.src.js:1049 GET http://localhost:8080/node_modules/angular2/platform/browser 404 (Not Found)

另一个问题是能够使用如下语句:import {SearchComponent} from './Components/Search/search.component'; 在 Visual Studio 中，但是当我运行它时有system.src.js:2476 出现很多 GET 错误。

我认为为 System.config 设置 defaultExtension: 'js' 应该可以解决这个问题。

更新以下是我认为相关的所有文件:

views/home/index.html

<script src="node_modules/es6-shim/es6-shim.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>
System.config({
        packages: {
            app: {
                format: 'register',
                defaultExtension: 'js'
            }
        }
    });
System.import('app/app')
    .then(null, console.error.bind(console));

test.csproj

<TypeScriptToolsVersion>1.7</TypeScriptToolsVersion>
<TypeScriptExperimentalDecorators>True</TypeScriptExperimentalDecorators>
<TypeScriptModuleResolution>Node</TypeScriptModuleResolution>
<TypeScriptTarget>ES5</TypeScriptTarget>
<TypeScriptJSXEmit>None</TypeScriptJSXEmit>
<TypeScriptCompileOnSaveEnabled>True</TypeScriptCompileOnSaveEnabled>
<TypeScriptNoImplicitAny>False</TypeScriptNoImplicitAny>
<TypeScriptModuleKind>CommonJS</TypeScriptModuleKind>
<TypeScriptRemoveComments>False</TypeScriptRemoveComments>
<TypeScriptOutFile />
<TypeScriptOutDir />
<TypeScriptGeneratesDeclarations>False</TypeScriptGeneratesDeclarations>
<TypeScriptNoEmitOnError>True</TypeScriptNoEmitOnError>
<TypeScriptSourceMap>True</TypeScriptSourceMap>
<TypeScriptMapRoot />
<TypeScriptSourceRoot />

typings/tsd.d.ts

export * from './../node_modules/angular2/core';
export * from './../node_modules/angular2/common';
export * from './../node_modules/angular2/http';
export * from './../node_modules/angular2/router';
export * from './../node_modules/angular2/platform/browser';

文件结构:

app/
    app.ts
    components/
    models/
    services/
node_modules/ (npm install using Angular 2 quickstart's package.json)
    angular2/ (not all the files listed)
        bundles/ (not all the files listed)
            angular2.dev.js
        platform/
        src/
        ts/
        typings/
        common.d.ts
        core.d.ts
        http.d.ts
        router.d.ts
    es6-module-loader/
    es6-promise/
    es6-shim/
    rxjs/
    systemjs/
    zone.js/
    typescript/ (not sure if this needs to be here)

我不熟悉TypeScript，会不会是Typescript模块系统不同导致的错误？ Angular 2 推荐使用 format: 'register' 设置 System.config 但 https://www.npmjs.com/package/angular2说可以使用 CommonJs 使用这些文件。

有了这些文件，我得到了这两个控制台错误:

app.ts:1 Uncaught ReferenceError: require is not defined(anonymous function) @ app.ts:1
angular2-polyfills.js:143 Uncaught TypeError: Cannot read property 'split' of undefined

Answer 1

我必须对 5 分钟的快速入门进行一些编辑才能使其与 MAMP 一起使用。

您必须告诉 SystemJS 在哪里可以找到您的自定义模块，但您不能设置 baseURL 来执行此操作。设置 baseURL 似乎搞乱了节点模块的模块解析(如 Angular )。将其添加到您的 systemjs 配置中:

map: {
    app: 'path/to/app/folder'
},

但不要更改 Angular 导入语句。这些不是路径，它们是模块名称，如果您像您一样将 angular2.dev.js 包含在 head 脚本标记中，那么 systemjs 应该可以很好地解析它们。

您可能还必须包括:

///<reference path="../node_modules/angular2/typings/browser.d.ts"/>

在你的 app.ts 的顶部(或者你称之为 bootstrap 的地方)