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

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

在Angular 2文档中,我看到了导入语句,例如: 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中使用如下语句:但是当我运行它时,会出现很多GET错误system.src.js:2476.

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

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

意见/家庭/ index.html的

System.config({
        packages: {
            app: {
                format: 'register',
                defaultExtension: 'js'
            }
        }
    });
System.import('app/app')
    .then(null, console.error.bind(console));

test.csproj

1.7
True
Node
ES5
None
True
False
CommonJS
False


False
True
True

分型/ 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使用文件.

使用这些文件,我得到以下两个控制台错误:

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

我不得不对5分钟的快速入门进行一些编辑,以使其与MAMP一起工作.

您必须告诉SystemJS在哪里可以找到您的自定义模块,但您无法设置baseURL来执行此操作.设置baseURL似乎搞乱了节点模块的模块分辨率(如angular).将其添加到您的systemjs配置中:

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

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

您还可能必须包括:

///

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

我不得不对5分钟的快速入门进行一些编辑,以使其与MAMP一起工作.

您必须告诉SystemJS在哪里可以找到您的自定义模块,但您无法设置baseURL来执行此操作.设置baseURL似乎搞乱了节点模块的模块分辨率(如angular).将其添加到您的systemjs配置中:

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

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

您还可能必须包括:

///

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