Angular-cli: AOT Build on Hybrid Application does not include html into the main.bundle

[schmitch]

Bug Report or Feature Request (mark with an x)

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

Versions.

@angular/cli: 1.1.1
node: 8.1.1
os: darwin x64

Repro steps.

• create a Angular and AngularJS application bootstrap the AngularJS 1 application with:
  this.upgrade.bootstrap(document.body, [ng1module.name], {strictDi: true});
• add components with templateUrl: ./login.html
• ng build --prod will now not include the login.html to the main.bundle.js, (--aot false, works)

The log given by the failure.

404

Desired functionality.

it should also include AngularJS 1.X html templates into the main.bundle.js (I mean it works without aot..)

Mention any other details that might be useful.

Well it might be helpful but our application layout is kinda special, we imported all of our AngularJS application into the Folder:
src/old/
and our components might be in any folder there, i.e. everything like that is valid:

src/old/login/login.js
src/old/login/login.html
src/old/crm/list/customer-list.js
src/old/crm/list/customer-list.html
src/old/crm/customer/detail/customer-detail.js
src/old/crm/customer/detail/customer-detail.html

sadly without --aot our main.bundle and vendor.bundle are way to big (3mb-4mb together).

Edit: Strange thing is that with --aot enabled it will actually have templateUrl, while without in development/production it will produce: template: e("WZfy"), and the function correctly for every template.

[filipesilva]

The CLI doesn't support AngularJS template imports currently. This might be possible with slight tweaks since it works without --aot, but is low prio. PRs are welcome.

[schmitch]

I probably wanted to take a look into it since it seems more trivial since it's supported without aot. However I'm relativ new to a bigger typescript project/npm module world

[schmitch]

@filipesilva @hansl (I would actually make this issue happen, that's why I'm first want to ask what way would be the best)
I've taken a look at this last night and found out that in JIT mode angular does not care if it is angularjs or angular2+ it just __webpack_require__ both templates.

This happens here: https://github.com/angular/angular-cli/blob/master/packages/%40ngtools/webpack/src/angular_compiler_plugin.ts#L643

Currently since angular can't distinguish between templates it would probably be enough to just add a compiler flag that does some kind of regex/string over the resource path and always append resources that matches this string/regex

so the code will be something like that:

f (this._JitMode) {
      // Replace resources in JIT.
      this._transformers.push(replaceResources(isAppPath));
} else if (this._compilerOptions.appendResources) {
    this._transformers.push(this._filterResources(replaceResources(isAppPath), this._compilerOptions.appendResources));
}

(filterResources will then try to match either by just string.contains(string) or be regex the string)

I think that would be the best way forward since everything else might be extremly hard (checking if a resource is actually a angular resource (style, template), replace the resource always, etc...)

WDYT?

[jiahuay]

I'm getting the same error. The --aot false does not work for me. Is there any fix or workaround?

@angular/cli: 1.7.3
node: 9.8.0

[tiaguinho]

@filipesilva do you think this still makes sense?
With Angular Elements, we can create a component and put inside AngularJS, which makes more sense to me.

[mgechev]

@schmitch although this feature seems useful in some specific use cases, we should be careful with what features we introduce into the CLI so that we don't let its scope leak too much.

Let's keep this feature outside of the CLI at this point. I'd recommend you to look at the new architect API which will let you extend the core functionality.

If I'm missing something important, please feel free to open a new issue referencing this one.

[juliancarrivick]

If it helps some people, I have got AOT working in a hybrid app by not using templateUrl, but importing the HTML as a string using the module loader, then using template in the component/route definitions.
You'll need to add a html.d.ts to your project with the contents:

declare module '*.html' {
    const value: string;
    export default value
}

Then import your template using import html from './template-file.html and it will get bundled :)

[rudivanbiljon]

If it helps some people, I have got AOT working in a hybrid app by not using templateUrl, but importing the HTML as a string using the module loader, then using template in the component/route definitions.
You'll need to add a html.d.ts to your project with the contents:

declare module '*.html' {
    const value: string;
    export default value
}

Then import your template using import html from './template-file.html and it will get bundled :)

Can you please provide more info of how you got it to work (an example)? Did you have to make any changes to your webpack config?

[juliancarrivick]

You can look at the code I'm using to get it working on GitLab: https://gitlab.com/juliancarrivick/band-manager-frontend (blasphemy I know 😛). It's just standard AngularCLI - nothing fancy there.
You can see html.d.ts in src/ and you can see an example of the import in booleanGridEditor-directive.ts

[rudivanbiljon]

You can look at the code I'm using to get it working on GitLab: https://gitlab.com/juliancarrivick/band-manager-frontend (blasphemy I know 😛). It's just standard AngularCLI - nothing fancy there.
You can see html.d.ts in src/ and you can see an example of the import in booleanGridEditor-directive.ts

Thank you! I went with a similar approach by just requiring the html in the template of the components. I did not have to make any other changes (I don't have a webpack config, so angular's own way of handling it worked). I'm using Angular 7.

...
template: require('./hello-world.component.html')
controller: [
....

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