question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:8 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
yosigolancommented, Dec 6, 2017

Thanks @naveedahmed1 ! it solved it.

1reaction
clydincommented, Dec 6, 2017

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Angular with universal does not work - Stack Overflow
1 Answer 1 · 1. Version missmatch · 2. ts-node for typescript scripts · 3. angular-cli.json multiple apps · 4. ./dist path error....
Read more >
Angular 2 and TinyMCE
We will be using TypeScript (as almost all Angular 2 applications are written in) so while I think any JavaScript developer should be ......
Read more >
Implementing multi-language Angular applications rendered ...
This article will teach you what you need to know to successfully implement multi-language Angular applications rendered server-side.
Read more >
Party of Five: Aurelia - Matt Burgess
Angular CLI is a fork of Ember CLI with Broccoli replaced with Webpack. Aurelia's CLI tool doesn't seem to do any of the...
Read more >
Angular Flashcards - Quizlet
Answer: Angular is a TypeScript-based open-source web application framework. ... 2. How does an Angular application work? Every Angular app consists of a ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found