Nx: What is the correct way to do routing between different applications in the same workspace?

[RicardoAlvarado23]

Prerequisites

Please answer the following questions for yourself before submitting an issue.
YOU MAY DELETE THE PREREQUISITES SECTION.

• [x] I am running the latest version
• [x] I checked the documentation and found no answer
• [x] I checked to make sure that this issue has not already been filed
• [x] I'm reporting the issue to the correct repository (not related to Angular, AngularCLI or any dependency)

Expected Behavior

From a main application I want to be able to access other applications within the same workspace

Current Behavior

I run my main application and establish routing to my other 2 applications without executing them, the routing works, however the applications do not load their styles or scripts that have been configured in the angular.json

Steps to Reproduce

1. I have a workspace with 3 applications. The default application is masterapp

1. In my app.routing file of the masterapp project I have

const routes: Routes = [
    {
        path: 'adminapp',

        loadChildren: '../../../adminapp/src/app/app.module#AdminAppSharedModule'
    },
    {
        path: 'reportapp',
        loadChildren: '../../../reportapp/src/app/app.module#ReportAppSharedModule'
    },
    { path: '**', redirectTo: '' }
];

@NgModule({
    imports: [
        RouterModule.forRoot(routes),
        ReportAppSharedModule.forRoot(),
        AdminAppSharedModule.forRoot()
    ],
    exports: [
        RouterModule,
        AdminAppModule,
        ReportAppSharedModule
    ]
})

export class MasterAppRouting { }

1. The app.module of my other 2 applications contains:

adminapp

@NgModule({
  declarations: [AppComponent, NavComponent, MainComponent, DetailComponent],
  imports: [
    BrowserModule,
    AdminAppRouting
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AdminAppModule { }

@NgModule({})
export class AdminAppSharedModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: AdminAppModule,
      providers: [],
    }
  }
}

reportapp

@NgModule({
  declarations: [AppComponent, NavComponent, MainComponent, DetailComponent],
  imports: [
    BrowserModule,
    ReportAppRouting
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class ReportAppModule {}

@NgModule({})
export class ReportAppSharedModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: ReportAppModule,
      providers: []
    }
  }
}

1. I run the masterapp project with the command ng serve masterapp

2. Navigation to the other 2 projects is shown

   

The problem is that the app.component of any of the 2 projects that are accessed is never executed

So I would like to know how is the correct way to routing between projects within the same workspace

Context

package.json

{
  "name": "csws",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "nx": "nx",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "nx workspace-lint && ng lint",
    "e2e": "ng e2e",
    "affected:apps": "nx affected:apps",
    "affected:libs": "nx affected:libs",
    "affected:build": "nx affected:build",
    "affected:e2e": "nx affected:e2e",
    "affected:test": "nx affected:test",
    "affected:lint": "nx affected:lint",
    "affected:dep-graph": "nx affected:dep-graph",
    "affected": "nx affected",
    "format": "nx format:write",
    "format:write": "nx format:write",
    "format:check": "nx format:check",
    "update": "ng update @nrwl/workspace",
    "update:check": "ng update",
    "workspace-schematic": "nx workspace-schematic",
    "dep-graph": "nx dep-graph",
    "help": "nx help"
  },
  "private": true,
  "dependencies": {
    "@nrwl/angular": "^8.4.12",
    "@angular/animations": "^8.0.0",
    "@angular/common": "^8.0.0",
    "@angular/compiler": "^8.0.0",
    "@angular/core": "^8.0.0",
    "@angular/forms": "^8.0.0",
    "@angular/platform-browser": "^8.0.0",
    "@angular/platform-browser-dynamic": "^8.0.0",
    "@angular/router": "^8.0.0",
    "core-js": "^2.5.4",
    "rxjs": "~6.4.0",
    "zone.js": "^0.9.1"
  },
  "devDependencies": {
    "@angular/cli": "8.1.1",
    "@nrwl/workspace": "8.4.12",
    "@types/node": "~8.9.4",
    "dotenv": "6.2.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "eslint": "6.1.0",
    "typescript": "~3.4.5",
    "prettier": "1.16.4",
    "@angular/compiler-cli": "^8.0.0",
    "@angular/language-service": "^8.0.0",
    "@angular-devkit/build-angular": "^0.800.1",
    "codelyzer": "~5.0.1",
    "jest-preset-angular": "7.0.0",
    "@nrwl/jest": "8.4.12",
    "jest": "24.1.0",
    "@types/jest": "24.0.9",
    "ts-jest": "24.0.0",
    "cypress": "3.4.1",
    "@nrwl/cypress": "8.4.12"
  }
}

[kartik468]

I think you should not use the module from another application. If you want to use then make it as library.
Still if you want to navigate to another application, use anchor tag and navigate to another app. (you will lose your state but it will work as an independent app as expected)

[FrozenPandaz]

Hi, sorry about this.

This was mislabeled as stale. We are testing ways to mark _not reproducible_ issues as stale so that we can focus on actionable items but our initial experiment was too broad and unintentionally labeled this issue as stale.

[github-actions[bot]]

This issue has been automatically marked as stale because it hasn't had any recent activity. It will be closed in 14 days if no further activity occurs.
If we missed this issue please reply to keep it active.
Thanks for being a part of the Nx community! 🙏