Question

我正在尝试设置一个利用角度2的可视化工作室解决方案。首先，我正在构建本教程中介绍的简单程序： https://angular.io/docs/ts/latest/guide/setup.html

这些是创建的3个TS文件：

inventory.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule }      from '@angular/core';
import { InventoryComponent } from './inventory.component'

@NgModule({
  imports: [BrowserModule],
  declarations: [InventoryComponent],
  bootstrap: [InventoryComponent]
})


export class InventoryModule {
}

inventory.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'inventory',
  template: `<h1>Hello {{name}}</h1>`
})
export class InventoryComponent { name = 'Angular'; }

inventory.boot.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { InventoryModule }              from './inventory.module';

platformBrowserDynamic().bootstrapModule(InventoryModule);

我在chrome中运行应用程序时遇到此错误： inventory.module.js：12未捕获的SyntaxError：标识符'core_1'已被声明

这种情况正在发生，因为typescript中的import语句都转换为如下所示的行： const core_1 = require（'@ angular / core'）;

因此，多个文件具有这些全局声明常量，所有文件都使用名称core_1进行转换。

显然这里有一些解决方法，但我找不到任何东西。任何人都可以提出建议吗？提前谢谢！

修改按请求，发布我的打字稿配置： tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "noImplicitAny": true,
    "sourceMap": true,
    "experimentalDecorators": true
  }
}

此外，.csproj文件中还有一些适用的属性：

<TypeScriptModuleKind>CommonJs</TypeScriptModuleKind>
<TypeScriptCompileOnSaveEnabled>True</TypeScriptCompileOnSaveEnabled>
<TypeScriptEmitDecoratorMetadata>True</TypeScriptEmitDecoratorMetadata>
<TypeScriptExperimentalDecorators>True</TypeScriptExperimentalDecorators>
<TypeScriptGeneratesDeclarations>False</TypeScriptGeneratesDeclarations>
<TypeScriptJSXEmit>None</TypeScriptJSXEmit>
<TypeScriptModuleResolution>Node</TypeScriptModuleResolution>
<TypeScriptNoEmitOnError>True</TypeScriptNoEmitOnError>
<TypeScriptNoImplicitAny>True</TypeScriptNoImplicitAny>
<TypeScriptRemoveComments>True</TypeScriptRemoveComments>
<TypeScriptSourceMap>True</TypeScriptSourceMap>
<TypeScriptTarget>ES6</TypeScriptTarget>

只是解释其中的一些选择

ES6是目标，因为在引用angular2时我在visual studio中遇到编译器错误（因为它依赖于Promise等ES6对象）
模块分辨率是Node，因为我需要tsc来遍历节点树以获得对angular 2
模块类型最初是AMD，但我需要将其更改为CommonJs，因为我在运行时在浏览器中收到错误“define is not defined”。

Answer 1

您获得重复标识符错误的原因是因为浏览器将每个CommonJS模块视为具有相同的范围。像Node这样的CommonJS环境隐含地假设每个文件都有自己的范围。

然后，TypeScript发出的每个声明都是const声明，但遇到两个let或const同名声明时出现JavaScript错误。

模块类型最初是AMD，但我需要将其更改为CommonJs，因为我收到错误＆＃34;定义未定义＆＃34;在运行时在浏览器中。

这是因为您没有在页面上包含和配置AMD加载程序（如Require.js）。

您需要使用某种模块加载器或捆绑器来在浏览器中使用模块。

如果您正在使用systemjs，请使用System.js.
如果您要定位AMD，请使用Require.js。
如果您正在使用CommonJS，请使用Webpack或Browserify工作。

对于System.js和AMD，您需要在页面上使用<script>标记和初始配置才能使其正常工作。

ES6是目标，因为在引用angular2时我在visual studio中遇到编译器错误（因为它依赖于Promise等ES6对象）

您可能不想定位ES6，因为旧浏览器无法使用ES6构造，因此ES5是更好的选择。但是，如果您要包含Promise polyfill（例如core-js或es6-shim），则可以将lib（或您的MSBuild <TypeScriptLib>）设置为以下内容：

dom,es2015,es5

Visual Studio Typescript - 重复的全局标识符

1 个答案: