Angular cli - import html as a module with a prefix. Webpack loader not working

Question

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;
}