angular 404 (Not Found) :1234/app.component.html:1 or ..\node_modules\zone.js\dist\zone.js:2969

[tatsujb]

❔ Question

What am I missing with parcel implementation to get components to show up?

🔦 Context

I set up a project with angular-cli that i added parcel to. with a basic setup and a basic two page routed setup starting from here : https://github.com/knipferrc/angular-parcel and turned it into an angular cli-project. basically by creating a new angular-cli project, dumping the knipferrc one on top of it and then using webstorm's local history to work out differences, then I picked the angular-cli way each time, it worked perfectly, but as soon as I started adding components (and most importantly routing them) I started getting these errors :

💻 Code Sample

so I've made a boiler plate of where I'm at : https://github.com/tatsujb/parcel-angular6-scss

you can download it, then :

1. npm i
2. npm start
   (for parcel)
   or
3. ng serve
   (for webpack)

as you can see, webpack runs fine but parcel fails to find the components.

🌍 Your Environment

Software	Version(s)
Parcel	^1.8.1
Node	v8.9.4
npm/Yarn	5.6.0
Operating System	windows 10 pro

Side note : A guide in the recipes section of the parcel website is missing.

[tatsujb]

obtained a good lead on this here : #1346 (comment)

[tatsujb]

@knipferrc I thought I was getting ahead with your idea :

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}
const fs = require('fs');
const app = fs.readFileSync('./src/app/app.component.html', 'utf8');
const four = fs.readFileSync('./src/app/four.o.four/four.o.four.component.html', 'utf8');
const loggedin = fs.readFileSync('./src/app/logged.in/logged.in.component.html', 'utf8');
const routing = fs.readFileSync('./src/app/logged.in/routing/routing.component.html', 'utf8');
const items = fs.readFileSync('./src/app/logged.in/routing/items/items.component.html', 'utf8');
const po = fs.readFileSync('./src/app/logged.in/routing/purchase.orders/purchase.orders.component.html', 'utf8');

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));

but then I got the same result :

GET http://localhost:4200/four.o.four.component.html 404 (Not Found) 
..\node_modules\zone.js\dist\zone.js:2969
Failed to load four.o.four.component.html main.ts:19
ect...

maybe the only solution is for parcel to patch this.
@wycats @ry @devongovett @amrnt @albinotonnina @DeMoorJasper @fathyb @brandon93s

it's ofc rediculous to consider adding an extra "import" line for every single html file so it was just to test but bottom line is that we can't accept having to place the DOM code inline in the .ts file.

that's just not the way a 2018 Angular dev do.

[tatsujb]

I've tried putting all the html within templates but that did not help : https://github.com/tatsujb/parcel-angular6-scss/tree/templatedHTML

I get the exact same web console 404 errors.

[DeMoorJasper]

readFileSync should work and not return a 404 as it has nothing to do with web-requests (it gets bundled/inlined)

[tatsujb]

@DeMoorJasper , I've been receiving help in #1346 and apparently it's a matter of me using templateUrl and styleUrl instead of inlining both the style and the DOM because parcel does not support having them as separate files yet, is that why this is happening?

EDIT : hold on, are you saying that no, that's not the case, :

readFileSync should work and not return a 404 as it has nothing to do with web-requests (it gets bundled/inlined)

I don't understand what you are saying here, is readFileSync the module responsible for loading DOM and style?

[DeMoorJasper]

All these fs inlines you have...

const app = fs.readFileSync('./src/app/app.component.html', 'utf8');
const four = fs.readFileSync('./src/app/four.o.four/four.o.four.component.html', 'utf8');
const loggedin = fs.readFileSync('./src/app/logged.in/logged.in.component.html', 'utf8');
const routing = fs.readFileSync('./src/app/logged.in/routing/routing.component.html', 'utf8');
const items = fs.readFileSync('./src/app/logged.in/routing/items/items.component.html', 'utf8');
const po = fs.readFileSync('./src/app/logged.in/routing/purchase.orders/purchase.orders.component.html', 'utf8');

Parcel should handle them for you and inline them unless you're using something like electron or virtual fs than it's completely up to you to make sure those files actually exist

[tatsujb]

well obviously I'm not trying to keep that there, it was just a hack attempt to verify that indeed my issue was due to not inlining, it didn't fall through though, so I don't know if it's because of non-inlined css or if it wouldn't have worked either way,

But ideally, of course, I wouldn't have to do anything I don't have to do under webpack for angular with parcel.

and that's what I'm trying to figure out, why am I still seeing 404's for all my components?

[mistakenelf]

You should move those readFileSync's to the template of that component, so for instance in app, you would have template: fs.readFileSync(app.component.html, utf8)

[tatsujb]

Ok, will do

[DeMoorJasper]

I guess this has been resolved due to no more comments after the suggested fix

[tatsujb]

not really :/ I was just out of time. but I'll reopen a new issue at a later date when I have more info.