Closed ZooLeeCoding closed 2 years ago
Any chance #235 is related?
Any chance #235 is related? @just-jeb No. I tried this config with functions instead of returning and object and it doesn't serve assets:
const webpack = require('webpack');
const path = require('path');
const CopyPlugin = require('copy-webpack-plugin');
module.exports = function (env, argv) {
console.log(env);
console.log(argv);
return {
mode: 'development',
plugins: [
new webpack.NormalModuleReplacementPlugin(/typeorm$/, function (result) {
result.request = result.request.replace(/typeorm/, "typeorm/browser");
}),
new webpack.ProvidePlugin({
'window.SQL': path.join(__dirname, '../node_modules/sql.js/dist/sql-asm.js'),
}),
new CopyPlugin(
{
patterns: [{
from: 'node_modules/reflect-metadata/Reflect.js',
to: 'Reflect.js'
}]
}),
],
node: {
fs: 'empty',
},
};
}
My angular.json:
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"defaultProject": "app",
"newProjectRoot": "projects",
"projects": {
"app": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "@angular-builders/custom-webpack:browser",
"options": {
"customWebpackConfig": {
"path": "./config/webpack.asm.js"
},
"outputPath": "www",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"assets": [
{
"glob": "**/*",
"input": "src/assets",
"output": "assets"
},
{
"glob": "**/*.svg",
"input": "node_modules/ionicons/dist/ionicons/svg",
"output": "./svg"
}
],
"styles": [
{
"input": "src/theme/variables.scss"
},
{
"input": "src/global.scss"
}
],
"scripts": []
},
"configurations": {
"production": {
"customWebpackConfig": {
"path": "./config/webpack.wasm.js"
},
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"serviceWorker": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}
]
},
"ci": {
"progress": false
}
}
},
"serve": {
"builder": "@angular-builders/custom-webpack:dev-server",
"options": {
"browserTarget": "app:build",
"disableHostCheck": true,
"proxyConfig": "proxy.config.json"
},
"configurations": {
"production": {
"customWebpackConfig": {
"path": "./config/webpack.asm.js"
},
"browserTarget": "app:build:production"
},
"ci": {
"progress": false
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "app:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"styles": [
{
"input": "src/theme/variables.scss"
},
{
"input": "src/global.scss"
}
],
"scripts": [],
"assets": [
{
"glob": "favicon.ico",
"input": "src/",
"output": "/"
},
{
"glob": "**/*",
"input": "src/assets",
"output": "/assets"
}
]
},
"configurations": {
"ci": {
"progress": false,
"watch": false
}
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json",
"e2e/tsconfig.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "app:serve"
},
"configurations": {
"production": {
"devServerTarget": "app:serve:production"
},
"ci": {
"devServerTarget": "app:serve:ci"
}
}
},
"ionic-cordova-build": {
"builder": "@ionic/angular-toolkit:cordova-build",
"options": {
"browserTarget": "app:build"
},
"configurations": {
"production": {
"browserTarget": "app:build:production"
}
}
},
"ionic-cordova-serve": {
"builder": "@ionic/angular-toolkit:cordova-serve",
"options": {
"cordovaBuildTarget": "app:ionic-cordova-build",
"devServerTarget": "app:serve"
},
"configurations": {
"production": {
"cordovaBuildTarget": "app:ionic-cordova-build:production",
"devServerTarget": "app:serve:production"
}
}
}
}
}
},
"cli": {
"defaultCollection": "@ionic/angular-toolkit"
},
"schematics": {
"@ionic/angular-toolkit:component": {
"styleext": "scss"
},
"@ionic/angular-toolkit:page": {
"styleext": "scss"
}
}
}
packages:
"dependencies": {
"@angular-builders/custom-webpack": "^10.0.1",
"@angular/common": "~10.0.0",
"@angular/core": "~10.0.0",
"@angular/forms": "~10.0.0",
"@angular/platform-browser": "~10.0.0",
"@angular/platform-browser-dynamic": "~10.0.0",
"@angular/pwa": "~0.1000.0",
"@angular/router": "~10.0.0",
"@angular/service-worker": "^10.0.14",
"@capacitor/core": "2.4.3",
"@ionic-native/core": "^5.0.0",
"@ionic-native/in-app-browser": "^5.30.0",
"@ionic-native/splash-screen": "^5.0.0",
"@ionic-native/status-bar": "^5.0.0",
"@ionic/angular": "^5.0.0",
"@ionic/storage": "^2.3.1",
"rxjs": "~6.5.5",
"tslib": "^2.0.0",
"zone.js": "~0.10.3"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.1000.0",
"@angular/cli": "~10.0.5",
"@angular/compiler": "~10.0.0",
"@angular/compiler-cli": "~10.0.0",
"@angular/language-service": "~10.0.0",
"@capacitor/cli": "2.4.3",
"@ionic/angular-toolkit": "^2.3.0",
"@types/jasmine": "~3.5.0",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^12.11.1",
"codelyzer": "^6.0.0",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~5.0.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~3.3.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~3.9.5"
},
Hi @dotupNET. In order to be able to understand what's happening here I'm gonna need a minimal reproduction repo.
But I'm not sure I understand your issue. Why are you trying to copy files from node_modules
instead of just bundling them?
What does assets
folder have to do with it? Is this happening only with dev-server
and working well with ng build
?
We have the exact same issue. Huge angular app got upgraded from Angular 9 to 13. Had to do it all over once because custom-webpack blocked angular migrations to angular.json, so second time started by completely removing custom-webpack.
When I reached 13 and everything was working fine, even did some code migrations and refactoring, I reinstalled the custom-webpack builder, and assets just stopped being served.
They're there in the ng build
output, but not in the ng serve
'd up bundle.
We're using the custom-webpack builder to include mozilla PDF.js's worker script (that is loaded internally by filename) with a contenthash from node_modules
. Weirdly enough, this works!
My guess is, it's related to https://github.com/just-jeb/angular-builders/issues/235 but I haven't tried using a function yet.
Even tried force-using the newest copy-webpack-plugin
, without any luck;
npm list copy-webpack-plugin
+-- @angular-devkit/build-angular@13.3.9
| `-- copy-webpack-plugin@10.2.1
`-- copy-webpack-plugin@11.0.0
npm list webpack
`-- @angular-devkit/build-angular@13.3.9
`-- webpack@5.70.0
package.json
{
"name": "app",
"version": "1.0.0",
"private": true,
"dependencies": {
"@angular/animations": "13.3.11",
"@angular/common": "13.3.11",
"@angular/compiler": "13.3.11",
"@angular/core": "13.3.11",
"@angular/forms": "13.3.11",
"@angular/localize": "13.3.11",
"@angular/platform-browser": "13.3.11",
"@angular/platform-browser-dynamic": "13.3.11",
"@angular/router": "13.3.11",
...
"@stomp/rx-stomp": "^1.1.4",
"reset-css": "^5.0.1",
"rxjs": "6.6.3",
"text-encoding": "0.7.0",
"tslib": "^2.0.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-builders/custom-webpack": "^13.1.0",
"@angular-devkit/build-angular": "13.3.9",
"@angular/cli": "13.3.9",
"@angular/compiler-cli": "13.3.11",
"@angular/language-service": "^13.3.11",
"typescript": "4.6.4",
"webpack-manifest-plugin": "^5.0.0"
},
"scripts": {
...
}
}
angular.json (with added comments)
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"cli": {
"analytics": false,
"cache": {
"enabled": false
}
},
"version": 1,
"newProjectRoot": "projects",
"projects": {
"app": {
...
"root": "",
"sourceRoot": "src",
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},
"architect": {
"build": {
"builder": "@angular-builders/custom-webpack:browser",
"defaultConfiguration": "production",
"options": {
"outputPath": "dist",
"index": "src/index.html",
"main": "src/main.ts",
"tsConfig": "src/tsconfig.json",
"polyfills": "src/polyfills.ts",
"inlineStyleLanguage": "scss",
"customWebpackConfig": {
"path": "./extra-webpack.config.ts",
// As far as I could tell this changed from mergeStrategies to Rules,
// but the same thing happened with Rules too.
"mergeRules": {
"plugins": "append"
},
"replaceDuplicatePlugins": false
},
"assets": [
"src/assets",
"src/favicon.ico",
"src/unsupported-browser.html",
{
"glob": "**/*",
"input": "./node_modules/pdfjs-dist/cmaps/",
"output": "./assets/cmaps/"
}
],
"styles": [
...
],
"scripts": [
"node_modules/text-encoding/lib/encoding-indexes.js",
"node_modules/text-encoding/lib/encoding.js",
"node_modules/pdfjs-dist/build/pdf.min.js",
"node_modules/pdfjs-dist/web/pdf_viewer.js"
]
},
"configurations": {
"development": {
"aot": true,
"baseHref": "/",
"vendorChunk": true,
"extractLicenses": false,
"buildOptimizer": false,
"sourceMap": {
"scripts": true,
"styles": false,
"hidden": false,
"vendor": false
},
"optimization": false,
"namedChunks": true
},
...
"production": {
"budgets": [
{
"type": "anyComponentStyle",
"maximumWarning": "6kb"
}
],
"optimization": {
"fonts": false,
"styles": {
"inlineCritical": false
}
},
"outputHashing": "bundles",
"aot": true,
"sourceMap": {
"scripts": true,
"styles": false,
"hidden": true,
"vendor": false
},
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"baseHref": "/app/"
}
}
},
"serve": {
"builder": "@angular-builders/custom-webpack:dev-server",
"defaultConfiguration": "development",
"options": {
"browserTarget": "app:build",
"disableHostCheck": true
},
"configurations": {
"bernatgy": {
// NOTE: Using targets like this to simplify configuration works with default builders!
"browserTarget": "app:build:development,bernatgy,en",
// DHCP IP of the local PC
"host": "xxx.xxx.xxx.xx"
},
...
}
}
}
}
},
"defaultProject": "app"
}
extra-webpack.config.ts
import { Configuration } from 'webpack';
import * as CopyPlugin from 'copy-webpack-plugin';
import { WebpackManifestPlugin } from 'webpack-manifest-plugin';
import * as path from 'path';
import { FileDescriptor } from 'webpack-manifest-plugin/dist/helpers';
let originalWorkerFilePath = require.resolve(`pdfjs-dist/build/pdf.worker.min.js`);
export default {
plugins: [
new CopyPlugin({
patterns: [
{
from: originalWorkerFilePath,
to: '[name].[contenthash].[ext]'
}
]
}),
new WebpackManifestPlugin({
filter: (file: FileDescriptor) => {
if (file.name.indexOf(path.basename(originalWorkerFilePath)) !== -1)
return true;
return false;
},
writeToFileEmit: true
})
]
} as Configuration;
UPDATE: Works with the function form from https://github.com/just-jeb/angular-builders/issues/235#issuecomment-471323007!
We have the exact same issue. Huge angular app got upgraded from Angular 9 to 13. Had to do it all over once because custom-webpack blocked angular migrations to angular.json, so second time started by completely removing custom-webpack.
When I reached 13 and everything was working fine, even did some code migrations and refactoring, I reinstalled the custom-webpack builder, and assets just stopped being served.
They're there in the
ng build
output, but not in theng serve
'd up bundle.We're using the custom-webpack builder to include mozilla PDF.js's worker script (that is loaded internally by filename) with a contenthash from
node_modules
. Weirdly enough, this works!My guess is, it's related to #235 but I haven't tried using a function yet. Even tried force-using the newest
copy-webpack-plugin
, without any luck;npm list copy-webpack-plugin +-- @angular-devkit/build-angular@13.3.9 | `-- copy-webpack-plugin@10.2.1 `-- copy-webpack-plugin@11.0.0 npm list webpack `-- @angular-devkit/build-angular@13.3.9 `-- webpack@5.70.0
package.json
{ "name": "app", "version": "1.0.0", "private": true, "dependencies": { "@angular/animations": "13.3.11", "@angular/common": "13.3.11", "@angular/compiler": "13.3.11", "@angular/core": "13.3.11", "@angular/forms": "13.3.11", "@angular/localize": "13.3.11", "@angular/platform-browser": "13.3.11", "@angular/platform-browser-dynamic": "13.3.11", "@angular/router": "13.3.11", ... "@stomp/rx-stomp": "^1.1.4", "reset-css": "^5.0.1", "rxjs": "6.6.3", "text-encoding": "0.7.0", "tslib": "^2.0.0", "zone.js": "~0.11.4" }, "devDependencies": { "@angular-builders/custom-webpack": "^13.1.0", "@angular-devkit/build-angular": "13.3.9", "@angular/cli": "13.3.9", "@angular/compiler-cli": "13.3.11", "@angular/language-service": "^13.3.11", "typescript": "4.6.4", "webpack-manifest-plugin": "^5.0.0" }, "scripts": { ... } }
angular.json (with added comments)
{ "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "cli": { "analytics": false, "cache": { "enabled": false } }, "version": 1, "newProjectRoot": "projects", "projects": { "app": { ... "root": "", "sourceRoot": "src", "projectType": "application", "schematics": { "@schematics/angular:component": { "style": "scss" } }, "architect": { "build": { "builder": "@angular-builders/custom-webpack:browser", "defaultConfiguration": "production", "options": { "outputPath": "dist", "index": "src/index.html", "main": "src/main.ts", "tsConfig": "src/tsconfig.json", "polyfills": "src/polyfills.ts", "inlineStyleLanguage": "scss", "customWebpackConfig": { "path": "./extra-webpack.config.ts", // As far as I could tell this changed from mergeStrategies to Rules, // but the same thing happened with Rules too. "mergeRules": { "plugins": "append" }, "replaceDuplicatePlugins": false }, "assets": [ "src/assets", "src/favicon.ico", "src/unsupported-browser.html", { "glob": "**/*", "input": "./node_modules/pdfjs-dist/cmaps/", "output": "./assets/cmaps/" } ], "styles": [ ... ], "scripts": [ "node_modules/text-encoding/lib/encoding-indexes.js", "node_modules/text-encoding/lib/encoding.js", "node_modules/pdfjs-dist/build/pdf.min.js", "node_modules/pdfjs-dist/web/pdf_viewer.js" ] }, "configurations": { "development": { "aot": true, "baseHref": "/", "vendorChunk": true, "extractLicenses": false, "buildOptimizer": false, "sourceMap": { "scripts": true, "styles": false, "hidden": false, "vendor": false }, "optimization": false, "namedChunks": true }, ... "production": { "budgets": [ { "type": "anyComponentStyle", "maximumWarning": "6kb" } ], "optimization": { "fonts": false, "styles": { "inlineCritical": false } }, "outputHashing": "bundles", "aot": true, "sourceMap": { "scripts": true, "styles": false, "hidden": true, "vendor": false }, "namedChunks": false, "extractLicenses": true, "vendorChunk": false, "buildOptimizer": true, "baseHref": "/app/" } } }, "serve": { "builder": "@angular-builders/custom-webpack:dev-server", "defaultConfiguration": "development", "options": { "browserTarget": "app:build", "disableHostCheck": true }, "configurations": { "bernatgy": { // NOTE: Using targets like this to simplify configuration works with default builders! "browserTarget": "app:build:development,bernatgy,en", // DHCP IP of the local PC "host": "xxx.xxx.xxx.xx" }, ... } } } } }, "defaultProject": "app" }
extra-webpack.config.ts
import { Configuration } from 'webpack'; import * as CopyPlugin from 'copy-webpack-plugin'; import { WebpackManifestPlugin } from 'webpack-manifest-plugin'; import * as path from 'path'; import { FileDescriptor } from 'webpack-manifest-plugin/dist/helpers'; let originalWorkerFilePath = require.resolve(`pdfjs-dist/build/pdf.worker.min.js`); export default { plugins: [ new CopyPlugin({ patterns: [ { from: originalWorkerFilePath, to: '[name].[contenthash].[ext]' } ] }), new WebpackManifestPlugin({ filter: (file: FileDescriptor) => { if (file.name.indexOf(path.basename(originalWorkerFilePath)) !== -1) return true; return false; }, writeToFileEmit: true }) ] } as Configuration;
Describe the Bug
I have been using the @angular-builders package for over a year to load some very specific libraries into Angular and so far, everything was perfect. But recently I had to migrate this previous, Angular 7 app to Angular 9 and although everything seems to be working, every element of the assets folder throws 404 error, even though the assets folder is in the configuration of the custom builder and appears in its complete form if I choose to build the application instead of running it on the dev-server. Upon inspecting the source files served by the dev-server I am unable to find any trace of the assets folder.
Minimal Reproduction
The contents of my angular.json:
The custom-webpack.js:
Expected Behavior
To have the assets folder served on the dev-server
Screenshots
The errors in the console log:
If I build the project, everything is fine, runs without any issue if served with external application:
Environment
Additional Context
The very same configuration run flawlessly on Angular 7 with "@angular-builders/custom-webpack": "^7.3.1", "@angular-builders/dev-server": "^7.3.1",