Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Exclude modules from ng-build in Angular CLI... not working

I have an Angular CLI project with two apps in it. Both apps are the same, but one app includes all files in the build, the other needs to exclude a module.

Angular CLI version: 1.7.4 Angular version: 5.2.10

I added two apps into the angular-cli.json file, and each has a separate ts-config file.

  "apps": [
    {
      "name": "app",   <---- first app
      "root": "src",
      "outDir": "/wwwroot",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",       <----first TS config
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.scss"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    },
    {
      "name": "admin",   <---- second app
      "root": "src",
      "outDir": "/wwwroot",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.admin.json", <----- second ts config
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.scss"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],

The "admin" app will include all files. However, the first app in the app array, "app" will exclude the admin module.

The tsconfig.app.json:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",
    "module": "es2015",
    "types": []
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts",
    "app/modules/admin/"    <----- note: I want this entire directory excluded from the build. 
  ]
}

I set up two "ng-build" scripts in the package.json file.

package.json build scripts:

"scripts": {
    "build-app": "ng build -app app --prod",
    "build-admin": "ng build -app admin  --prod",
  },

To test this, I changed some text and styling in the admin module and ran the build locally. I noticed that the admin version of the app (which should build all files) works, but the "app" version of the app did NOT exclude the admin module.

Does anyone see anything missed/overlooked in the above snippets? Has anyone had similar problems and found a solution?

The angular-cli repo closed this issue but did not provide a fix. see issue here

like image 621
Michael Wolf Hoffman Avatar asked May 14 '18 16:05

Michael Wolf Hoffman


People also ask

What is the difference between ng serve and Ng build?

Difference between ng serve and ng buildThe ng serve command is intentionally for fast, local and iterative developments and also for builds, watches and serves the application from a local CLI development server. The ng build command is intentionally for building the apps and deploying the build artifacts.

Does ng build default to production?

ng build now uses the production configuration by default. You no longer need to pass the --prod option to the command. The --prod flag is deprecated, and we must now use --configuration production . As you can see here, the angular.

Does ng build use webpack?

The application builder uses the webpack build tool, with default configuration options specified in the workspace configuration file ( angular.json ) or with a named alternative configuration.

What is the output of NG build?

Compiles an Angular app into an output directory named dist/ at the given output path. Must be executed from within a workspace directory. Uses the webpack build tool, with default configuration options specified in the workspace configuration file (angular.


1 Answers

If anyone is reading this and looking for an answer:

TS is going to build any files it sees an 'import' statement for regardless of if it's in the 'exclude' property in tsconfig.json.

I had a import statement in my app.modules.ts file, and when I removed that... it was successfully excluded from the builds.

like image 70
Michael Wolf Hoffman Avatar answered Sep 23 '22 23:09

Michael Wolf Hoffman