Allow ng serve to use a separate tsconfig.json

[kiranjholla]

Bug Report or Feature Request (mark with an x)

- [ ] bug report -> please search issues before submitting
- [x] feature request

Command (mark with an x)

- [ ] new
- [ ] build
- [x] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Versions

node --version:
v10.4.1

npm --version:
6.1.0

ng --version:
Angular CLI: 6.1.4
Node: 10.4.1
OS: win32 x64
Angular: 6.1.4
... animations, cli, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.7.4
@angular-devkit/build-angular      0.7.4
@angular-devkit/build-ng-packagr   0.7.5
@angular-devkit/build-optimizer    0.7.4
@angular-devkit/build-webpack      0.7.4
@angular-devkit/core               0.7.4
@angular-devkit/schematics         0.7.4
@angular/cdk                       6.4.6
@angular/flex-layout               6.0.0-beta.17
@angular/material                  6.4.6
@ngtools/json-schema               1.1.0
@ngtools/webpack                   6.1.4
@schematics/angular                0.7.4
@schematics/update                 0.7.4
ng-packagr                         3.0.6
rxjs                               6.2.2
typescript                         2.7.2
webpack                            4.9.2

Repro steps

• Create new Angular CLI Workspace ng new my-app --style scss --prefix map
• Add a library to this workspace ng g library my-lib --style scss --prefix mlb
• Update my-app code to import this library import { MyLib } from 'my-lib'
• Build library ng build my-lib
• Serve app ng serve
• Feel happy with your achievement as everything works
• Now, clean-up the ./dist folder and run ng serve again
• Get error!

The log given by the failure

ERROR in projects/my-app/src/app/shell/my-app.module.ts(18,30): error TS2307: Cannot find module 'my-lib'.

Desired functionality

Allow adding a different tsconfig.json file for the ng serve command in angular.json. Currently the architect build options for @angular-devkit/build-angular:dev-server does not accept a tsConfig parameter as part of its options.

Having the ability to define a separate tsconfig file with compilerOptions setup with different paths array for the my-lib during the ng-serve process would help in faster development as the compiler could fetch the relevant source directly from the projects/my-lib directory instead of looking at the ./dist directory

[alan-agius4]

In theory no one is stopping you from adding an addition path in your tsconfig

Example;

"my-lib": [
  "../dist/mylib",
  "./project/mylib/src/public_api.ts"
]

However, building a library this way doesn't guarantee that it will eventually work when consuming it when it's actually properly built, since library and application are built differently.

//cc @filipesilva, what do you think?

[kiranjholla]

@alan-agius4 Agreed that adding an additional path into the tsconfig.json is an option. However, wouldn't that cause the library to be picked up from the projects folder during the final ng build too?

I do want the team to be able to continue development without having to explicitly build the library each time. However, when the application goes for deployment, I want to enforce a proper ng build my-lib && ng build my-app.

When an ng build is being executed, ideally the process could insist on having the library already built and available within the ./dist directory, whereas an ng serve could allow recompilation of the entire workspace whenever changes occur either in the app or the lib, to allow faster development.

[kiranjholla]

Just an update:

Updating the tsconfig.json with the additional paths as suggested by @alan-agius4 does get ng serve working. But it breaks ng build! I honestly did not see that coming.

After adding the projects directory into the tsconfig.json, running ng serve works as expected, but running ng build gives the following error:

ERROR in ./src/app/modules/my-module/my-module.module.ts
Module not found: Error: Can't resolve 'my-lib' in 'path\to\app\projects\my-app\src\app\modules\my-module'

Update 2018-08-30

Please take a look at my sample repo at https://github.com/kiranjholla/ng-issues-repro/tree/concept/ng-build-error-with-multiple-paths-in-tsconfig, which is helpful in illustrating the problem I am referring to.

ng serve works just fine.

> npm start

> ngconcepts@0.0.0 start path\to\ngproject
> rimraf dist && ng serve

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

