Angular-cli: main.ts/polyfills.ts errors in build for multi-app project

[colinparker99]

Versions

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

@angular/cli: 1.6.3
@angular-devkit/build-optimizer: 0.0.36
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.42
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.3
@schematics/angular: 0.1.11
@schematics/schematics: 0.0.11
typescript: 2.4.2
webpack: 3.10.0

Repro steps

Hello. I am using a multi-app configuration for Angular via the CLI (https://github.com/colinparker99/AspNetAngularApp). The setup is that I have a folder that contains common files (polyfills.ts, tsconfig.app.json, etc.) that are shared across all apps and are referenced in each app config in the angular-cli.json file. This was working for an existing project that was using the 1.6.0-rc.0 CLI version. Here's a snippet of that project's package.json file:

  "devDependencies": {
    "@angular/cli": "^1.6.0-rc.0",
    "@angular/compiler-cli": "^4.2.4",
    "@angular/language-service": "^4.2.4",
    "typescript": "~2.3.3"
  }

When I created a new multi-app project against the 1.6.3 version of the CLI, I now get the following error when I build it:

ERROR in ./Group1/Feature1/Client/main.ts
Module build failed: Error: D:\SourceCode\Personal\Practice\Angular\AspNetAngularApp\AspNetAngularApp\Features\Group1\Feature1\Client\main.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
    at AngularCompilerPlugin.getCompiledFile (D:\SourceCode\Personal\Practice\Angular\AspNetAngularApp\AspNetAngularApp\Features\node_modules\@ngtools\webpack\src\angular_compiler_plugin.js:653:23)
    at plugin.done.then (D:\SourceCode\Personal\Practice\Angular\AspNetAngularApp\AspNetAngularApp\Features\node_modules\@ngtools\webpack\src\loader.js:467:39)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
 @ multi ./Group1/Feature1/Client/main.ts

I've included the folder structure and configuration settings that I have to reproduce this, which matches the old project using the 1.6.0-rc.0 version of the CLI. The only way I can get the new apps building is if I copy the polyfills.ts and tsconfig.app.json files local to each app and adjust the CLI config file accordingly, but that defeats the purpose of the shared config that was working before.

Folder structure

Root folder:

• .angular-cli.json
• package.json
• tsconfig.json

Root/Shared/Client/Config folder:

• polyfills.ts
• styles.css
• tsconfig.app.json
• typings.d.ts

Root/Shared/Client/Config/environments folder:

• environment.prod.ts
• environment.ts

Root/Group1/Feature1/Client folder:

• index.html
• main.ts

Root/Group1/Feature1/Client/app folder:

• app.component.html
• app.component.ts
• app.module.ts

CLI App configuraton

  "apps": [
    {
      "name": "group1-feature1",
      "root": "Group1/Feature1",
      "appRoot": "Client/app",
      "outDir": "dist/Group1/Feature1",
      "assets": [],
      "index": "./Client/index.html",
      "main": "./Client/main.ts",
      "polyfills": "../../Shared/Client/Config/polyfills.ts",
      "test": "test.ts",
      "tsconfig": "../../Shared/Client/Config/tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "feature1",
      "styles": [],
      "scripts": [],
      "environmentSource": "../../Shared/Client/Config/environments/environment.ts",
      "environments": {
        "dev": "../../Shared/Client/Config/environments/environment.ts",
        "prod": "../../Shared/Client/Config/environments/environment.prod.ts"
      }
    },
    ...

As mentioned, I can only get it working now if I create a copy of the shared polyfills.ts and tsconfig.app.json into the feature's folder structure. For example, this works:
Root/Group1/Feature1/Client folder:

• index.html
• main.ts
• polyfills.ts
• tsconfig.app.json

CLI App configuraton

  "apps": [
    {
      "name": "group1-feature1",
      ...
      "polyfills": "./Client/polyfills.ts",
      "tsconfig": "./Client/tsconfig.app.json",
      ...
    },
    ...     

Observed behavior

ERROR in ./Group1/Feature1/Client/main.ts
Module build failed: Error: D:\SourceCode\Personal\Practice\Angular\AspNetAngularApp\AspNetAngularApp\Features\Group1\Feature1\Client\main.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
    at AngularCompilerPlugin.getCompiledFile (D:\SourceCode\Personal\Practice\Angular\AspNetAngularApp\AspNetAngularApp\Features\node_modules\@ngtools\webpack\src\angular_compiler_plugin.js:653:23)
    at plugin.done.then (D:\SourceCode\Personal\Practice\Angular\AspNetAngularApp\AspNetAngularApp\Features\node_modules\@ngtools\webpack\src\loader.js:467:39)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
 @ multi ./Group1/Feature1/Client/main.ts

Desired behavior

I'd like this to function as before and I can point each app back to the shared polyfills.ts and tsconfig.app.json files so that I don't have to maintain multiple copies of the same files in each app.

Please let me know if you need any more info. Thanks, Colin.

[clydin]

The issue is the use of the shared tsconfig.app.json file. This file is used to determine the source files that comprise each application. By using only one and putting it in the shared location, by default only the files within the shared location will become part of the app compilation. Please see here for additional documentation on tsconfig options: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html

[colinparker99]

Thanks for the quick reply. So, it sounds like I may have been leveraging something before that went against the intended usage (or location) of a tsconfig.app.json file and at some point a change was made to align it better with the TypeScript language guide and prevent what I was doing?

If that's the case, I was thinking of still maintaining a shared file that contains a lot of the common settings for an app, but then have the app's local tsconfig.app.json consist of this:

{
  "extends": "../../../Shared/Client/Config/tsconfig.app.json"
}

That way I can still keep the things in one place that don't change across apps, but then meet what the guidelines are for this file. Does that seem reasonable?

The second question is regarding the polyfills.ts file. As I mentioned, that exhibits the same behavior where I get a "is missing from the TypeScript compilation" error, whereas I was not seeing that before. This seems like it should support a shared scenario like it used to in my previous project. Having separate polyfills.ts definitions across a multi-app scenario doesn't seem like it should be necessary if all of the apps are based on the same version of Angular and supporting modules, so a shared file seems valid to me. What do you think? I'd try and track down what changed in Angular between my old project and the new one that broke this, but I'm not sure where to start. I'd be glad to help look into it if you have some pointers. Thanks.

[clydin]

Your assessment is correct. The CLI now properly follows Typescript's file inclusion behavior. The extension mechanism is currently used by the CLI itself so yes doing so can be very useful if multiple apps share common compilerOptions.
As to the polyfills.ts issue, each app's tsconfig will need to reference the common polyfills.ts file. Using a combination of the tsconfig files and include options should achieve what you are trying to do.

[colinparker99]

Thanks. I'll look into what you suggested for the polyfills.ts change.

[adhivenkatesh]

Hi Guys, any one for this error , i have change directory name and deleted many times ng_modules folder , then used npm install command , nothing happened for the below error , please help me to solve this.

ERROR in ./src/main.ts
Module build failed (from ./node_modules/@ngtools/webpack/src/index.js):
Error: D:\AngularProjects\AngularRouting\Routing\src\main.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
at AngularCompilerPlugin.getCompiledFile (D:\AngularProjects\AngularRouting\Routing\node_modules\@ngtoolswebpack\src\angular_compiler_plugin.js:752:23)
at plugin.done.then (D:\AngularProjects\AngularRouting\Routing\node_modules\@ngtoolswebpack\src\loader.js:41:31)
at process._tickCallback (internal/process/next_tick.js:68:7)
ERROR in ./src/polyfills.ts
Module build failed (from ./node_modules/@ngtools/webpack/src/index.js):
Error: D:\AngularProjects\AngularRouting\Routing\srcpolyfills.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
at AngularCompilerPlugin.getCompiledFile (D:\AngularProjects\AngularRouting\Routing\node_modules\@ngtoolswebpack\src\angular_compiler_plugin.js:752:23)
at plugin.done.then (D:\AngularProjects\AngularRouting\Routing\node_modules\@ngtoolswebpack\src\loader.js:41:31)
at process._tickCallback (internal/process/next_tick.js:68:7)

thanks.

[filipesilva]

Thanks for reporting this issue. This issue was originally reported a long time ago and since then we've had many releases, one of which might have addressed this problem. Please update to the most recent Angular CLI version.

If the problem persists after upgrading, please open a new issue, provide a simple repository reproducing the problem, and describe the difference between the expected and current behavior.

[angular-automatic-lock-bot[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._}