3

我在使用 Angular 5.2.0（没有 Cli）设置业力时遇到问题

Angular 应用程序正在运行，但问题出在业力上，当我尝试运行测试时出现此错误：

karma start Hash：ccc4545dd1d9416a823b 版本：webpack 3.10.0 时间：58ms webpack：编译成功。13 01 2018 15:34:59.123:WARN [karma]：没有捕获的浏览器，打开http://localhost:9876/ 13 01 2018 15:34:59.134:INFO [karma]：Karma v2.0.0 服务器从http: //0.0.0.0:9876/ 2018 年 1 月 1 日 15:34:59.136:INFO [启动器]：以无限并发启动浏览器 Chrome 13 2018 年 1 月 15:34:59.147:INFO [启动器]：启动浏览器 Chrome 13 01 2018 15:35:00.726:INFO [Chrome 63.0 .3239（Windows 10 0.0.0）]：连接到套接字 37NRWsbdgw5x2CTBAAAA，ID 为 42149942 Chrome 63.0.3239（Windows 10 0.0.0）错误 {“消息”：“未捕获语法错误：意外令牌 {\nat src/app/app. component.spec.ts:2:8\n\nSyntaxError: Unexpected token {", "str": "Uncaught SyntaxError: Unexpected token {\nat src/app/app.component.spec.ts:2:8\n\ nSyntaxError: 意外的令牌 {" }

首先我得到了视频/mp2t 的错误，所以我添加了 MIME 修复。现在我得到了上述错误。似乎 karma 没有解决 TS 或其他问题，因为我只用一次导入测试了 .spec.ts 文件，但仍然得到相同的错误。

app.component.spec.ts

import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  }));

  it('should create the app', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  }));


  it('should display the header text "Welcome to Momentz4Ever"', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.debugElement.nativeElement;
    expect(compiled.querySelector('h1').textContent).toContain('Welcome to Momentz4Ever');
  }));
});

tsconfig.ts

{
    "compileOnSave": false,
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "noImplicitAny": false,
        "sourceMap": true,
        "baseUrl": "src",
        "outDir": "./dist",
        "declaration": false,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "moduleResolution": "node",
        "typeRoots": [
            "node_modules/@types"
        ],
        "lib": [
            "es2016",
            "dom"
        ],
        "types": [
            "node",
            "jasmine"
        ]
    },
    "awesomeTypeScriptLoaderOptions": {
        "useWebpackText": true
    }
}

webpack.config.ts

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { ContextReplacementPlugin } = require('webpack');

module.exports = {
    entry: {
        main: './src/index.ts'
    },
    output: {
        path: path.join(__dirname, "../dist/"),
        filename: "[name].bundle.js",
    },
    resolve: {
        extensions: ['.js', '.ts', '.html']
    },
    devServer: {
        contentBase: path.join(__dirname, "../dist/"),
        port: 9000
    },
    devtool: 'inline-source-map',
    module: {
        loaders: [
            { test: /.ts$/, use: ['awesome-typescript-loader', 'angular2-template-loader'] },
            { test: /.html$/, use: 'raw-loader' }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html",
            filename: "index.html",
            showErrors: true,
            title: "Webpack App",
            path: path.join(__dirname, "../dist/"),
            hash: true
        }),
        new ContextReplacementPlugin(            
            /\@angular(\\|\/)core(\\|\/)esm5/,
            path.resolve(__dirname, 'src')
        )

    ]
}

业力配置文件

module.exports = function(config) {
  config.set({    
    basePath: '',    
    frameworks: ['jasmine'],
    files: [      
      { pattern: './src/app/app.component.spec.ts' }
    ],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-webpack'),
      require('karma-sourcemap-loader'),
    ],        
    preprocessors: {
      './src/test.ts': ['webpack', 'sourcemap']
    },
    mime: {
      'text/x-typescript': ['ts','tsx']
    },    
    reporters: ['progress'],    
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false,
    concurrency: Infinity
  })
}

包.json

{
  "name": "",
  "version": "0.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "karma start",
    "build": "webpack-dev-server --config webpack.config.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "core-js": "^2.5.3",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.20"
  },
  "devDependencies": {
    "@types/jasmine": "^2.8.4",
    "@types/node": "^9.3.0",
    "angular2-template-loader": "^0.6.2",
    "awesome-typescript-loader": "^3.4.1",
    "css-loader": "^0.28.8",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.6",
    "html-webpack-plugin": "^2.30.1",
    "jasmine": "^2.8.0",
    "jasmine-core": "^2.8.0",
    "karma": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.1.1",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-typescript": "^3.0.9",
    "karma-webpack": "^2.0.9",
    "node-sass": "^4.7.2",
    "raw-loader": "^0.5.1",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.19.1",
    "ts-loader": "^3.2.0",
    "tslint": "^5.9.1",
    "typescript": "^2.6.2",
    "url-loader": "^0.6.2",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.10.1"
  }
}
4

0 回答 0