angular - CLI なしで Angular の e2e テストをセットアップするには?

Question

現在、非常に大きな Angular アプリケーションの e2e テストを作成しようとしていますが、それらの設定に問題があります。さまざまな状況により、Angular CLI をプロジェクトに統合しようとすることができないため、回避する必要があります。

私のプロジェクト構造

app
├── e2e
│   ├── tsconfig.e2e.json
│   ├── component.e2e-spec.ts
│   └── pages
│        └── component.page.ts
├── ....
├── protractor.conf.js
└── tsconfig.json

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "allowJs": true,
    "noEmit": true,
    "noEmitHelpers": true,
    "importHelpers": true,
    "strictNullChecks": false,
    "lib": [
      "dom",
      "es6"
    ]
  },
  "typeRoots": [
      "node_modules/@types"
    ],
  "types": [
      "jasmine",
      "node",
      "source-map",
      "uglify-js",
      "webpack"
  ],
  "exclude": [
    "node_modules",
    "!node_modules/@types",
    "dist",
    "typescript"
  ],
  "awesomeTypescriptLoaderOptions": {
    "forkChecker": true,
    "useWebpackText": true
  },
  "compileOnSave": false,
  "buildOnSave": false,
  "atom": {
    "rewriteTsconfig": false
  }
}

分度器.conf.ts

 const {SpecReporter} = require('jasmine-spec-reporter');

exports.config = {
  allScriptsTimeout: 11000,
  specs: [
    './e2e/**/*.e2e-spec.ts'
  ],
  capabilities: {
    'browserName': 'chrome',
    directConnect: true,
    baseUrl: 'http://localhost:4200/',
    framework: 'jasmine',
    jasmineNodeOpts: {
      showColors: true,
      defaultTimeoutInterval: 30000,
      print: function () {
      }
    },
    onPrepare() {
      require('ts-node').register({
        project: 'e2e/tsconfig.e2e.json'
      });
      jasmine.getEnv().addReporter(new SpecReporter({spec: {displayStacktrace: true}}));
    }
  }
}

tsconfig.e2e.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/e2e",
    "module": "commonjs",
    "target": "es5",
    "types": [
      "jasmine",
      "jasminewd2",
      "node"
    ]
  }
}

以下を使用してサーバーを起動できます。

npm run webpack-dev-server -- --config config/webpack.dev.js --open --progress --profile --watch --content-base src/

そして、次のコマンドで e2e テストを開始しようとすると:

npm-run-all -p -r server:prod:ci protractor

次のエラーが表示されます。

Error: C:\Users\xxx\Desktop\app\e2e\component.e2e-spec.ts:1
(function (exports, require, module, __filename, __dirname) { import { ComponentPage} from './pages/component.page';
                                                          ^^^^^^
SyntaxError: Unexpected token import
at createScript (vm.js:80:10)
at Object.runInThisContext (vm.js:139:10)

.ts ファイルが .js にトランスパイルされていないため、エラーがスローされたと思います...したがって、構成またはテストの開始方法が間違っていると思います。