can't "ng build --prod" but I can "ng serve" and it works there

[maikelthedev]

I'm submitting a ... (check one with "x")

[x] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  <!-- Please check the repository for a similar issue or PR before submitting -->
[ ] Support request => <!-- Please check the repository for a similar issue or PR before submitting -->
[ ] Feature request
[ ] Documentation issue or request

Current behavior

While I'm in dev mode (ng serve) everything works but as soon as I go to "ng build --prod" it fails. I've attached the stdout and stderr as a.txt here

How can you not find it in build but yes in dev ?

Expected/desired behavior

I want to be able to build it

Minimal reproduction of the problem with instructions I just described it

Environment

• Angular version: latest 4.

• For Tooling issues:

• Node version: 6.10.1 <!-- run node --version -->

• Platform: Windows

• Others:

The file a.txt

UPDATE: In case of need of the source code find it in https://github.com/maikeldotuk/learningCMS

The commit is the one with "commented out all the ngx-meta bits" as message. You can reproduce the error by getting rid of the / / in app.module.ts and recompiling

Commenting out everything this is what I get when I uncomment the line below and just that one

"ERROR in C:/Users/maike/shit2/CMS/src/$$_gendir/node_modules/@ngx-meta/core/core.ngfactory.ts (10,21): Cannot find module 'core'."

The line:

import { MetaModule, MetaLoader, MetaStaticLoader, PageTitlePositioning } from '@ngx-meta/core';

UPDATE2:

Tried too with Angular 4.4.0-RC.0 appart from Angular 4.3.6, the issue remains there.

[fulls1z3]

@maikeldotuk applied the fix and got it working on a fresh cli env, as well as on ng-seed/universal, soon gonna make a new release including the fix.

[maikelthedev]

I'm afraid I manage to get the same results without the plugin, by using the Meta component from Angular.

const winTitle = 'Maikel.uk: ' + this.theSkill.skillTitle;
document.title = winTitle;
this.metaService.addTag({ property: 'og:title', content: winTitle});
this.metaService.addTag({ property: 'title', content: winTitle});
this.metaService.addTag({ property: 'og:icon', content: 'this.theSkill.theLogoURL' });
this.metaService.addTag({ property: 'description', content: 'MKB is a CMS to help self-directed learning' });
this.metaService.addTag({ property: 'og:type', content: 'website' });

either way thanks for the prompt reply.

What was the problem? Care to elaborate please? I want to see if I was close to find it, since I googled all over the internet, my eyes hurt.

[fulls1z3]

@maikeldotuk well, happy coding

[maikelthedev]

Re:

What was the problem? Care to elaborate please? I want to see if I was close to find it, since I googled all over the internet, my eyes hurt.

[maikelthedev]

Please notify once updated, my rudimentary work-around only worked with the titles, not yet with what's shown on Facebook :'( unfortunately.

I still need it

[fulls1z3]

@maikeldotuk it was related with the new build system to make libraries compatible with angular-cli with universal support.

We switched from webpack to rollup in order to be able to generate all ES2015, ES5 and UMD bundles.

During this transition, the angular-quickstart-lib repo was considered as a model. All was OK, except the moduleId which was stuck unresolved.

I line-by-line compared @ngx-meta/core with angular-quickstart-lib and @angular/core and found the clue: the flatModuleId value just in the tsconfig had to contain the package scope (@ngx-meta).

It took some time to deploy these changes for 7 libraries with 2 branches each (to support both ng2 and ng4) but done now.

Update your deps to 4.0.1 and it should compile in prod mode without a problem.

[maikelthedev]

You're amazing, never seen anyone this efficient. Keep it up!

Thank you very much, adding it now. I've been busy the rest of the day fighting with Morgan the expressjs middleware

UPDATE: I can confirm it happily compiles now with no problems whatsoever. Thank you very much again, you're awesome.

[maikelthedev]

Hey I've solved the SEO problem without Angular Universal, without prerender.io, without anything really. Just a bit of code on the server side to avoid complicating my own existence too much.

The code is there: https://gist.github.com/maikeldotuk/2dcf1bac28e90b7238be19d093a38845

I thought:

If Angular already has to communicate with a Rest APi to get everything anyway and that API is written in Express why not solve the problem within Express, since it has access to all the data and leave Angular alone.

So I used handlebars and some code from npm from someone that detects when whoever is accesing my site is a spider, if it is then it'll render a handlebars page instead of the angular one, the handlebars template has basically all the meta tags I need and it takes the content to fill each one of them from the Mongo DB that it would have accessed if it was ANgular.

The advantage: consumes less resources than pre-rendering. It doesn't render a whooooooooooooooooooooooooooole page, but instead just the meta tags.

I would really appreciate if you have a look at it and give me your opinion The rest of the project of that code is in my profile as restTest, that code is part of server.js (all the way to the bottom of the code) and the template is in the root folder as seo.handlebars