Question

我有一个角度CLI应用程序，我正在设置，我需要从使用Chrome测试运行器切换到PhantomJS测试运行器。我以为我已经完成了所有必要的更新，但现在我遇到了一个奇怪的模板错误。

Uncaught Error: Template parse errors: Unexpected closing tag "a". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags ("     Don't have an account?<br/>
          <a [routerLink]='['/register']'>Click here to create one[ERROR ->]</a>
        </p>
      </div> "): ng:///AuthModule/LoginComponent.html@28:66
    at syntaxError (http://localhost:4200/vendor.bundle.js:70405:34) [<root>]
    at DirectiveNormalizer.normalizeLoadedTemplate (http://localhost:4200/vendor.bundle.js:81741:19) [<root>]
    at DirectiveNormalizer.normalizeTemplateSync (http://localhost:4200/vendor.bundle.js:81717:21) [<root>]
    at DirectiveNormalizer.normalizeTemplate (http://localhost:4200/vendor.bundle.js:81691:43) [<root>]
    at CompileMetadataResolver._loadDirectiveMetadata (http://localhost:4200/vendor.bundle.js:82626:75) [<root>]
    at http://localhost:4200/vendor.bundle.js:82819:54 [<root>]
    at Array.forEach (native) [<root>]
    at CompileMetadataResolver.loadNgModuleDirectiveAndPipeMetadata (http://localhost:4200/vendor.bundle.js:82818:41) [<root>]
    at http://localhost:4200/vendor.bundle.js:94042:58 [<root>]
    at Array.forEach (native) [<root>]
    at JitCompiler._loadModules (http://localhost:4200/vendor.bundle.js:94041:43) [<root>]
    at JitCompiler._compileModuleAndComponents (http://localhost:4200/vendor.bundle.js:93995:52) [<root>]
    at JitCompiler.compileModuleAsync (http://localhost:4200/vendor.bundle.js:93957:21) [<root>]
    at PlatformRef_._bootstrapModuleWithZone (http://localhost:4200/vendor.bundle.js:4997:25) [<root>] ZoneAwareError @ zone.js:917 syntaxError @ compiler.es5.js:1503 DirectiveNormalizer.normalizeLoadedTemplate @ compiler.es5.js:12839 DirectiveNormalizer.normalizeTemplateSync @ compiler.es5.js:12815 DirectiveNormalizer.normalizeTemplate @ compiler.es5.js:12789 CompileMetadataResolver._loadDirectiveMetadata @ compiler.es5.js:13724 (anonymous) @ compiler.es5.js:13917 CompileMetadataResolver.loadNgModuleDirectiveAndPipeMetadata @ compiler.es5.js:13916 (anonymous) @ compiler.es5.js:25140 JitCompiler._loadModules @ compiler.es5.js:25139 JitCompiler._compileModuleAndComponents @ compiler.es5.js:25093 JitCompiler.compileModuleAsync @ compiler.es5.js:25055 PlatformRef_._bootstrapModuleWithZone @ core.es5.js:4786 PlatformRef_.bootstrapModule @ core.es5.js:4772 214 @ main.ts:11
__webpack_require__ @ bootstrap 7411843…:52 505 @ main.bundle.js:609
__webpack_require__ @ bootstrap 7411843…:52 webpackJsonpCallback @ bootstrap 7411843…:23 (anonymous) @ main.bundle.js:1

我运行了必要的安装程序

npm install --save-dev phantomjs-prebuilt
npm install --save-dev karma-phantomjs-launcher
npm install --save-dev karma-spec-reporter
npm install --save intl

Karma.config.js

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular/cli'],
    plugins: [
      require('karma-jasmine'),
      require('karma-phantomjs-launcher'),
      require('karma-spec-reporter'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular/cli/plugins/karma')
    ],
    client:{
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    files: [
      { pattern: './src/test.ts', watched: false }
    ],
    preprocessors: {
      './src/test.ts': ['@angular/cli']
    },
    mime: {
      'text/x-typescript': ['ts','tsx']
    },
    coverageIstanbulReporter: {
      reports: [ 'html', 'lcovonly' ],
      fixWebpackSourcePaths: true
    },
    angularCli: {
      environment: 'dev'
    },
    reporters: config.angularCli && config.angularCli.codeCoverage
              ? ['spec', 'coverage-istanbul']
              : ['spec', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['PhantomJS'],
    singleRun: false
  });
};

并且在polyfills.ts中我没有提交以下行

import 'core-js/es6/object';
import 'core-js/es6/array';
import 'intl';  // Run `npm install --save intl`.

Answer 1

更改单引号：

<a [routerLink]='['/register']'>Click here to create one</a>

加双引号：

<a [routerLink]="['/register']">Click here to create one</a>

（我正在回答这个与我的评论一致的问题，只是为了让所有发现此问题的人都能看到。）

使用PhantomJS的角度CLI问题

1 个答案: