Angular2代码在TFS Build中引发错误

时间:2016-10-17 12:41:53

标签: visual-studio angular typescript azure-devops tfsbuild

我有一个.net Wepapi项目作为Backend和一个用Angular2编写的前端都包含在visual studio解决方案中。 本地构建工作正常,但如果我使用CD Pipeline中的TFS Online构建它,则构建失败。我发现了以下错误:

  

构建:无法找到模块' @ angular / core'。

和其他一些人这样。

这是我的package.json文件

{
  "name": "emersy",
  "version": "1.0.0",
  "scripts": {
    "start": "concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "typings": "typings",
    "postinstall": "typings install"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/common": "~2.1.0",
    "@angular/compiler": "~2.1.0",
    "@angular/core": "~2.1.0",
    "@angular/forms": "~2.1.0",
    "@angular/http": "~2.1.0",
    "@angular/platform-browser": "~2.1.0",
    "@angular/platform-browser-dynamic": "~2.1.0",
    "@angular/router": "~3.1.0",
    "@angular/upgrade": "~2.1.0",
    "bootstrap": "^3.3.7",
    "core-js": "^2.4.1",
    "jquery": "^2.2.3",
    "reflect-metadata": "^0.1.8",
    "rxjs": "5.0.0-beta.12",
    "systemjs": "0.19.39",
    "zone.js": "^0.6.25"
  },
  "devDependencies": {
    "concurrently": "^3.0.0",
    "lite-server": "^2.2.2",
    "typescript": "^2.0.3",
    "typings": "^1.4.0"
  }
}

这是我的打字

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

这是我的tsconfig

{
  "compileOnSave": true,
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": true
  }
}

注意:我使用xaml build而不是新的构建引擎。

这里是我的systems.js.config

(function (global) {
    System.config({
        transpiler: 'ts',
        typescriptOptions: {
            tsconfig: true
        },
        meta: {
            'typescript': {
                "exports": "ts"
            }
        },
        paths: {
            // paths serve as alias
            'npm:': 'https://unpkg.com/'
        },
        // map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            app: 'app',

            // angular bundles
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
            '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',

            // other libraries
            'rxjs': 'npm:rxjs',
            'ts': 'npm:plugin-typescript@4.0.10/lib/plugin.js',
            'typescript': 'npm:typescript@2.0.2/lib/typescript.js',

        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            app: {
                main: './main.ts',
                defaultExtension: 'ts'
            },
            rxjs: {
                defaultExtension: 'js'
            }
        }
    });
})(this);

EDIT1: 将构建迁移到vnext后,构建现在可以正常工作,并且不会产生构建错误。现在我已经在我的azure应用程序中添加了部署作为构建步骤。应用程序在天蓝色应用程序上掉线但我的角度代码不起作用。 我收到这个错误:

mysite.azurewebsites.net/:38 Error: (SystemJS) Unexpected token <
    SyntaxError: Unexpected token <
    Evaluating http://mysite.azurewebsites.net/app/main.ts
    Error loading http://mysite.azurewebsites.net/app/main.ts

看起来这不是应对npm模块

这是我的构建配置 enter image description here

编辑2: enter image description here

enter image description here

编辑3: MSBuild参数

/p:DeployOnBuild=true /p:WebPublishMethod=Package /p:PackageAsSingleFile=true /p:SkipInvalidConfigurations=true /p:PackageLocation=$(build.stagingDirectory)

enter image description here

1 个答案:

答案 0 :(得分:0)

将构建迁移到vnext后,构建现在可以正常工作,并且不会产生构建错误。现在我已经在我的azure应用程序中添加了部署作为构建步骤。应用程序在天蓝色应用程序上掉线但我的角度代码不起作用。 我收到这个错误:

mysite.azurewebsites.net/:38 Error: (SystemJS) Unexpected token <
    SyntaxError: Unexpected token <
    Evaluating http://mysite.azurewebsites.net/app/main.ts
    Error loading http://mysite.azurewebsites.net/app/main.ts

看起来这不是应对npm模块

这是我的构建配置 enter image description here