Angular App builder

Problematic Angular + symlink Angular command line has problems when source code comes from symlink directory.

• --no-preserve-symlinks or set preserveSymlinks: false in angular.json will leads to some symlink source code directory being ignored by Webpack watch mode. (Probably due to Webpack's watchpack bug)

Develope Angular 7 command line builder

To be supported by ng <command> command:

1. builders property in package.json
2. schema.json
3. default export of Builder class
4. options change | Option name | Default value | - | - | hmr | true | port | 14333 | aot | true

Purpose

• Encapuslate build logic into a centralized node package, so that can be shared between difference projects, and can be upgraded by npm tool.

• Also avoid being changed from project to project which eventually will lead to too fragmented to share resuable components. So all projects can always share same best-practise build script.

• Expand webpack config file to support 3rd-party webpack features that angular cli does not provide.

  • Support using lodash template in index.html
  • Dynamic change Angular cli configuration by Typescript
  • Allow more Webpack customized configuration
  • Inline runtime chunk into index.html
  • Remind duplicate <base href> in index HTML when a developer setup a baseHref in Angular cli configuration.
  • Use file-loader to deal with <img src> in component template

• ~~Enable Angular 6 project to be built with legacy AngularJS project (which is compiled by different webpack loaders and plugins)~~

How to use as Angular command line builder

1. Make your application project as a DRCP workspace

• Add @wfh/plink to project dependency list in file package.json
• Run drcp init to install dependencies, this will call npm install internally.
• Modify angular.json file, change application project part:

  "architect": {
      "build": {
        "builder": "@dr-core/ng-app-builder:browser",
        ...
      },
      "serve": {
        "builder": "@dr-core/ng-app-builder:dev-server",
        ...
      }
  }

• Modify tsconfig.app.json, e2e/src/tsconfig.e2e.json for extends property

{
  "extends": "../../../dist/webpack-temp/angular-app-tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "module": "es2015",
    "target": "es5"
  }
}

• Modify tsconfig.server.json for extends property

{
  "extends": "../../../dist/webpack-temp/angular-app-tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "module": "commonjs",
    "target": "ES5"
  },
  // Add "angularCompilerOptions" with the AppServerModule you wrote
  // set as the "entryModule".
  "angularCompilerOptions": {
    "entryModule": "app/app.server.module#AppServerModule"
  }
}

Remove properties: path, include and exclude. extends property should be a proper location of file <project root>/dist/webpack-temp/angular-app-tsconfig.json

create a package.json file

if application arouce file structure is like projects/<your-app>/src/main.ts, create a package.json file at projects/<your-app>/package.json:

{
  "name": ...,
  "version": ...,
  "dr": {
    "ngAppModule": true,
    "angularCompiler": true
  }
}

2. Configurable Angular AppModule

Insert(import) business modules into app.module.ts at build time, so that we can build project with difference set of modules.

Assume you work on 2 projects which shares a lot of the common logic as Angular modules, each has different set of business modules.

We can reuse the project folder and same files like "polyfill.ts", "main.ts", "app/app.module.ts" ...

Create first config yaml file, assume it is named project-prod.config.yaml.

@dr-core/ng-app-builder:
  redirectToRoute: /main
  ngPackage:
    - @dr/foobar1
    - @dr/foobar2

Create 2nd config file, project-demo.config.yaml

@dr-core/ng-app-builder:
  redirectToRoute: /demo
  ngPackage:
    - @dr/demo
  deployUrl: '/' # This property overrides "deployUrl" from angular.json
  outputPath: 'dist/static/....' # Overrides "outputPath" from angular.json

We support customized ng command argument --drcp-config for ng serve/build

ng build --drcp-config project-prod.yaml

Change app.module.ts

const appRoutes: Routes = [
  {
    path: '**',
    redirectTo: __api.config.get('redirectToRoute')
  }
];

@NgModule({
  declarations: [AppComponent],
  imports: [
    // ...,
    RouterModule.forRoot(appRoutes, { enableTracing: false })
  ],
  providers: [{ provide: ErrorHandler, useValue: new SnowplowErrorHandler() }],
  bootstrap: [AppComponent]
})
export class AppModule {}

3. Do not hard-code Angular Router path

Defined module route path in the package.json file of your module package

