How to load templates in angular Hybrid application? - angularjs

Question

I have recently migrated the app from angular 1.7 to Angular 8. On loading the application it was unable to load the templates.
Then I used require('./tempalte-name') in the directives to load. But then it gave exception that
"Module parse failed: Unexpected token (1:0)"
I used raw-loader in this way => require('raw-loader!./template-name')
There were no errors in the console. But in the browser window, the template is being shown as [object Module].
When I replace the require('raw-loader!./template-name') with raw template e.g 'Test'. It displays correctly
Is there any way to get the template html instead of [object Module].

Answer 1

try this
// #ts-ignore
import * as TEMPLATE from 'raw-loader!./myComponent.html';
...
{
...
template: TEMPLATE.default
...
}
Int works fine for me (angularjs + angular9 + angular-cli)

Answer 2

Try downgrading #angular-devkit/build-angular to version 0.802.2.
Since 0.803.0 it shows [object Module]
Or you can try completely different approach - instead of using template: require() you can use templateUrl but then you have to copy html files to destination folder.
To do that, you have to change angular.json and set assets
{
"glob": "**/*.html",
"input": "apps/lopa/src/app-ajs",
"output": "/app-ajs"
},
And in your component use full path like this:
templateUrl: 'app-ajs/components/component-name.html'