使用 Typescript 1.7 从 Angular 2 模块导入类的问题

Question

提问by Adam Hitchens

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.

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

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?

到处角2文档中我看到import语句，如： import {Component} from 'angular2/core';。这些文件位于node_modules/angular2/*. 是什么让刚刚angular2/*工作？

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:

当我有来自应用程序目录的相对路径时，我只能摆脱 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/browser404 (Not Found)

system.src.js:1049 GET http://localhost:8080/node_modules/angular2/platform/browser404（未找到）

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.

另一个问题是能够使用诸如：import {SearchComponent} from './Components/Search/search.component';在 Visual Studio 中的语句，但是当我运行它时，在system.src.js:2476.

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

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

UPDATEHere are all the files that I think are relevant:

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

views/home/index.html

意见/主页/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

测试.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

打字/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';

File structure:

文件结构：

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)

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/angular2says that the files can be consumed using CommonJs.

对TypeScript不熟悉，会不会是不同的Typescript模块系统导致的错误？Angular 2 推荐使用 System.config，format: 'register'但https://www.npmjs.com/package/angular2表示可以使用 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

Answer 1

回答by Brad

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

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

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:

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

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

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.

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

You also may have to include:

您可能还必须包括：

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

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

在 app.ts 的顶部（或任何你调用 bootstrap 的地方）

Answer 2

回答by Jerry

The following worked for me.

以下对我有用。

System.config({    
          transpiler: 'typescript', 
          typescriptOptions: { emitDecoratorMetadata: true }, 
          packages: {       
          app: {
              defaultExtension: 'ts'
          }
        }
      });

I also included the typescript int the header

我还在标题中包含了打字稿

<script src="https://code.angularjs.org/tools/typescript.js"></script>

Answer 3

回答by pe8ter

How does your HTML file load the Angular 2 library? It should be as simple as

您的 HTML 文件如何加载 Angular 2 库？应该很简单

<script src="path/to/my/libs/angular2.dev.js"></script>

You'll notice that file contains the entirety of the built/concatenated Angular 2 library. You shouldn't point your web page at the raw source files.

您会注意到该文件包含完整的构建/连接的 Angular 2 库。您不应将网页指向原始源文件。

SystemJS knows what angular2/coremeans because the built library defines what that pattern means. Although it appears to be some directory structure (which it probably is in the unbuilt library) it's actually just some name for a module the built library. Search for this text in the built library and you'll see it defined:

SystemJS 知道这angular2/core意味着什么，因为构建的库定义了该模式的含义。尽管它看起来是某种目录结构（它可能在未构建的库中），但它实际上只是构建库模块的一些名称。在构建的库中搜索此文本，您将看到它已定义：

System.register("angular2/core", ...

Answer 4

回答by user3448990

The little red squiggly lines are probably because of your tsconfig.json. At least that is what caused the problem for me. The problem I had was I was using both files[] and excludes[]. This doesn't work as expected and is not a valid config.

小红色波浪线可能是因为您的 tsconfig.json。至少这就是给我带来问题的原因。我遇到的问题是我同时使用了文件 [] 和排除 []。这不能按预期工作，并且不是有效的配置。

I resolved this problem but I still have the "Uncaught ReferenceError: require is not defined " problem.

我解决了这个问题，但我仍然有“Uncaught ReferenceError: require is not defined”的问题。

Answer 5

回答by Dániel Kis

"I resolved this problem but I still have the "Uncaught ReferenceError: require is not defined " problem."

“我解决了这个问题，但我仍然有“未捕获的引用错误：需要未定义”的问题。

systemjs can be configured to use require format:

systemjs 可以配置为使用 require 格式：

System.config({
  packages: {
    app: {   // must be replaced 
      format: 'amd'
    }
  }
});

but if it is in your own code typescript compiler output can be set in tsconfig:

但如果是在你自己的代码打字稿编译器输出可以在 tsconfig 中设置：

{
  "compilerOptions": {
    ...
    "module": "system"
    ... 
  }
}

in your visual studio configuration file it might means:

在您的 Visual Studio 配置文件中，它可能意味着：

<TypeScriptModuleKind>system</TypeScriptModuleKind>

使用 Typescript 1.7 从 Angular 2 模块导入类的问题

提问by Adam Hitchens

回答by Brad

回答by Jerry

回答by pe8ter

回答by user3448990

回答by Dániel Kis

相关推荐

最近更新

标签

使用 Typescript 1.7 从 Angular 2 模块导入类的问题

提问by Adam Hitchens

回答by Brad

回答by Jerry

回答by pe8ter

回答by user3448990

回答by Dániel Kis

相关推荐

TypeScript 自定义事件监听器

Typescript 和 Uncaught SyntaxError：在严格模式之外尚不支持块范围的声明（let、const、function、class）

typescript root 指令上的 Angular 2 输入参数

typescript 在 Angular 2 模板中进行类型检查

相关推荐

最近更新

标签