使用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文档中的任何地方，我都能看到导入语句，例如: import {Component} from 'angular2/core';.这些文件位于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?

只有从应用程序目录获得相对路径(例如:./../node_modules/angular2/platform/browser';)时，我才能摆脱Visual Studio中的错误.这可以修复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)

另一个问题是能够在Visual Studio中使用以下语句:import {SearchComponent} from './Components/Search/search.component';，但是当我运行它时，在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 />

类型/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模块系统可能会导致错误吗?建议使用format: 'register'设置Angular 2 System.config，但 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，那么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顶部(或任何您称为引导的地方)

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

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