使用Typescript 1.7从Angular 2模块导入类时遇到麻烦

Question

我在理解如何从TypeScript中的模块导入类时遇到一些麻烦，特别是对于使用TypeScript 1.7的Visual Studio 2015（更新1）中的Angular 2。

在Angular 2文档中的任何地方，我都会看到import语句，例如： import {Component} from 'angular2/core'; 。 这些文件位于node_modules/angular2/* 。 是什么让angular2/*工作？

当我从app目录获得相对路径时，我只能摆脱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.src.js:2476 。

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

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

意见/家庭/ 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 />

分型/ 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 format: 'register'但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'
},

但是不要改变角度import语句。 那些不是路径，它们是模块名称，systemjs应该解决它们，如果你已经在头部脚本标记中包含了angular2.dev.js，就像你一样。

您还可能必须包括：

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

在您的应用程序的顶部（或您在任何地方调用bootstrap）

Answer 2

您的HTML文件如何加载Angular 2库？ 它应该如此简单

<script src="path/to/my/libs/angular2.dev.js"></script>

您会注意到该文件包含整个构建/连接的Angular 2库。 您不应将您的网页指向原始源文件。

SystemJS知道angular2/core意味着什么，因为构建的库定义了该模式的含义。 虽然它似乎是一些目录结构（它可能在未构建的库中），但它实际上只是构建库的模块的一些名称。 在构建的库中搜索此文本，您将看到它已定义：

System.register("angular2/core", ...

Answer 3

小红色波浪线可能是因为你的tsconfig.json。 至少这是导致我这个问题的原因。 我遇到的问题是我使用了两个文件[]并排除了[]。 这不能按预期工作，也不是有效的配置。

我解决了这个问题，但我仍然有“未捕获的ReferenceError：require is not defined”问题。

Answer 4

“我解决了这个问题，但我仍然有”未捕获的ReferenceError：require is not defined“问题。”

systemjs可以配置为使用require格式：

System.config({
  packages: {
    app: {   // must be replaced 
      format: 'amd'
    }
  }
});

但如果是在你自己的代码中，打字机编译输出可以在tsconfig中设置：

{
  "compilerOptions": {
    ...
    "module": "system"
    ... 
  }
}

在您的visual studio配置文件中，它可能意味着：

<TypeScriptModuleKind>system</TypeScriptModuleKind>

Answer 5

以下对我有用。

System.config({    
          transpiler: 'typescript', 
          typescriptOptions: { emitDecoratorMetadata: true }, 
          packages: {       
          app: {
              defaultExtension: 'ts'
          }
        }
      });

我还在标题中包含了typescript

<script src="https://code.angularjs.org/tools/typescript.js"></script>