version 2.0.0 breaks ng Angular 8 -> webpack in my project
JoelParke opened this issue · 5 comments
- Operating System: Ubuntu 19.04
- Node Version: 12.2.0
- NPM Version: - I use yarn for most, but npm 6.9.0
- webpack Version: 4.33.0
- raw-loader Version: 2.0.0
Angular CLI: 8.0.1
Node: 12.2.0
OS: linux x64
Angular: 8.0.0
... common, compiler, compiler-cli, core, elements, forms
... platform-browser, platform-browser-dynamic, router
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.800.1
@angular-devkit/build-angular 0.800.1
@angular-devkit/build-optimizer 0.800.1
@angular-devkit/core 8.0.1
@angular-devkit/schematics 8.0.1
@angular/cli 8.0.1
@angular/http 7.2.15
@schematics/angular 8.0.1
@schematics/update 0.800.1
rxjs 6.5.2
typescript 3.4.5
webpack 4.33.0
Expected Behavior
not to see my web app crash:
VM568 vendor.js:14467 Uncaught Error: Expected 'styles' to be an array of strings.
at assertArrayOfStrings (VM568 vendor.js:14467)
at
assertArrayOfStrings (vendor.js:14467)
push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNonNormalizedDirectiveMetadata (vendor.js:29784)
push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getEntryComponentMetadata (vendor.js:30429)
(anonymous) (vendor.js:30420)
push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getEntryComponentsFromProvider (vendor.js:30419)
(anonymous) (vendor.js:30392)
push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getProvidersMetadata (vendor.js:30355)
(anonymous) (vendor.js:30357)
push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getProvidersMetadata (vendor.js:30355)
(anonymous) (vendor.js:29978)
push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleMetadata (vendor.js:29969)
push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._loadModules (vendor.js:36121)
push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (vendor.js:36102)
push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler.compileModuleAsync (vendor.js:36062)
push../node_modules/@angular/platform-browser-dynamic/fesm5/platform-browser-dynamic.js.CompilerImpl.compileModuleAsync (vendor.js:73377)
compileNgModuleFactory__PRE_R3__ (vendor.js:62274)
push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModule (vendor.js:62483)
./src/main.ts (main.js:23343)
__webpack_require__ (runtime.js:79)
0 (main.js:29591)
__webpack_require__ (runtime.js:79)
checkDeferredModules (runtime.js:46)
webpackJsonpCallback (runtime.js:33)
(anonymous) (main.js:1)
Actual Behavior
no errors on web side.
Code
This code that crashes is the straight Angular 8.0, and I suspect Angular 7.0 as well. I saw this earlier and back off from v2.0.0 to v1.0.0 on raw-loader.
So the question is, what could the raw loader do that could be calling without the strings and just a [Module]?
How Do We Reproduce?
Not sure, without my source and project.
Are there log messages that can be turned on in the raw-loader the could spit out what is IN and OUT. Then I could run it under v1.0.0 and then under v 2.0.0. I suspect that seeing the log, would probably determine the difference between 2.0.0 and 1.0.0.
I would be happy to do that and report back. Thanks!
Looking into the failure point in chrome, it fails at : assertArrayOfStrings(), which is being called with args:
identifier = "styles", value = [Module]
function assertArrayOfStrings(identifier, value) {
if (value == null) {
return;
}
if (!Array.isArray(value)) {
throw new Error("Expected '" + identifier + "' to be an array of strings.");
}
for (var i = 0; i < value.length; i += 1) {
if (typeof value[i] !== 'string') {
throw new Error("Expected '" + identifier + "' to be an array of strings.");
}
}
}
The webpack, is straight from ng - Angular 8. I could not attach angular.json on GitHub as a json file, so here it is as a txt file:
angular.txt
Shortly: some of angular loader(s) is not compatibility with latest raw-loader (we use esm instead commonjs)
Can be fixed like:
function assertArrayOfStrings(identifier, value) {
value = value && value.default ? value.default : value
if (value == null) {
return;
}
if (!Array.isArray(value)) {
throw new Error("Expected '" + identifier + "' to be an array of strings.");
}
for (var i = 0; i < value.length; i += 1) {
if (typeof value[i] !== 'string') {
throw new Error("Expected '" + identifier + "' to be an array of strings.");
}
}
}
There is an issue open with angular2-template-loader, which I was using for my dev build. That project hasn't seen an update in over 2 years, so for now I'm switching from raw-loader to html-loader for component CSS includes, and it Just Works. It also has the advantage of using a single config for both dev and prod builds.
raw-loader@1.0.0 is better though, simple plug and play solution.
I'd rather keep a live dependency on the "wrong" loader than a pinned dep on the "right" one, personally. If you stick with 1.0 to avoid this bug then you're going to miss out on updates that could possibly be security-relevant.