带有Visual Studio 2013的Angularjs 2(更新5) [英] Angularjs 2 with visual studio 2013 (update 5)

问题描述

我正在尝试在VS 2013(更新5)IDE中使用angularjs 2开发应用程序.

我在这里使用实时示例- https ://angular.io/docs/ts/latest/cookbook/a1-a2-quick-reference.html

我的机器上没有安装nodejs/npm(因为公司目前不支持它)...所以我指的是使用systemjs.config.js中提到的使用CDN url的npm模块./p>

当我构建(在Visual Studio中为build/rebuild选项)我的应用程序时，出现以下错误- 找不到模块"@ angular/core". 找不到模块'@ angular/platform-b​​rowser-dynamic'.

如果我运行我的应用程序，则会收到我在这篇文章中提到的错误(按F12键时). https://stackoverflow.com/questions/38044718/angularjs-2- in-visual-studio-2013-not-translpiling

我试图从另一台机器上复制@angular模块-似乎找不到模块'@ angular/core'-这个问题消失了.

我们是否需要在本地机器中安装npm模块才能使Angle 2正常工作?如果可以，插销示例如何工作?

如果我们在本地引用CDN url而不是npm模块，则tsconfig.js中的"moduleresolution"条目会起作用吗?

解决方案

解决方案

似乎VS 2013截至目前还不支持tsconfig.json.

您可以定义在项目文件中使用的相同配置.例如:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  }
}
can be defined in the project file as:

  <PropertyGroup Condition="'$(Configuration)' == 'Debug'">
    <TypeScriptTarget>ES5</TypeScriptTarget>
    <TypeScriptModuleKind>commonjs</TypeScriptModuleKind>
    <TypeScriptModuleResolution>node</TypeScriptModuleResolution>
    <TypeScriptSourceMap>True</TypeScriptSourceMap>
    <TypeScriptEmitDecoratorMetadata>True</TypeScriptEmitDecoratorMetadata>
    <TypeScriptExperimentalDecorators>True</TypeScriptExperimentalDecorators>
    <TypeScriptRemoveComments>False</TypeScriptRemoveComments>
    <TypeScriptNoImplicitAny>True</TypeScriptNoImplicitAny>
  </PropertyGroup>

https://github.com/Microsoft/TypeScript/issues/8784

还如下更改您的systemjs.config.js. (我不知道这是否是正确的做法，但似乎可行).

var config = {
    // DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
    transpiler: 'ts',
    typescriptOptions: {
      tsconfig: false
    },
    meta: {
      'typescript': {
        "exports": "ts"
      }
    },
    map: map,
    packages: packages
  };

I am trying to develop an application using angularjs 2 in VS 2013 (update 5) IDE.

I am using the live examples here - https://angular.io/docs/ts/latest/cookbook/a1-a2-quick-reference.html

I don't have nodejs/npm installed in my machine (as company dont support it as of now)...so I am referring to the npm modules using CDN urls as mentioned in the systemjs.config.js.

When I build (build/rebuild option in visual studio) my application, I get errors like - Cannot find module '@angular/core'. Cannot find module '@angular/platform-browser-dynamic'.

If I run my application - I get error as I mentioned in this post (when I press F12). https://stackoverflow.com/questions/38044718/angularjs-2-in-visual-studio-2013-not-translpiling

I tried to copy @angular modules from another machine - and it seems Cannot find module '@angular/core' - this issue is going away.

Do we need to have npm modules installed in locaal machine for angular 2 to work?, If so how the plunker examples are working?

If we refer the CDN urls instead of npm modules locally, will the "moduleresolution" entry in tsconfig.js work?

EDIT : Solution

解决方案

It seems VS 2013 is not supporting tsconfig.json as of now.

You can define the same configuration you are using in the project file. for instance:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  }
}
can be defined in the project file as:

  <PropertyGroup Condition="'$(Configuration)' == 'Debug'">
    <TypeScriptTarget>ES5</TypeScriptTarget>
    <TypeScriptModuleKind>commonjs</TypeScriptModuleKind>
    <TypeScriptModuleResolution>node</TypeScriptModuleResolution>
    <TypeScriptSourceMap>True</TypeScriptSourceMap>
    <TypeScriptEmitDecoratorMetadata>True</TypeScriptEmitDecoratorMetadata>
    <TypeScriptExperimentalDecorators>True</TypeScriptExperimentalDecorators>
    <TypeScriptRemoveComments>False</TypeScriptRemoveComments>
    <TypeScriptNoImplicitAny>True</TypeScriptNoImplicitAny>
  </PropertyGroup>

https://github.com/Microsoft/TypeScript/issues/8784

Also make changes to your systemjs.config.js as follows. (I dont know if this is right thing to do but it seems working).

var config = {
    // DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
    transpiler: 'ts',
    typescriptOptions: {
      tsconfig: false
    },
    meta: {
      'typescript': {
        "exports": "ts"
      }
    },
    map: map,
    packages: packages
  };

这篇关于带有Visual Studio 2013的Angularjs 2(更新5)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！