Reference issues working the example with latest preview tools and versions of TS and Angular

[john-spurlin]

I apologize in advance for all the information in this inquiry. I am a neophyte in the ASP.NET Core and Angular/Typescript worlds.

I am having a different issue working through the first example. I am having the following issue when I attempt to create the app.component.ts file:

I am sure there is an issue with my configurations, but I have rechecked them and have been unable to resolve the issue.

I have the latest version of Node and npm installed.

Here are my NPM configs (package.json):
{
"version": "1.0.0",
"name": "opengameslistwebapp",
"private": true,
"dependencies": {
"typings": "^1.5.0",
"@angular/common": "2.1.0",
"@angular/compiler": "2.1.0",
"@angular/core": "2.1.0",
"@angular/http": "2.1.0",
"@angular/platform-browser": "2.1.0",
"@angular/platform-browser-dynamic": "2.1.0",
"@angular/upgrade": "2.1.0",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.8",
"rxjs": "^5.0.0-rc.1",
"systemjs": "^0.19.40",
"zone.js": "^0.6.26"
},
"devDependencies": {
"gulp": "3.9.1",
"gulp-clean": "0.3.2",
"gulp-concat": "2.6.0",
"gulp-sourcemaps": "2.2.0",
"gulp-typescript": "3.1.2",
"gulp-uglify": "2.0.0",
"typescript": "2.0.6"
},
"scripts": {
"postinstall": "typings install dt~core-js --global"
}
}

Here are my typescript configurations (tsconfig.json):
{
"compileOnSave": false,
"compilerOptions": {
"module": "system",
"moduleResolution": "node",
"target": "es5",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"noImplicitAny": false,
"noEmitOnError": false,
"removeComments": false
},
"exclude": [
"node_modules",
"wwwroot"
]
}

And finally, here are my project configurations (project.json):
{
"dependencies": {
"Microsoft.ApplicationInsights.AspNetCore": "1.0.0",
"Microsoft.AspNetCore.Mvc": "1.0.1",
"Microsoft.AspNetCore.Routing": "1.0.1",
"Microsoft.AspNetCore.Server.IISIntegration": "1.0.0",
"Microsoft.AspNetCore.Server.Kestrel": "1.0.1",
"Microsoft.Extensions.Configuration.EnvironmentVariables": "1.0.0",
"Microsoft.Extensions.Configuration.FileExtensions": "1.0.0",
"Microsoft.Extensions.Configuration.Json": "1.0.0",
"Microsoft.Extensions.Logging": "1.0.0",
"Microsoft.Extensions.Logging.Console": "1.0.0",
"Microsoft.Extensions.Logging.Debug": "1.0.0",
"Microsoft.Extensions.Options.ConfigurationExtensions": "1.0.0",
"Microsoft.AspNetCore.Authentication.JwtBearer": "1.0.0",
"Microsoft.AspNetCore.StaticFiles": "1.0.0",
"Microsoft.VisualStudio.Web.BrowserLink.Loader": "14.0.0",
"Newtonsoft.Json": "9.0.1"
},

"tools": {
"Microsoft.AspNetCore.Server.IISIntegration.Tools": "1.0.0-preview2-final"
},

"frameworks": {
"net461": { }
},

"buildOptions": {
"emitEntryPoint": true,
"preserveCompilationContext": true
},

"publishOptions": {
"include": [
"wwwroot",
"**/*.cshtml",
"appsettings.json",
"web.config"
]
},

"scripts": {
"postpublish": [ "dotnet publish-iis --publish-folder %publish:OutputPath% --framework %publish:FullTargetFramework%" ]
}
}

Once I add app.component.ts and execute the Task Runner I have the other issue which appears to be a compatibility issue between es5 and es6 (I haven't tackled this one yet, since there is another issue with creating the app.component.ts file above):

I did try adding the typings configuration file (typings.json), but maybe the information needs to be updated depending on the versions of core-js I am using:

{
"globalDependencies": {
"core-js": "registry:dt/core-js#0.0.0+20160914114559",
"jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
"node": "registry:dt/node#6.0.0+20160621231320"
}
}

C:/Users/YourMomentOfZen/documents/visual studio 2015/Projects/OpenGamesList/src/OpenGamesListWebApp/node_modules/@angular/core/src/application_init.d.ts(16,18): error TS2304: Cannot find name 'Promise'.
C:/Users/YourMomentOfZen/documents/visual studio 2015/Projects/OpenGamesList/src/OpenGamesListWebApp/node_modules/@angular/core/src/application_ref.d.ts(106,67): error TS2304: Cannot find name 'Promise'.
C:/Users/YourMomentOfZen/documents/visual studio 2015/Projects/OpenGamesList/src/OpenGamesListWebApp/node_modules/@angular/core/src/application_ref.d.ts(122,101): error TS2304: Cannot find name 'Promise'.
C:/Users/YourMomentOfZen/documents/visual studio 2015/Projects/OpenGamesList/src/OpenGamesListWebApp/node_modules/@angular/core/src/application_ref.d.ts(148,67): error TS2304: Cannot find name 'Promise'.
C:/Users/YourMomentOfZen/documents/visual studio 2015/Projects/OpenGamesList/src/OpenGamesListWebApp/node_modules/@angular/core/src/application_ref.d.ts(150,101): error TS2304: Cannot find name 'Promise'.
C:/Users/YourMomentOfZen/documents/visual studio 2015/Projects/OpenGamesList/src/OpenGamesListWebApp/node_modules/@angular/core/src/change_detection/differs/default_keyvalue_differ.d.ts(24,15): error TS2304: Cannot find name 'Map'.
C:/Users/YourMomentOfZen/documents/visual studio 2015/Projects/OpenGamesList/src/OpenGamesListWebApp/node_modules/@angular/core/src/change_detection/differs/default_keyvalue_differ.d.ts(28,16): error TS2304: Cannot find name 'Map'.
C:/Users/YourMomentOfZen/documents/visual studio 2015/Projects/OpenGamesList/src/OpenGamesListWebApp/node_modules/@angular/core/src/di/reflective_provider.d.ts(88,123): error TS2304: Cannot find name 'Map'.
C:/Users/YourMomentOfZen/documents/visual studio 2015/Projects/OpenGamesList/src/OpenGamesListWebApp/node_modules/@angular/core/src/di/reflective_provider.d.ts(88,165): error TS2304: Cannot find name 'Map'.
C:/Users/YourMomentOfZen/documents/visual studio 2015/Projects/OpenGamesList/src/OpenGamesListWebApp/node_modules/@angular/core/src/facade/collection.d.ts(4,9): error TS2304: Cannot find name 'Map'.
C:/Users/YourMomentOfZen/documents/visual studio 2015/Projects/OpenGamesList/src/OpenGamesListWebApp/node_modules/@angular/core/src/facade/collection.d.ts(5,30): error TS2304: Cannot find name 'Map'.
C:/Users/YourMomentOfZen/documents/visual studio 2015/Projects/OpenGamesList/src/OpenGamesListWebApp/node_modules/@angular/core/src/facade/collection.d.ts(8,43): error TS2304: Cannot find name 'Map'.
C:/Users/YourMomentOfZen/documents/visual studio 2015/Projects/OpenGamesList/src/OpenGamesListWebApp/node_modules/@angular/core/src/facade/collection.d.ts(10,23): error TS2304: Cannot find name 'Map'.
C:/Users/YourMomentOfZen/documents/visual studio 2015/Projects/OpenGamesList/src/OpenGamesListWebApp/node_modules/@angular/core/src/facade/collection.d.ts(11,25): error TS2304: Cannot find name 'Map'.
C:/Users/YourMomentOfZen/documents/visual studio 2015/Projects/OpenGamesList/src/OpenGamesListWebApp/node_modules/@angular/core/src/facade/lang.d.ts(12,17): error TS2304: Cannot find name 'Map'.
C:/Users/YourMomentOfZen/documents/visual studio 2015/Projects/OpenGamesList/src/OpenGamesListWebApp/node_modules/@angular/core/src/facade/lang.d.ts(13,17): error TS2304: Cannot find name 'Set'.
C:/Users/YourMomentOfZen/documents/visual studio 2015/Projects/OpenGamesList/src/OpenGamesListWebApp/node_modules/@angular/core/src/linker/compiler.d.ts(53,49): error TS2304: Cannot find name 'Promise'.
C:/Users/YourMomentOfZen/documents/visual studio 2015/Projects/OpenGamesList/src/OpenGamesListWebApp/node_modules/@angular/core/src/linker/compiler.d.ts(61,65): error TS2304: Cannot find name 'Promise'.
C:/Users/YourMomentOfZen/documents/visual studio 2015/Projects/OpenGamesList/src/OpenGamesListWebApp/node_modules/@angular/core/src/linker/ng_module_factory_loader.d.ts(14,34): error TS2304: Cannot find name 'Promise'.
C:/Users/YourMomentOfZen/documents/visual studio 2015/Projects/OpenGamesList/src/OpenGamesListWebApp/node_modules/@angular/core/src/linker/system_js_ng_module_factory_loader.d.ts(28,25): error TS2304: Cannot find name 'Promise'.
C:/Users/YourMomentOfZen/documents/visual studio 2015/Projects/OpenGamesList/src/OpenGamesListWebApp/node_modules/@angular/core/src/util/lang.d.ts(8,53): error TS2304: Cannot find name 'Promise'.
C:/Users/YourMomentOfZen/documents/visual studio 2015/Projects/OpenGamesList/src/OpenGamesListWebApp/node_modules/rxjs/Observable.d.ts(68,60): error TS2304: Cannot find name 'Promise'.
C:/Users/YourMomentOfZen/documents/visual studio 2015/Projects/OpenGamesList/src/OpenGamesListWebApp/node_modules/rxjs/Observable.d.ts(68,70): error TS2304: Cannot find name 'Promise'.

Any advice would be appreciated. I really tried resolving this before posting here.

[Darkseal]

I'm adding this comment to share this workaround I found to overcome a rather common issue which is happening due to this DefinitelyTyped/core-js issue which strongly affects the Visual Studio TypeScript compiler.

The compilation errors you can receive are the following:

Error TS2693 Build:'Map' only refers to a type, but is being used as a value here.
Error TS2693 Build:'Promise' only refers to a type, but is being used as a value here.
Error TS2693 Build:'Set' only refers to a type, but is being used as a value here.
Error TS2304 Build:Cannot find name 'Iterable'.
Error TS2304 Build:Cannot find name 'IterableIterator'.
Error TS2304 Build:Cannot find name 'MapConstructor'.
Error TS2304 Build:Cannot find name 'Iterator'.
Error TS2304 Build:Cannot find name 'PromiseConstructor'.
Error TS2304 Build:Cannot find name 'PropertyKey'.
Error TS2304 Build:Cannot find name 'SetConstructor'.
Error TS2304 Build:Cannot find name 'Symbol'.
Error TS2304 Build:Cannot find name 'WeakMapConstructor'.
Error TS2304 Build:Cannot find name 'WeakSetConstructor'.
Error TS2339 Build:Property 'for' does not exist on type 'SymbolConstructor'.
Error TS2339 Build:Property 'hasInstance' does not exist on type 'SymbolConstructor'.
Error TS2339 Build:Property 'isConcatSpreadable' does not exist on type 'SymbolConstructor'.
Error TS2339 Build:Property 'iterator' does not exist on type 'SymbolConstructor'.
Error TS2339 Build:Property 'keyFor' does not exist on type 'SymbolConstructor'.
Error TS2339 Build:Property 'match' does not exist on type 'SymbolConstructor'.
Error TS2339 Build:Property 'replace' does not exist on type 'SymbolConstructor'.
Error TS2339 Build:Property 'search' does not exist on type 'SymbolConstructor'.
Error TS2339 Build:Property 'species' does not exist on type 'SymbolConstructor'.
Error TS2339 Build:Property 'split' does not exist on type 'SymbolConstructor'.
Error TS2339 Build:Property 'toPrimitive' does not exist on type 'SymbolConstructor'.
Error TS2339 Build:Property 'toStringTag' does not exist on type 'SymbolConstructor'.
Error TS2339 Build:Property 'unscopables' does not exist on type 'SymbolConstructor'.

.. and so on.

The problem is due to an internal issue within that third-party library. We can fix that by specifying a fixed/unaffected version, so our project won't update it anymore with the latest build (which is causing the issue).

In order to do that open the project's package.json file and replace this:

  "scripts": {
    "postinstall": "typings install dt~core-js --global"
  }

with this:

  "scripts": {
    "postinstall": "typings install dt~core-js@0.9.7+20161130133742 --global"
  }

I will release a GitHub patch later today to fix the source code as well.

N.B.: There are many other possible ways to work around this problem: I chose this one because it doesn't require any significative change to the source code, thus making it easier to pull off for those who purchased the book.