Date: 2018-08-30T20:38:29.097Z
Hash: xxxxxxxxxxxxxxxxxx
Time: 11127ms
chunk {main} main.js, main.js.map (main) 28.1 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 237 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 5.22 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 16.6 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.83 MB [initial] [rendered]
i ｢wdm｣: Compiled successfully.

But running ng build fails.

> npm run repro

> ngconcepts@0.0.0 repro path\to\ngproject
> rimraf dist && ng build my-lib --prod && ng build my-app --prod

Building Angular Package
Building entry point 'my-lib'
Rendering Stylesheets
Rendering Templates
Compiling TypeScript sources through ngc
Bundling to FESM2015
Bundling to FESM5
Bundling to UMD
Minifying UMD bundle
Copying declaration files
Writing package metadata
Removing scripts section in package.json as it's considered a potential security vulnerability.
Built my-lib
Built Angular Package!
- from: path\to\ngproject\projects\my-lib
- to:   path\to\ngproject\dist\my-lib

Date: 2018-08-30T20:41:28.802Z
Hash: xxxxxxxxxxxxxxxxxxxxxxxx
Time: 16487ms
chunk {0} runtime.xxxxxxxxxxxxxxx.js (runtime) 1.05 kB [entry] [rendered]
chunk {1} styles.xxxxxxxxxxxxxxx.css (styles) 0 bytes [initial] [rendered]
chunk {2} polyfills.xxxxxxxxxxxxxxx.js (polyfills) 59.6 kB [initial] [rendered]
chunk {3} main.xxxxxxxxxxxxxxx.js (main) 174 kB [initial] [rendered]

ERROR in path/to/ngproject/dist/my-lib/my-lib.ngfactory.js
Module not found: Error: Can't resolve 'my-lib' in 'path\to\ngproject\dist\my-lib'
ERROR in ./src/app/app.module.ngfactory.js
Module not found: Error: Can't resolve 'my-lib' in 'path\to\ngproject\projects\my-app\src\app'
ERROR in ./src/app/app.component.ngfactory.js
Module not found: Error: Can't resolve 'my-lib' in 'path\to\ngproject\projects\my-app\src\app'

[filipesilva]

I really cannot recommend using a lib without building it first for the reasons described in https://github.com/angular/angular-cli/wiki/stories-create-library.

If you really want to do it just for ng serve, you can specify a different tsconfig already.

First make a new configuration for build:

      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {...},
          "configurations": {
            "custom": {
              "tsConfig": "src/tsconfig.custom.json",

Then reference that target in a serve configuration:

        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {...},
          "configurations": {
            "custom": {
              "browserTarget": "latest-project:build:custom"
            }
          }

Run ng serve --configuration:custom and you will use that new tsconfig when building.

[kiranjholla]

@filipesilva, thanks for that tip. That helped!

While I understand that using libraries without first building them is not the ideal approach, I am dealing with a scenario where our teams will be building a large Angular application. The intent is to extract many of the reusable components into the library for potential reuse across the organization later on.

These components haven't been developed yet, but as we build the application we will continue to look at candidate components that can be made part of the reusable library. That is the reason I wanted to enable the team to continue building the application while referring to the library source files directly, and possibly add to the library too as they build.

Reading through the link you have pointed to, the only scenario I can see where this may be an issue is that the ng serve command is only "watch"ing the my-app application for changes and not the library. Hence, if any of the library files get modified the CLI will not automatically refresh the build and will require the developer to perform a manual restart of the dev-server.

Am I missing something more serious in my understanding?

[alan-agius4]

@kiranjholla you don’t need to restart the dev-server for every change in a library. You can run 2 separate process one watching the library and another the application. And any change in the library will trigger an incremental build of the library and another partial build of the app.

[filipesilva]

@kiranjholla the really big problem is that you're not actually building the library properly. When you eventually try to build and consume the library, any number of problems can come up that you didn't see while developing.

[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.}