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获取http://localhost:8080/node_modules/angular2/platform/browser 404（未找到）

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

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

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

视图/家庭/ 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，但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'
},

但是不要改变角度导入语句。这些不是路径，如果您在头部脚本标记中包含angular2.dev.js，那么它们的模块名称和systemjs应该很好地解决它们。

您可能还必须包括：

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

位于app.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。至少这是导致我这个问题的原因。我遇到的问题是我使用了两个文件[]并排除了[]。这不能按预期工作，也不是有效的配置。

我解决了这个问题，但我仍然遇到“Uncaught ReferenceError：require is not defined”问题。

Answer 4

＆＃34;我解决了这个问题，但我仍然有＆＃34; Uncaught ReferenceError：require未定义＆＃34; 。问题＆＃34;

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>

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

5 个答案: