Currently I have angular app with routing. The routes work fine when accessed from the app, but when I try to copy and paste certain link in a new tab, I get that the module could not be loaded. example http://localhost:4200/updates works fine both opened in the application and in new tab, yet http://localhost:4200/updates/repositories/Test/units (Test is parameter which is passed from the calling component)this url works only in the app, when pasted in a new tab the error that I am seeing is:

Uncaught SyntaxError: expected expression, got '<' scripts.91672879d55182c59502.js:1

Loading module from “http://localhost:4200/updates/repositories/sumDev/main-es2017.233f600c1169f07fe825.js” was blocked because of a disallowed MIME type (“text/html”).

units Loading failed for the module with source “http://localhost:4200/updates/repositories/sumDev/main-es2017.233f600c1169f07fe825.js”.

this is my dependency setup:

    "dependencies": {
    "@angular-devkit/build-angular": "^0.1102.14",
    "@angular/animations": "~11.2.14",
    "@angular/cdk": "^11.2.13",
    "@angular/common": "~11.2.14",
    "@angular/compiler": "~11.2.14",
    "@angular/core": "~11.2.14",
    "@angular/forms": "~11.2.14",
    "@angular/localize": "^11.2.14",
    "@angular/material": "^11.2.13",
    "@angular/platform-browser": "~11.2.14",
    "@angular/platform-browser-dynamic": "~11.2.14",
    "@angular/router": "~11.2.14",
    "@auth0/angular-jwt": "^5.0.2",
    "@delite/dlt-icons": "^1.1.5",
    "classlist.js": "^1.1.20150312",
    "hammerjs": "^2.0.8",
    "keycloak-angular": "^8.2.0",
    "keycloak-js": "^13.0.0",
    "net": "^1.0.2",
    "ng-http-loader": "^5.1.0",
    "rxjs": "~6.6.7",
    "sockjs-client": "^1.6.1",
    "stompjs": "^2.3.3",
    "tslib": "^2.0.0",
    "zone.js": "~0.11.3"
  },



 "devDependencies": {
    "@angular/cli": "~11.2.14",
    "@angular/compiler-cli": "~11.2.14",
    "@angular/language-service": "~11.2.14",
    "@types/core-js": "^2.5.4",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "^6.3.4",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~7.0.0",
    "tslint": "~6.1.0",
    "typescript": "^4.0.8"
  }

this is the routing module:

const routes: Routes = [{
        path: '',
        canActivate: [AuthGuard],
        children: [
            {
                path: '',
                redirectTo: "installer",
                pathMatch: "full"

            },{
                path: 'updates',
                component: UpdateRepositoryComponent,
                children: [
                    {
                        path: 'repositories/:name/units',
                        component: UnitsComponent,
                    }
                ]
            }]
    }]

@NgModule({
    imports: [RouterModule.forRoot(routes, {relativeLinkResolution: 'legacy'})],
    exports: [RouterModule]
})
export class AppRoutingModule {}

And this is how I navigate this.router.navigate([this.router.url /repositories/${name}/units]);

CodePudding user response：

Yes, you can use

window.open(url, '_blank');

or check this answer

CodePudding user response：

What you described is the nature of Client Site Rendering - CSR, it only works when you navigate by code.

In short, entering url directly will trigger a Server request, well, you don't have a server to handle that request so error happens. More about this could be found on gooogle with CSR keyword.

CodePudding user response：

Managed to solve this by using HashLocationStrategy. This adds # infront of the url and helped with the routing. You can find full explanation and example here