Styjun

Hi In my code i am navigating to different html page when i get a reply from my Server.All the things are working fine before i updating my angular version 5 to 7. After version upgradation same code is throwing the below error.

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'uploads/dockerExcecutionDependency/vnc.html'
Error: Cannot match any routes. URL Segment: 'uploads/dockerExcecutionDependency/vnc.html'
at ApplyRedirects.push../node_modules/@angular/router/esm5/router.js.ApplyRedirects.noMatchError (router.js:1765)
at CatchSubscriber.selector (router.js:1730)
at CatchSubscriber.push../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchSubscriber.error (catchError.js:34)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:79)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:59)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:79)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:59)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:79)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:59)
at TapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/tap.js.TapSubscriber._error (tap.js:61)
at resolvePromise (zone.js:814)
at resolvePromise (zone.js:771)
at zone.js:873
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:14051)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
at drainMicroTaskQueue (zone.js:595)

Please find my component code which i am sending the url to my html after getting reply from the server

 ngOnInit() 
 this.dockerIpPort();
 
 ///////////////////////
 dockerIpPort()
 
 var objDocker=;
 objDocker["ipAddress"]="192.168.99.100";
 objDocker["vncPort"]="32768";
 objDocker["vncPassword"]="secret";
 this.servicekey.dockerIpPortServiceCall(objDocker).subscribe(
 result => 
 let url = "/uploads/dockerExcecutionDependency/vnc.html"
 this.dockerPath09 = 
 this.sanitizer.bypassSecurityTrustResourceUrl(url);
 document.getElementById("activateDockerButton").click();
 );
 //dockerIpPort

html code where i am using the url to navigation.

 <div>
 <div class = "modal fade" id = "myModal04">
 <div class = "modal-dialog modal-lg">
 <div class = "modal-content docker">
 <div class="modal-footer dockerFooter">
 <p>Close</p>
 <button type="button" class="btn btn-default dockerClose" data-dismiss="modal"><span class="glyphicon glyphicon-remove-circle"></span></button>
 </div>
 <div class = "modal-body dockerbody">
 <iframe [src]="dockerPath09" height="100%" width="100%">
 <p>Your browser does not support iframes.</p>
 </iframe>
 </div>
 <div class="modal-footer">
 </div>
 </div>
 </div>
 </div>
 </div>
 <!-- myModal04 -->

Please Suggest me a better approach to fix this Error. Thanks in Advance

please Find app.module.ts file

 import BrowserModule from '@angular/platform-browser';
 import NgModule from '@angular/core';
 import Router from '@angular/router';
 import RouterModule, Routes from '@angular/router';
 import HttpModule from '@angular/http';
 import FormsModule from '@angular/forms';
 import FileDropModule from 'ngx-file-drop';
 import HttpClientModule from '@angular/common/http';
 import AppComponent from './app.component';
 import HeaderComponent from './header.component';
 import LoginComponent from './login.component';
 import ProjectDetailComponent from './pDetail.component';
 import LoginServiceComponent from './login.service';
 import ProjectSelectionServiceComponent from 
 './projectSelection.service';
 import SelectionComponent from './projectSelection.component';
 import ModuleComponent from './module.component';
 import FeatureComponent from './featurePage.component';
 import TestExecutionComponent from './testExecution.component';
 import BrowserAnimationsModule from '@angular/platform- 
 browser/animations';
 import apiServiceComponent from './apiService';
 import ReactiveFormsModule from '@angular/forms';
 import ObjectComponent from './object.component';
 import PageNameComponent from './pageName.component';
 import ObjectNameComponent from './objectName.component';
 import ObjectServiceComponent from './object.service';
 import CaptureLabComponent from './captureLab.component';
 import ImportProjectComponent from './importProject.component';
 import ModuleServiceComponent from './modulePage.service';
 import FeatureServiceComponent from './featurePage.service';
 import ImportComponent from './importPage.component';
 import ImportServiceComponent from './importPage.service';
 import ProjectDetailServiceComponent from './pDetail.service'
 import AmazingTimePickerModule from 'amazing-time-picker';
 import ScriptImportComponent from './script-import/script- 
 import.component';
 import EditComponent from './edit/edit.component';
 import CreateTestCaseComponent from './create-test-case/create- 
 test- 
 case.component';
 import ReportComponent from './report/report.component';
 import ObjectCreationComponent from './object-creation/object- 
 creation.component';
 import CreateReusableFunctionComponent from './create-reusable- 
 function/create-reusable-function.component'; // this line you need
 import CreatesuiteComponent from './createsuite.component';
 import ExecutionComponent from './execution.component';
 import AIComponent from './ai/ai.component';
 import TestCaseCommonService from './test-case-common.service'
 import NewCreateTestCaseComponent from './new-create-test- 
 case/new-create-test-case.component';
 import Ng2GoogleChartsModule from 'ng2-google-charts';
 import SuitelevelComponent from 
 './suitelevel/suitelevel.component';
 import FeatureLevelComponent from './feature-level/feature- 
 level.component';
 import ScriptLevelComponent from './script-level/script- 
 level.component';
 import StepLevelComponent from './step-level/step-level.component'; 
 import ChartModule from 'angular2-chartjs';
 import ExecutionService from './service/execution.service';
 import GraphReportService from './service/graph-report.service'; 
 import ShContextMenuModule from 'ng2-right-click-menu';

 const appRoutes: Routes = [
 path: 'ImportPage', component: ImportComponent ,
 path: 'createProject', component: ImportProjectComponent ,
 path: '', component: ProjectDetailComponent,
 children: [
 path: 'CreateModule', component: ModuleComponent ,
 path: 'CreateFeature', component: FeatureComponent ,
 path: 'importComponent', component: ImportComponent ,
 path: 'editComponent', component: EditComponent ,
 path: 'createTestCaseComponent', component: CreateTestCaseComponent 
 ,
 path: 'captureLabComponent', component: CaptureLabComponent ,
 path: 'testExcecutionComponent', component: TestExecutionComponent 
 ,
 path: 'reportComponent', component: ReportComponent ,
 path: 'objectCreationComponent', component: ObjectCreationComponent 
 ,
 path: 'objectRepository', component: ObjectComponent ,
 path: 'createReusableFunction', component: 
 CreateReusableFunctionComponent ,
 path: 'createsuitecomponent' ,component: CreatesuiteComponent,
 path: 'executionComponent', component: ExecutionComponent ,
 path: 'Artificialpath', component: AIComponent ,
 path:'suitelevel',component:SuitelevelComponent,
 path:'featurelevel',component:FeatureLevelComponent,
 path:'scriptlevel',component:ScriptLevelComponent,
 path:'steplevel',component:StepLevelComponent,
 path: 'NewCreateTestCaseComponent', component: 
 NewCreateTestCaseComponent,
 children: [
 
 path:'check',component:StepLevelComponent
 
 ]
 
 ]
 ,
 path: 'projectSelection', component: SelectionComponent ,
 path: 'logincomponent', component: LoginComponent ,
 path: 'createsuitecomponent', component: CreatesuiteComponent ,
 path: 'executionComponent', component: ExecutionComponent ,
 ];