search

just-jeb / angular-builders

Angular build facade extensions (Jest and custom webpack configuration)
MIT License
1.15k stars 198 forks source link

cannot deploy to firebase with custom webpack #956

Closed its-dibo closed 3 years ago

its-dibo commented 3 years ago

when setting up ng deploy with @angular/fire, it cannot read the file projects/cms/server/webpack.config.ts

angular.json (architect part)

{
..........
"deploy": {
          "builder": "@angular/fire:deploy",
          "options": {
            "ssr": true
          }
        },
"server": {
          "builder": "@angular-builders/custom-webpack:server",
          "options": {
            "customWebpackConfig": {
              "path": "projects/cms/server/webpack.config.ts"
            },
            "outputPath": "dist/cms/core/server",
            "main": "projects/cms/server/express.ts",
            "tsConfig": "projects/cms/server/tsconfig.json",
            "externalDependencies": [
              "firebase",
              "@firebase/app",
              "@firebase/analytics",
              "@firebase/auth",
              "@firebase/component",
              "@firebase/database",
              "@firebase/firestore",
              "@firebase/functions",
              "@firebase/installations",
              "@firebase/messaging",
              "@firebase/storage",
              "@firebase/performance",
              "@firebase/remote-config",
              "@firebase/util"
            ]
          },
          "configurations": {
            "production": {
              "outputHashing": "media",
              "fileReplacements": [
                {
                  "replace": "projects/cms/config/env.ts",
                  "with": "projects/cms/config/env.prod.ts"
                }
              ],
              "sourceMap": false,
              "optimization": true
            }
          }
        },
"build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "projects/cms/browser/webpack.config.ts"
            },
            "outputPath": "dist/cms/core/browser",
            "index": "projects/cms/browser/index.html",
            "main": "projects/cms/browser/main.ts",
            "polyfills": "projects/cms/browser/polyfills.ts",
            "tsConfig": "projects/cms/browser/tsconfig.json",
            "aot": true,
            "assets": [
              "projects/cms/browser/favicon.ico",
              "projects/cms/browser/assets"
            ],
            "styles": [
              "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
              "projects/cms/browser/styles.scss"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "projects/cms/config/env.ts",
                  "with": "projects/cms/config/env.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                }
              ]
            }
          }
        }
}

running ng deploy gives the following error

Error when trying to deploy: 
⨯ Unable to compile TypeScript:
projects/cms/server/webpack.config.ts:6:20 - error TS7006: Parameter 'config' implicitly has an 'any' type.

6 function default_1(config, options = {}, targetOptions) {

projects/cms/server/webpack.config.ts

import { join } from 'path';
import {
  getConfig as basicConfig,
  ConfigOptions,
  Configuration,
  CustomWebpackBrowserSchema,
  TargetOptions
} from '../webpack.config';

export default function(
  config: Configuration,
  options: ConfigOptions = {},
  targetOptions?: TargetOptions
): Configuration {
  return getConfig(config);
}
....
just-jeb commented 3 years ago

Does ng build pass?

its-dibo commented 3 years ago

yes, for both server and browser. but whith ng deploy, only the browser build passes.

its-dibo commented 3 years ago

note: when I replace the builder @angular-builders/custom-webpack:browser with @angular-devkit/build-angular:browser and keep @angular-builders/custom-webpack:server the server can be built, build passes in both cases

@just-jeb

just-jeb commented 3 years ago

Would you mind trying to use webpack.config.js instead of ts? I suspect it has something to do with ts-node registration. Similar error happened when it was registered twice.

its-dibo commented 3 years ago

it worked with .js, but it should work with .ts, it works fine with .ts without @angular/fire:deploy, using ng build for both browser & server

@just-jeb

just-jeb commented 3 years ago

I agree. Could you provide a minimal reproduction so that I could investigate?