使用 Typescript 1.7 从 Angular 2 模块导入类的问题 [英] Troubles with importing classes from Angular 2 modules with Typescript 1.7

问题描述

我在理解如何从 TypeScript 中的模块中导入类时遇到了一些麻烦，特别是对于带有 TypeScript 1.7 的 Visual Studio 2015(更新 1)中的 Angular 2.

I am having some trouble understanding how to import classes from Modules in TypeScript, specifically for Angular 2 in Visual Studio 2015 (update 1) with TypeScript 1.7.

在 Angular 2 文档的任何地方，我都看到了诸如以下的导入语句:从'angular2/core'导入{Component}；.这些文件位于 node_modules/angular2/* 中.是什么让 angular2/* 工作?

Everywhere in the Angular 2 documentation I see import statements such as: import {Component} from 'angular2/core';. These files are in node_modules/angular2/*. What makes just angular2/* work?

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

I can only get rid of the errors in Visual Studio when I have a relative path from the app directory such as: ./../node_modules/angular2/platform/browser';. This fixes the Visual Studio build errors, but when I try and run the app with System.import('app/boot') I get a bunch of errors like this:

system.src.js:1049 GET http://localhost:8080/node_modules/angular2/平台/浏览器 404(未找到)

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 错误.

Another issue is being able to use statements such as: import {SearchComponent} from './Components/Search/search.component'; in Visual Studio, but then when I run it there are a lot of GET errors at system.src.js:2476.

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

I thought that setting the defaultExtension: 'js' for System.config should have taken care of that issue.

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

UPDATE Here are all the files that I think are relevant:

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 推荐的 System.config 设置为 format: 'register' 但https://www.npmjs.com/package/angular2 表示可以使用 CommonJs 使用这些文件.

I am unfamiliar with TypeScript, could there be an error caused by different Typescript module systems? Angular 2 recommended System.config be set with format: 'register' but https://www.npmjs.com/package/angular2 says that the files can be consumed using CommonJs.

使用这些文件，我收到了这两个控制台错误:

With these files, I get these two console errors:

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

推荐答案

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

I had to make a couple edits to the 5 minute quickstart to get it working with MAMP.

您必须告诉 SystemJS 在哪里可以找到您的自定义模块，但是您不能设置 baseURL 来做到这一点.设置 baseURL 似乎弄乱了节点模块(如 angular)的模块分辨率.将此添加到您的 systemjs 配置中:

You've got to tell SystemJS where to find your custom modules, but you can't set baseURL to do it. Setting baseURL seems to mess up module resolution for the node modules(like angular). Add this to your systemjs config instead:

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

但不要更改角度导入语句.那些不是路径，它们是模块名称，如果您已经将 angular2.dev.js 包含在 head 脚本标签中，那么 systemjs 应该可以很好地解析它们，就像您所做的那样.

But don't change the angular import statements. Those aren't paths, they're module names and systemjs should resolve them just fine if you've included angular2.dev.js in a head script tag, as you have.

您可能还必须包括:

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

在你的 app.ts 的顶部(或者任何你调用 bootstrap 的地方)

at the top of your app.ts(or wherever you call bootstrap)

这篇关于使用 Typescript 1.7 从 Angular 2 模块导入类的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！