Repository navigation
webpack production build doesnt work with angular RC 5 #1644
Description
Please provide us with the following information:
- OS? Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)
Windows 10 - Versions. Please run
ng --version. If there's nothing outputted, please run
in a Terminal:node --versionand paste the result here:
angular-cli: 1.0.0-beta.11-webpack.2
node: 6.3.1
os: win32 x64 - Repro steps. Was this an app that wasn't created using the CLI? What change did you
do on your code? etc.
Yes. App was created using CLI. Lots of components and usage of a 3rd party library - The log given by the failure. Normally this include a stack trace and some
more information.
Not finding component included in the app module declarations (only one giant app module including everything for now). In example below app-navbar is selector for a component include in app module directive yet I get the following error.
polyfills.c27b87b….bundle.js:2 Unhandled Promise rejection: Template parse errors:
Can't bind to 'brandNavRoute' since it isn't a known property of 'app-navbar'.
1. If 'app-navbar' is an Angular component and it has 'brandNavRoute' input, then verify that it is part of this module.
2. If 'app-navbar' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message.
and in app.module I have
@NgModule({
imports: [BrowserModule, FormsModule],
declarations: [
AppComponent,
NavbarComponent,
...
and in NavbarComponent
@Component({
selector: 'app-navbar',
...
- Mention any other details that might be useful.
Works fine when not given -prod flag. Worked fine with -prod with systemJS. Not 100% certain if ever used -prod with webpack and angular RC4 but likely did with no errors.
Thanks! We'll be in touch soon.
Activity
kylecordes commentedon Aug 11, 2016
I think this is the same issue as angular/angular#10618
You can see a minimum example of the fail/success conditions in this repo:
https://github.com/OasisDigital/rc5-declaration-order
It is not exactly clear to me whether this is CLI problem or Webpack problem or rc.5 problem.
slubowsky commentedon Aug 11, 2016
@kylecordes Thanks. I didn't see that.
Interesting that I had just removed moduleId: module.id from all my components metadata due to angular/angular#10626. Putting them back AND making sure to put the components in reverse order makes this particular problem go away - at least for now. (either fix alone didn't help me)
Don't know if anything actually works yet though as I'm on to the next issue. Lots of fun. I'm starting to think I should stay on systemJS and angular RC4 and wait for all this to blow over (around RC 10 maybe?)
krishollenbeck commentedon Aug 11, 2016
I had the same issue. After adding
moduleIdback it made that error disappear. But that doesn't seem right. Cause it introduced a new errorTypeError: uri.match is not a function. Which appears to be related to moduleId. angular/components#974billdwhite commentedon Aug 11, 2016
Same problem here. I removed the moduleId entries and it works when I build without --prod. However, when I use the --prod flag, I start getting the "Unhandled Promise rejection: Template parse errors: Can't bind to ...." errors. However, when I restore the moduleId entries, it still doesn't work. Instead I get the "t.match" exception. So basically, I cannot do a prod build.
onedotover commentedon Aug 12, 2016
I had this issue as well. I actually think it's related to Webpack, UglifyJS, and the mangle option.
I had to get production running quickly, so I updated webpack-build-production.ts with this
Adding keep_fnames fixed the issue for me. This was only happening for me with nested components. I'm going to put together a quick test environment with a nested component to see if I can narrow down the issue and also to test the ordering solution above.
abner commentedon Aug 12, 2016
This worked for me!
changed mangle configuration to mangle: { screw_ie8 : true, keep_fnam…
fix(Compiler): production build was not rendering some components
abner commentedon Aug 12, 2016
I just submited a pull request.
As we can see in this pull request this was the choice on angular 2 build itself.
reflog commentedon Aug 12, 2016
I hope this merged added soon. Right now I have to work with 'ng build' without prod and it is annoying.
fix(prod): fix function name mangling
Fixes nested components
-working production build via setting...
steveschmitt commentedon Apr 10, 2017
@filipesilva The
keep_fnamesfix is no longer in the webpack config for production. Why?steveschmitt commentedon Apr 10, 2017
Ah, it's because Angular has changed so that it doesn't use the function names anymore. Unfortunately, my app uses them so it still breaks without
keep_fnamesangular-automatic-lock-bot commentedon Sep 7, 2019
This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.
Read more about our automatic conversation locking policy.
This action has been performed automatically by a bot.