How can you exclude templates in an Angular 7 CLI build to incorporate MVC views?

Currently, I am exploring the latest updates in Angular (7+) and CLI. After completing parts of the 'Tour of Heroes' tutorial, I have been able to use 'ng build' to generate production files.

However, a key requirement for me is using MVC views for component templates.

Instead of

templateUrl: './app.component.html'

I prefer to use

templateUrl: '/Template/Index'

for various reasons, such as translated templates. I understand that this may not align with the traditional Angular approach.

Upon implementing this code, 'ng build' fails to work:

ERROR in ./src/app/app.component.ts

Module not found: error: Can't resolve './/Template/Index' in 'D:\Angular\TourOfHeroes\TourOfHeroes\src\app'

Despite my extensive research, I have been unable to find a solution on how to exclude template building. The suggested method, ng eject, is outdated. Additionally, ngx-build-plus does not seem to address my specific issue.

What steps can I take to resolve this problem?

UPDATE:

The question How to using MVC views (*.cshtml) as templates in Angular 2? is irrelevant to my situation. While I am familiar with integrating MVC views into Angular, my main concern is instructing 'ng build' to skip these non-static templates.

Answer №1

If you want to avoid including templates in your builds, you may need to consider using webpack, rollup, or systemjs-builder. The Angular CLI does not currently have support for this kind of scenario.

It's important to note that when building in development mode, aot (ahead of time compilation) does not easily work with dynamic templates.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Finding a solution for the network error encountered during the execution of XMLHttpRequest.send in the specified file path (...distfxcoreservermain.js:200

Having recently delved into Angular, I successfully completed the development of my angular web application. While using ng serve for production, everything ran smoothly. However, after incorporating angular universal and attempting npm run dev:ssr or np ...

Bundle Angular library exports along with its corresponding models

I am in the process of developing an angular library for our company's private npm repository. Within this library, I aim to export classes that are utilized (injected via @Input()) in the library components. Here is a sample model: export class AdsT ...

Issue with Angular 6.1.0: Scroll position restoration feature malfunctioning

RouterModule.forRoot(routes, { scrollPositionRestoration: 'enabled' }) In the latest version 6.1.0, there is a new feature that aims to restore the scroll position after navigation. Unfortunately, I encountered an issue where the scroll restorat ...

Issues encountered when retrieving data with ReactiveForms

My current project involves gathering data using ReactiveForms. Here is the structure of my setup: Initially, I create a modal to gather the necessary data: async present(){ const modal = await this.modalController.create({ component: dataComponent, cs ...

Top method for continuously updating the position of DOM elements in Angular 2

Currently, I am in the process of developing a game using Angular (version 4). I understand that direct manipulation of the DOM is typically not recommended when working with Angular. However, for the particular functionality I'm trying to achieve, I& ...

Navigating the way: Directing all TypeScript transpiled files to the build folder

I am currently working on a project using Angular2/Typescript, and I have the tsconfig.js file below: { "compilerOptions": { "module": "commonjs", "moduleResolution": "node", "target": "es5", "sourceMap": true, ...

To properly format the date value from the ngModel in Angular before sending it to the payload, I require the date to be in the format

When working with Angular 9, I am facing an issue where I need to format and send my date in a specific way within the payload. Currently, the code is sending the date in this format: otgStartDate: 2021-07-20T09:56:39.000Z, but I actually want it to be for ...

The issue with session storage persisting even after closing the iframe

Encountering a persistent issue where the sessionStorage remains populated even after closing an iframe and opening another one with the same destination. I assumed that the sessionStorage would be reset and start afresh each time. The iframe is contained ...

Having trouble accessing the boolean value of a webComponent Stenciljs input checkbox within an Angular Reactive form

When using my stenciljs input checkbox component in Angular inside a reactive form, I encounter an issue where the value received is inverted and stored as a string rather than a boolean. The console.log output seems correct, but the form group value is ...

Using Angular, you can incorporate a dynamic href inside interpolation by using

Looking for a way to include a redirecting link within the response of string interpolation. I am incorporating the API response value into the interpolation binding. For instance, if my response is, "This site is not working. please contact google f ...

What steps should I take to fix this Angular 8 error?

Encountered an issue in ../node_modules/@angular/http/src/backends/jsonp_backend.d.ts:1:28 - error TS2307: Module 'rxjs/Observable' not found. 1 import { Observable } from 'rxjs/Observable'; ~~~~~~~~~ ...

Error: Unable to locate Angular2 Custom Service

I have implemented a custom service to populate a list of people in my HTML. Below is the code for my custom service: app.peopleListService.ts import { Injectable } from '@angular/core'; import { Person } from "../model/peopleModel"; @Injecta ...

Encountering a problem in Angular 2 when initiating a project

I recently started learning Angular 2. I set up my project and attempted to launch it using npm. Initially, everything was working smoothly, but after a few days, when I tried to start it again, an error appeared in the command prompt. SyntaxError: Unexpe ...

Enhancing the KeyValuePair by incorporating additional value or parameter

I currently have a List<KeyValue<string, int>> that I utilize in the View of one of my applications. While it functions as intended, I am interested in expanding it by potentially incorporating an additional parameter/value to the KeyValue pair ...

Automatically focus on the button

Encountering an issue where setting focus on a button upon the input key enter event is not working. While setting focus on inputs functions properly, using the same code on a button does not work at all. Sample HTML Component: <form [formGroup]=&apos ...

Having trouble uploading a file with Angular and Spring

The issue of uploading files to BE is causing me some trouble. I have been struggling to get it right, even with the code below: Angular service public saveFile(file: File): Observable<any> { const formData = new FormData(); formDat ...

Angular 2's Conditional Validation: A Comprehensive Guide

Angular 2 offers straightforward validation, which is a great feature. However, the challenge lies in making a required field optional based on another field's selection. Below are the validation rules: this.contractsFilter = this.fb.group({ selec ...

Getting the most out of TypeScript Enum in Angular 6

I have a situation where I am storing the numeric value of an enum in my database and then displaying it in another part of the UI. Now, I need to retrieve the string value linked with that numeric value from the enum in a separate Angular component. Here ...

Tips for effectively jasmine testing with the createSpyObj function, where class properties are defined as spies

When attempting to create a mock service with set-only properties, I encountered errors indicating that the value was undefined despite following the guidance in the documentation here. I want to be able to track the values of these properties during test ...

Tips for testing an Angular 6 service with a dependency that utilizes private methods and properties to alter the output of public methods and properties

I've encountered a challenge while attempting to write a Jasmine/Karma test for an Angular 6 app. The test is for a service in my application that relies on another service with private properties and methods, causing my tests to consistently fail. W ...