I tried for the first time to run ng e2e and get this error, The browser opened for 2 sec in localhost and then shut down.
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
: Compiled successfully.
[21:45:29] I/launcher - Running 1 instances of WebDriver
[21:45:29] I/direct - Using ChromeDriver directly...
DevTools listening on ws://127.0.0.1:60487/devtools/browser/7d314f1c-5459-47f4-89a0-2dd5a83372c0
Jasmine started
workspace-project App
× should display welcome message
- Expected [ Entry({ level: WARNING, message: 'http://localhost:4200/vendor.js 82340:16 "\n It looks like you're using ngModel on the same form field as formControlName. \n Support for using the ngModel input property and ngModelChange event with \n reactive form directives has been deprecated in Angular v6 and will be removed \n in Angular v7.\n \n For more information on this, see our API docs here:\n https://angular.io/api/forms/FormControlName#use-with-ngmodel\n "', timestamp: 1602441936443, type: '' }), Entry({ level: SEVERE, message: 'https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,400;1[_ngcontent-dei-c317],%20300&family=Marmelad&family=Oswald&family=Quicksand[_ngcontent-dei-c317]:wght@500&display=swap - Failed to load resource: the server responded with a status of 400 ()', timestamp: 1602441936596, type: '' }) ] not to contain <jasmine.objectContaining(Object({ level: SEVERE }))>.
at D:\Aidock\FlightCompany\e2e\src\app.e2e-spec.ts:22:22
at step (D:\Aidock\FlightCompany\node_modules\tslib\tslib.js:141:27)
at Object.next (D:\Aidock\FlightCompany\node_modules\tslib\tslib.js:122:57)
at fulfilled (D:\Aidock\FlightCompany\node_modules\tslib\tslib.js:112:62)
at process._tickCallback (internal/process/next_tick.js:68:7)
**************************************************
* Failures *
**************************************************
1) workspace-project App should display welcome message
- Expected [ Entry({ level: WARNING, message: 'http://localhost:4200/vendor.js 82340:16 "\n It looks like you're using ngModel on the same form field as formControlName. \n Support for using the ngModel input property and ngModelChange event with \n reactive form directives has been deprecated in Angular v6 and will be removed \n in Angular v7.\n
\n For more information on this, see our API docs here:\n https://angular.io/api/forms/FormControlName#use-with-ngmodel\n "', timestamp: 1602441936443, type: '' }), Entry({ level: SEVERE, message: 'https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,400;1[_ngcontent-dei-c317],%20300&family=Marmelad&family=Oswald&family=Quicksand[_ngcontent-dei-c317]:wght@500&display=swap - Failed to load resource: the server responded with a status of 400 ()', timestamp: 1602441936596, type: '' }) ] not to contain <jasmine.objectContaining(Object({ level: SEVERE }))>.
Executed 1 of 1 spec (1 FAILED) in 2 secs.
[21:45:37] I/launcher - 0 instance(s) of WebDriver still running
[21:45:37] I/launcher - chrome #01 failed 1 test(s)
[21:45:37] I/launcher - overall: 1 failed spec(s)
[21:45:37] E/launcher - Process exited with error code 1
This is the test, I understood that the error come from page.navigateTo(),because it ran without errors when I commented this line.
it('should display welcome message', () => {
page.navigateTo();
// browser.pause();
expect(1).toEqual(1);
// expect(page.getTitleText()).toEqual('Flight Now');
});
navigateTo(): Promise<unknown> {
return browser.get(browser.baseUrl) as Promise<unknown>;
}
I hope someone will help me solve this error.
More files
protractor.conf.js:
// @ts-check
// Protractor configuration file, see link for more information
// https://github.com/angular/protractor/blob/master/lib/config.ts
const { SpecReporter } = require('jasmine-spec-reporter');
/**
* @type { import("protractor").Config }
*/
exports.config = {
allScriptsTimeout: 11000,
specs: [
'./src/app.e2e-spec.ts'
// './src/**/*.e2e-spec.ts'
],
capabilities: {
browserName: 'chrome'
},
directConnect: true,
baseUrl: 'http://localhost:4300/',
framework: 'jasmine',
jasmineNodeOpts: {
showColors: true,
defaultTimeoutInterval: 30000,
print: function() {}
},
onPrepare() {
require('ts-node').register({
project: require('path').join(__dirname, './tsconfig.json')
});
jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
}
};
package.json:
{
"name": "flight-company",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "~9.0.1",
"@angular/cdk": "^9.2.4",
"@angular/common": "~9.0.1",
"@angular/compiler": "~9.0.1",
"@angular/core": "~9.0.1",
"@angular/forms": "~9.0.1",
"@angular/material": "^9.2.4",
"@angular/platform-browser": "~9.0.1",
"@angular/platform-browser-dynamic": "~9.0.1",
"@angular/router": "~9.0.1",
"@fortawesome/fontawesome-free": "^5.15.1",
"@mat-datetimepicker/core": "^5.1.0",
"@mat-datetimepicker/moment": "^5.1.0",
"@types/chart.js": "^2.9.25",
"angular-bootstrap-md": "^10.0.0",
"animate.css": "^4.1.1",
"bootstrap": "^4.5.2",
"chart.js": "^2.5.0",
"hammerjs": "^2.0.8",
"jquery": "^3.5.1",
"mdbootstrap": "^4.19.1",
"rxjs": "~6.5.4",
"save": "^2.4.0",
"tslib": "^1.10.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.900.2",
"@angular/cli": "~9.0.2",
"@angular/compiler-cli": "~9.0.1",
"@angular/language-service": "~9.0.1",
"@types/node": "^12.11.1",
"@types/jasmine": "~3.5.0",
"@types/jasminewd2": "~2.0.3",
"codelyzer": "^5.1.2",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~2.1.0",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.2",
"protractor": "~5.4.3",
"ts-node": "~8.3.0",
"tslint": "~5.18.0",
"typescript": "~3.7.5"
}
}
tsconfig.json:
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"module": "esnext",
"moduleResolution": "node",
"importHelpers": true,
"target": "es2015",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2018",
"dom"
]
},
"angularCompilerOptions": {
"fullTemplateTypeCheck": true,
"strictInjectionParameters": true
}
}