使用Typescript 1.7从Angular 2模块导入课程的麻烦

前端之家收集整理的这篇文章主要介绍了使用Typescript 1.7从Angular 2模块导入课程的麻烦前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一些麻烦,了解如何从TypeScript中的模块导入类,特别是使用TypeScript 1.7在Visual Studio 2015(更新1)中的角度2。

在Angular 2文档的任何地方我看到import语句如:
从“angular2 / core”导入{Component};这些文件在node_modules / angular2 / *中。什么使得angle2 / *工作?

当我有一个相对路径从应用程序目录,如:./../node_modules/angular2/platform/browser’;我只能摆脱Visual Studio中的错误。这修复了Visual Studio构建错误,但是当我尝试使用System.import(‘app / boot’)运行该应用程序时,我会收到一堆如下错误

system.src.js:1049 GET 07000 404 (Not Found)

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

我以为设置defaultExtension:System.config的’js’应该会照顾这个问题。

UPDATE
以下是我认为相关的所有文件

意见/家庭/ 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推荐使用System.config设置格式为“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分钟的快速启动进行一些编辑,以使其与MAMP协同工作。

你必须告诉SystemJS在哪里找到您的自定义模块,但是您不能设置baseURL。设置baseURL似乎弄乱了节点模块的模块分辨率(如角度)。将其添加到您的systemjs config中:

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

但是不要改变角度导入语句。那些不是路径,它们是模块名称,如果您已经在head脚本标签中包含angular2.dev.js,那么systemjs应该可以解决它们。

您也可能需要包括

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

在你的app.ts的顶部(或任何你称之为bootstrap)

猜你在找的Angularjs相关文章