Cannot build against Angular 16.1

[cjohn001]

Describe the bug
I just tried to upgrade to angular 16.1, see package list below. Unfortunately, I am seeing the following errors when building the app.

Environment

OS: macOS 13.4
CPU: (10) arm64 Apple M1 Pro
Shell: /bin/zsh
node: 18.12.1
npm: 8.19.2
nativescript: 8.5.3

# android
java: 11.0.18
ndk: Not Found
apis: Not Found
build_tools: Not Found
system_images: Not Found

# ios
xcode: 14.3.1/14E300c
cocoapods: 1.12.0
python: 3.11.2
python3: 3.11.2
ruby: 2.7.7
platforms: 
  - DriverKit 22.4
  - iOS 16.4
  - macOS 13.3
  - tvOS 16.4
  - watchOS 9.4

Dependencies

"dependencies": {
  "@angular/animations": "16.1.1",
  "@angular/common": "16.1.1",
  "@angular/compiler": "16.1.1",
  "@angular/core": "16.1.1",
  "@angular/forms": "16.1.1",
  "@angular/platform-browser": "16.1.1",
  "@angular/platform-browser-dynamic": "16.1.1",
  "@angular/router": "16.1.1",
  "@apollo/client": "3.7.15",
  "@mnd/external-web-view": "file:../mnd-plugins/dist/packages/external-web-view/mnd-external-web-view-1.0.0.tgz",
  "@nativescript/angular": "16.0.0",
  "@nativescript/core": "8.5.3",
  "@nativescript/iqkeyboardmanager": "2.1.1",
  "@nativescript/localize": "5.1.0",
  "@nativescript/mlkit-barcode-scanning": "2.0.0",
  "@nativescript/mlkit-core": "2.0.0",
  "@nativescript/secure-storage": "3.0.1",
  "@nativescript/theme": "3.0.2",
  "@nativescript/ui-charts": "0.2.4",
  "apollo-angular": "5.0.0",
  "apollo3-cache-persist": "0.14.1",
  "d3-ease": "3.0.1",
  "graphql": "16.6.0",
  "graphql-tag": "2.12.6",
  "intl": "1.2.5",
  "moment": "2.29.4",
  "nativescript-health-data": "file:../mnd-custom-plugins/nativescript-health-data/publish/package/nativescript-health-data-2.0.0.tgz",
  "nativescript-oauth2-ext": "file:../mnd-custom-plugins/nativescript-oauth2-ext/publish/package/nativescript-oauth2-ext-3.0.1.tgz",
  "nativescript-sqlite": "2.8.6",
  "nativescript-ui-calendar": "15.2.3",
  "nativescript-ui-gauge": "15.2.3",
  "rxjs": "7.8.1",
  "uuid": "9.0.0",
  "zone.js": "0.13.1"
},
"devDependencies": {
  "@angular-devkit/build-angular": "16.1.0",
  "@angular/compiler-cli": "16.1.1",
  "@graphql-codegen/cli": "4.0.1",
  "@graphql-codegen/fragment-matcher": "5.0.0",
  "@graphql-codegen/introspection": "4.0.0",
  "@graphql-codegen/typescript": "4.0.0",
  "@graphql-codegen/typescript-apollo-angular": "3.5.6",
  "@graphql-codegen/typescript-operations": "4.0.0",
  "@nativescript/android": "8.5.0",
  "@nativescript/ios": "8.5.2",
  "@nativescript/types": "8.5.0",
  "@nativescript/webpack": "5.0.15",
  "@ngtools/webpack": "16.1.0",
  "@types/d3-ease": "3.0.0",
  "@types/intl": "1.2.0",
  "@types/node": "20.3.1",
  "@types/uuid": "9.0.2",
  "keycloak-request-token": "0.1.0",
  "rimraf": "5.0.1",
  "sass": "1.63.4",
  "ts-node": "10.9.1",
  "typescript": "4.9.5"
}

asset runtime.js 99 bytes [emitted] (name: runtime)

ERROR in bundle
Module not found: Error: Can't resolve '@angular-devkit/build-angular/src/babel/webpack-loader' in '/Users/cjohn/Entwicklung/MND/my-nutri-diary/mnd'

ERROR in bundle
Module not found: Error: Can't resolve '@angular-devkit/build-angular/src/babel/webpack-loader' in '/Users/cjohn/Entwicklung/MND/my-nutri-diary/mnd'

ERROR in bundle
Module not found: Error: Can't resolve '@angular-devkit/build-angular/src/babel/webpack-loader' in '/Users/cjohn/Entwicklung/MND/my-nutri-diary/mnd'

ERROR in tns_modules/inspector_modules
Module not found: Error: Can't resolve '@angular-devkit/build-angular/src/babel/webpack-loader' in '/Users/cjohn/Entwicklung/MND/my-nutri-diary/mnd'

4 errors have detailed information that is not shown.

Expected behavior
app builds correctly

[jwrascoe]

@cjohn001 Same for me, for the moment I have been backing down to the prior version of angular (16.0.3) till its resolved.

[edusperoni]

It seems angular created a new subfolder in the package. I'll take a look and refactor our webpack build

[edusperoni]

@cjohn001 @jwrascoe can you try this on your webpack.config.js?

webpack.chainWebpack((config, env) => {
    config.module.rule('angular-webpack-loader').use('webpack-loader').loader('@angular-devkit/build-angular/src/tools/babel/webpack-loader')
});

If that works I can do a quick PR in a few minutes, otherwise I'll have to wait for monday most likely

[jwrascoe]

@edusperoni yup, that was it, the webpack change works fine. Thanks for the work-around!