SashTheTash
SashTheTash

Reputation: 35

Serving Angular Universal Application results in NetworkError

I get a network error when running my Angular Universal application. After some research I found out that this is related to the relative paths in my application. Unfortunately, it is not clear to me how to fix the error. As far as I understand, the paths in the tsconfigFiles need to be adjusted. Can someone please help me with this? Thanks a lot

Terminal output

 ERROR NetworkError
        at XMLHttpRequest.send(<path>/dist/frontend/server/main.js)

    {

tsconfig.json

  "compileOnSave": false,
  "compilerOptions": {
    "skipLibCheck": true,
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "es2020",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": ["node_modules/@types"],
    "lib": ["es2018", "dom"]
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

tsconfig.app.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "resolveJsonModule": true,
    "outDir": "./out-tsc/app",
    "types": ["node"]
  },
  "files": ["src/main.ts", "src/polyfills.ts"],
  "include": ["src/**/*.d.ts"],
  "exclude": ["src/test.ts", "src/**/*.spec.ts"]
}

tsconfig.server.json

{
  "extends": "./tsconfig.app.json",
  "compilerOptions": {
    "outDir": "./out-tsc/server",
    "target": "es2016",
    "types": ["node"]
  },
  "files": ["src/main.server.ts", "server.ts"],
  "angularCompilerOptions": {
    "entryModule": "./src/app/app.server.module#AppServerModule"
  }
}

Upvotes: 1

Views: 748

Answers (1)

David
David

Reputation: 34445

The error is not related to relative TS paths, but relative URLs. So it is not tsconfig that you have to change, but your HttpClient calls so that you make xhr calls to absolute URLS

httpClient.get('/api/products'); //<= error in universal
httpClient.get('http://mydomaine.com/api/products'); //<= OK in universal

Upvotes: 1

Related Questions