Angular CLI doesn't seem to honor typescript config for Angular Universal App

[naveedahmed1]

Versions

Angular CLI: 1.5.4
Node: 8.9.1
OS: win32 x64
Angular: 5.0.3
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, platform-server, router

@angular/cdk: 5.0.0-rc.2
@angular/cli: 1.5.4
@angular/flex-layout: 2.0.0-beta.11-b01c2d7
@angular/material: 5.0.0-rc.2
@angular-devkit/build-optimizer: 0.0.33
@angular-devkit/core: 0.0.21
@angular-devkit/schematics: 0.0.37
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.4
@schematics/angular: 0.1.7
typescript: 2.4.2
webpack: 3.8.1

Repro steps

Let me give you some background.

I have an Angular CLI based project with Universal enabled.

In my project I have main.ts which import AppBrowserModule from app.browser.module.ts

and

In my project I have main.server.ts which import AppServerModule from app.server.module.ts

I also have a shared module and both AppBrowserModule and AppServerModule import this module.

I want to enable Server Side Rendering for a portion of my app. so I have added two different routing modules one for server and other for browser.

AppServerModule imports AppServerRoutingModule and AppBrowserModule imports AppBrowserRoutingModule.

I have below server app added to my .angular-cli.json file.

    {
      "name": "ssr",
      "root": "src",
      "outDir": "dist-server",
      "assets": [
        "assets"
      ],
      "main": "main.server.ts",
      "tsconfig": "tsconfig.app-ssr.json",
      "prefix": "app",
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      },
      "platform": "server"
    }

Below are the contents of my tsconfig.app-ssr.json.

{
    "extends": "../tsconfig.json",
    "compilerOptions": {
      "baseUrl": "./",
      "module": "commonjs"
    },
    "angularCompilerOptions": {
      "entryModule": "app/app.server.module#AppServerModule"
    }
}

As per my understanding, if I generate server bundles through command ng build --prod --app 1 --output-hashing=false, it should start from AppServerModule and recursively process files referenced in this module. As a result the server bundle should not have the modules that are referenced in AppBrowserRoutingModule but not in AppServerRoutingModule .

But it does't seem to work this way, cli is adding all modules in server bundle, even those that doesn't have any reference in main.server, app.server.modules or AppServerRoutingModule.

[clydin]

The tsconfig shown above does not contain a files or include section which means it will by default include all files in the containing directory and subdirectories. Those settings (and potentially exclude) should be used to control the files compiled with that tsconfig. For additional information please see: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html

[naveedahmed1]

Thank you so much @clydin it seems to solve the problem for now, I will let you know if I see any unexpected behavior :)

[yosigolan]

Thanks @naveedahmed1 ! i will check it.

[clydin]

Great. Closing this then but feel free to re-open if needed.

[yosigolan]

Hey @naveedahmed1
i tried it on my project which is pretty much identical to yours but the build fails.
i added this line in the exclude section in the server tsConfig file:
"app/browser-only/."
but than the server build fails saying it cant find the module: Error: Can't resolve 'app/browser-only/browser-only.module.ngfactory.js'

i cant understand how the server build aware to this module. if i remove it from the browser routing module it works.... (but i need it there off-course).
can you please have a look on my project? https://github.com/yosigolan/ng5-universal-refernce-bug
Thanks

[naveedahmed1]

@yosigolan for my case I added below to the ts config for ssr (tsconfig.server.json) and its working:

"exclude": [
    "./**/*.browser.ts",
    "app/my-browser-only-modules/**/*.ts",
    "app/app-routing.module.ts"
  ]

In my case I have main.browser.ts , main.server.ts, app.module.browser.ts, app.modules.server.ts. I am sure its the settings in exclude, I also received this error but finally with above config it started working.

PS: If you rename files, make sure to update main in apps section .angular-cli and entryModule in tsconfig.server.json.

[yosigolan]

Thanks @naveedahmed1 ! it solved it.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}