Angular-cli: 1.5.0-beta Production build compiles, but bootstrap errors (missing templates/styles)

Created on 4 Oct 2017 · 4Comments · Source: angular/angular-cli

Bug Report or Feature Request (mark with an `x`)

- [x] bug report -> please search issues before submitting
- [ ] feature request

Versions.

@angular/cli: 1.5.0-beta.3
node: 6.11.0
os: win32 x64
@angular/animations: 5.0.0-rc.0
@angular/cdk: 2.0.0-beta.11
@angular/common: 5.0.0-rc.0
@angular/compiler: 5.0.0-rc.0
@angular/core: 5.0.0-rc.0
@angular/forms: 5.0.0-rc.0
@angular/http: 5.0.0-rc.0
@angular/material: 2.0.0-beta.11
@angular/platform-browser: 5.0.0-rc.0
@angular/platform-browser-dynamic: 5.0.0-rc.0
@angular/router: 5.0.0-rc.0
@angular/cli: 1.5.0-beta.3
@angular/compiler-cli: 5.0.0-rc.0
@angular/language-service: 5.0.0-rc.0
typescript: 2.5.3

Repro steps.

Upgraded cli from 1.4.4 to 1.5.0-beta.3 then Production builds started to error on bootstrap with html/css 404s i.e. ng serve --prod

ng serve development mode works fine.

I couldn't reproduce it with a new cli project, so there must be some different configuration in my existing project (which I'm still trying to find!), but 1.5.0-beta.0 seemed to have the same error at bootstrap.

Downgrading back to 1.4.4 allows me to use AOT builds again.

Funnily enough, if I manually copy all *.component.html and *.component.css to the /dist directory, my build will work with 1.5.0-betas.

I thought webpack was supposed to "pack" all the templates into javascript ? PS I'm not using any lazy loading

The log given by the failure.

cliaotbug

Desired functionality.

Bootstrap with AOT production builds in 1.5.0-betas as it does with 1.4.4

Mention any other details that might be useful.

AOT works with 1.4.4 but not 1.5.0-betas
Manually copying templates to dist directory enables AOT to work (but with obviously more HTTP requests to fetch the individual component html and css)
Can't reproduce on fresh ng new
Still trying to figure out difference between my project and fresh ng new (closed source project, sorry can't share link)
I've tried deleting node_modules and reinstalling
Using yarn package manager v1.1.0

3 (nice to have) confusing

Source

dharders

👍3

Most helpful comment

OK I think I found the culprit.

I bootstrap angular within a local function in main.ts as my project requires checking the environment as when to bootstrap. i.e. Are we electron or cordova ? Do we need to execute splashscreen / statusbar logic prior to bootstrap ?

So my code below was similar to this (working in 1.4.4):

let bootstrapAngular = () => {
  platformBrowserDynamic().bootstrapModule(AppModule)
    .catch(err => console.error('BootstrapErr:', err));
}

// if else statement, with splash screen logic etc and a call to bootstrapAngular()

To get it to work with 1.5.0-betas I had to export the function in order for the AOT compiler to work, i.e. dynamic boot logic. Not sure if this intended as I couldn't find any documentation specifying this requirement/change or it just worked previously by fluke (in 1.4.4)

New workaround:

export const bootstrapAngular = () => {
  platformBrowserDynamic().bootstrapModule(AppModule)
    .catch(err => console.error('BootstrapErr:', err));
}

I don't have to manually copy templates/styles etc to /dist folder now. It is also now more efficient with less HTTP requests (like 1.4.4) as the templates etc are packed into the javascript.

So in summary, not sure if this is a bug in the latest cli, or one of its dependencies, or we just need more obvious documentation. i.e. use export const instead of let

I'm happy with the simple workaround, just not happy that it took all day to find it ;)

I'll leave this issue open until someone from the team has a chance to respond or for others who run into the same scenario. But feel free to close if this is not a bug and is just how we do AOT now.

dharders on 4 Oct 2017

👍3

All 4 comments