Angular-cli: Hybrid app build fails after upgrade to angular 8

[iyhammad]

🐞 bug report

Is this a regression?

Yes, the application was working fine till 7.1.x

Description

I've relatively big hybrid app where angularjs is on a separate route. the app build broken after upgrade to angular 8

🔬 Minimal Reproduction

ng build --aot=true

🔥 Exception or Error

The below error happens for every html file in the angularjs part of the app.

ERROR in ./src/ng1/app/main/views/employee/endOfService/endOfService.html 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> 
|     

|         

ERROR in ./src/ng1/app/main/views/employee/contract/list/list.html 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> 
| 
| 

🌍 Your Environment

Angular Version:

Angular CLI: 8.0.1
Node: 12.3.1
OS: win32 x64
Angular: 8.0.0
... animations, cdk, common, compiler, compiler-cli, core, forms
... language-service, material, material-moment-adapter
... platform-browser, platform-browser-dynamic, router, upgrade

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.800.1
@angular-devkit/build-angular     0.800.1
@angular-devkit/build-optimizer   0.800.1
@angular-devkit/build-webpack     0.800.1
@angular-devkit/core              8.0.1
@angular-devkit/schematics        8.0.1
@angular/cli                      8.0.1
@angular/flex-layout              8.0.0-beta.26
@ngtools/webpack                  8.0.1
@schematics/angular               8.0.1
@schematics/update                0.800.1
rxjs                              6.5.2
typescript                        3.4.5
webpack                           4.30.0

[adammedford]

Related to https://github.com/angular/angular-cli/issues/14566

I have a similar scenario but my html and js from the angularjs application are loaded separately.

JS is prefixed with babel-loader;

requireAll(require.context('babel-loader!../', true, /.js$/));

HTML is prefixed with raw-loader:

requireAll(require.context('raw-loader!../../../', true, /.html$/));

Just replace with whatever loader you need.

[iyhammad]

@adammedford Thank you for your reply. Could you please elaborate more on the way you load your angularjs files and where to put the mentioned lines.

[iyhammad]

Thank you @adammedford you inspired this.
I resolved the issue by changing every require for html from
template: require('./path-to-html-file'),
to
template: require('raw-loader!./path-to-html-file'),

[adammedford]

@iyhammad glad it worked out for you

I wasn't sure how much I needed to go into my own setup since its really bizarre. I will elaborate incase anyone else runs into this. The AngularJS portion of my app was written pre-bundlers so everything was an IIFE module and originally was copied as a script tag to the Window.

I should have left _requireAll_ out of that but I forgot it was something I wrote. require.context is like require except it accepts a pattern that instructs Webpack to include all the matching files.

[alan-agius4]

Closing as the issue seems to have been solved.

If the problem persists, please open a new issue following our submission guidelines.

A good way to make a minimal repro is to create a new app via ng new repro-app and add the minimum possible code to show the problem. Then you can push this repository to github and link it here.

[angular-automatic-lock-bot[bot]]

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._}