{
  "name": "@hellow/foo-bar",
  "dr": {
    "ngRouterPath": "foobar",
    "angularCompiler": true
  }
}

Use __api.ngRouterPath(...) to define route path

const agreementRoutes: Routes = [
  {
    path: __api.ngRouterPath(':id'),
    component: AgreementComponent
  }
];
@NgModule({
  imports: [CommonModule, RouterModule.forChild(agreementRoutes)],
  declarations: [AgreementComponent]
})
export class FooBarModule {}

__api.ngRouterPath(...) will be compiled to my-app/foobar/:id if deployUrl is /my-app

Navigate to other feature module's route address

Use:

<a routerLink="~@hellow/foo-bar" routerLinkActive="active">Index</a>
<a routerLink="~@hellow/foo-bar/112" routerLinkActive="active">Page 112</a>

When angular.json's deployUrl is '/', it will be compiled to

<a routerLink="/foobar" routerLinkActive="active">Foobar</a>
<a routerLink="/foobar/112" routerLinkActive="active">Page 112</a>

When angular.json's deployUrl is '/my-app', it will be compiled to

<a routerLink="/my-app/foobar" routerLinkActive="active">Foobar</a>
<a routerLink="/my-app/foobar/112" routerLinkActive="active">Page 112</a>

4. Hack TS source code during compilation

In DRCP component package's package.json file:

"dr": {
  "ngTsHandler": "dist/change-ng-ts#run"
}

Meaning you can add a file 'dist/change-ng-ts.js' in your package folder and export a function named run() which actually handles hacking each TS source file passed from Angular cli.
e.g.

import {TsHandler, ReplacementInf} from '@dr-core/ng-app-builder';
import * as ts from 'typescript';

export let run: TsHandler = yourTsHacker;

function yourTsHacker(src: ts.SourceFile): ReplacementInf[] {
  // Where you return hacked source code
}

Hack Angular command line

A sample configuration TS file. ng serve/build --drcp-config <conf-1.ts>,<conf-2.ts>... 引入这个文件

import {AngularConfigHandler, AngularBuilderOptions, WepackConfigHandler, DrcpSetting as AppBuilderSetting} from '@dr-core/ng-app-builder';
import {ConfigHandler, InjectorConfigHandler, InjectorFactory} from '@wfh/plink/wfh/dist';
import * as fs from 'fs';
import * as _ from 'lodash';
// import {Options as webpackOpt} from 'webpack';

const handler: AngularConfigHandler & ConfigHandler & InjectorConfigHandler & WepackConfigHandler = {

    onConfig(setting: {[prop: string]: any}, drcpCliArgv) {
        const ngBuilderConf: AppBuilderSetting = setting['@dr-core/ng-app-builder'];
        ngBuilderConf.ngPackage.push('@bk/console-home');
        ngBuilderConf.ngModule.push('@bk/fancy/fancy.module#FancyModule');
        ngBuilderConf.excludePackage = [
            /@bk\/module-(real-name|apply|helper)$/,
            '@bk/credit-console-conf',
            '@bk/cash-loan-all'
        ];
        if (fs.existsSync('node_modules/@bk/credit-risk')) {
            ngBuilderConf.excludePath.push(
                'node_modules/@bk/credit-risk/**/*',
                fs.realpathSync('node_modules/@bk/credit-risk') + '/**/*');
        }
        ngBuilderConf.buildOptimizerExclude.push('node_modules/mermaid');
        _.set(setting, '@bk/cash-loan-all.noCheckAuth', true);
        setting.redirectToRoute = '/console/console-home';
        _.set(setting, '@bk/module-core.footerLogoVisible', false);
    },

    angularJson(options: AngularBuilderOptions) {
        options.deployUrl = '/console/';
        options.outputPath = 'dist/static/console';
    },

    webpackConfig(original: any) {
    },

    setupNodeInjector(factory: InjectorFactory): void {
    },

    setupWebInjector(factory: InjectorFactory): void {
    }
};

export {handler as default};

Known Issues

Problematic Angular + symlink

Angular command line has problems when source code comes from symlink directory.

• --preserve-symlinks or set preserveSymlinks: true in angular.json will leads to some symlink source code directory being ignored by Webpack watch mode. (Probably due to Webpack's watchpack bug)