I'm in the process of setting up a visual studio solution using angular 2. Initially, I'm creating the basic program outlined in this tutorial: https://angular.io/docs/ts/latest/guide/setup.html
These are the three TS files that have been generated:
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);
When running the application in Chrome, I encounter the following error: inventory.module.js:12 Uncaught SyntaxError: Identifier 'core_1' has already been declared
This issue arises due to import statements in TypeScript all transposing to a line like this: const core_1 = require('@angular/core');
Consequently, multiple files contain these globally declared constants, each transposed with the name core_1.
Evidently, there might be a workaround for this problem, but my search efforts have been fruitless. Can anyone provide some advice? Thank you in advance!
EDIT Upon request, here is my TypeScript config: tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"target": "es6",
"noImplicitAny": true,
"sourceMap": true,
"experimentalDecorators": true
}
}
Furthermore, certain properties in the .csproj file may apply:
<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>
To clarify some of these choices
- The target ES6 is chosen because I encountered compiler errors in Visual Studio when referencing angular2 (which depends on ES6 objects such as Promise).
- Module Resolution is set to Node as I require tsc to navigate the node tree to access the references to angular 2.
- The Module kind was initially AMD, but it had to be changed to CommonJs since I received the runtime error "define is not defined" in the browser.