0

I am using angular 6 and angular cli 1.7 with exported webpack, the requirement is to use amd module and import html on to the component.

import * as html from 'text!./app.component.html';
@Component({
   selector: 'app-root',
   template: html
})

If I execute "npm start" I will error out with exception in terminal 

ERROR in ./src/app/app.component.ts
Module not found: Error: Can't resolve 'text' in 
'...../src/app'
@ ./src/app/app.component.ts 11:0-83:2
@ ./src/app/app.module.ts
@ ./src/main.ts
@ multi (webpack)-dev-server/client?http://localhost:4200 ./src/main.ts

I started looking at webpack loaders and looking at one post I used 

"resolveLoader": {
    "alias": {
       "text": 'raw-loader'
    }
}

this helped me to compile, but the app would error out. So in dev tools I see the logs like 

Uncaught Error: The periodical "launch" failed with error "Error: Template parse errors:
Unexpected closing tag "div"

I am not sure how to go about now :( How do I still use imports like 'text!./app.component.html' and still be able to compile and run.

Please help.

In module.d.ts I have 

declare module "text!*" {
    const value: string;
    export = value;
}
Mathew
  • 49
  • 1
  • 3
  • why did you use Webpack to load HTML. ANgular can load any html file too – miladfm Dec 16 '19 at 18:32
  • I am using angularcli to serve up my compiled code so that I can launch in localhost. since I do not have complete control on angularcli, I ejected cli to webpack. hence I am using webpack. – Mathew Dec 16 '19 at 19:20
  • AngularCLi will be run for compile, transform and rendering first. after finish all of them, then call webpack to merge all of them together and optimize it. – miladfm Dec 16 '19 at 19:25
  • I thing there is no way to something that you want – miladfm Dec 16 '19 at 19:26
  • AngularCLI does not compile due to the 'import', so thats one of the reasons I ejected the webpack from CLI to see if I can work with loaders. – Mathew Dec 16 '19 at 19:33

0 Answers0