Useful or not, from you.
angular-cli main.ts/polyfills.ts errors in build for multi-app project

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.

That's a useful answer
Without any help

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@ngtools\webpack\src\angular_compiler_plugin.js:752:23) at plugin.done.then (D:\AngularProjects\AngularRouting\Routing\node_modules@ngtools\webpack\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\src\polyfills.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@ngtools\webpack\src\angular_compiler_plugin.js:752:23) at plugin.done.then (D:\AngularProjects\AngularRouting\Routing\node_modules@ngtools\webpack\src\loader.js:41:31) at process._tickCallback (internal/process/next_tick.js:68:7)

thanks.