To prevent the error message related to 'ng-template' in a Web Component, make sure to include the "CUSTOM_ELEMENTS_SCHEMA" within the component's code. Adding this element will help suppress any errors associated with the usage of <ng-template>

[email protected]?main=browser:355 Unhandled Promise rejection: Template parse errors: 'ng-template' is not a known element: 1. If 'ng-template' is an Angular component, then verify that it is part of this module. 2. If 'ng-template' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->] ; Task: Promise.then ; Value: Error: Template parse errors: 'ng-template' is not a known element:

I've made the following adjustment in my App.module.ts file:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA ,NO_ERRORS_SCHEMA}  from '@angular/core';


@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        ReactiveFormsModule,
        HttpModule,
        JsonpModule,
        CKEditorModule,
        Ng2DatetimePickerModule,
        Ng2DragDropModule,
        DragulaModule,
        ModalModule.forRoot(),
        MaterialModule.forRoot(),
        BootstrapModalModule,
        RouterModule.forRoot(appRoutes, {useHash: true})
    ],
    declarations: [something
    ],
    providers: [],
    bootstrap: [AppComponent],
    schemas: [ CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA ]
})

PACKAGES.JSON

"dependencies": {
    "@angular/common": "2.2.1",
    "@angular/compiler": "2.2.1",
    "@angular/core": "2.2.1",
    "@angular/forms": "2.2.1",
    "@angular/http": "2.2.1",
    "@angular/platform-browser": "2.2.1",
    "@angular/platform-browser-dynamic": "2.2.1",
    "@angular/router": "3.2.1",
    "bootstrap": "^3.3.7",
    "core-js": "^2.4.1",
    "jquery": "~3.1.1",
    "rxjs": "5.0.0-beta.12",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.6.23"
  },



"devDependencies": {
    "@angular/compiler-cli": "2.2.1",
    "@types/jasmine": "2.5.38",
    "@types/node": "^6.0.42",
    "angular-cli": "1.0.0-beta.21",
    "codelyzer": "~1.0.0-beta.3",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "4.0.9",
    "ts-node": "1.2.1",
    "tslint": "3.13.0",
    "typescript": "~2.0.3",
    "webdriver-manager": "10.2.5"
  }

Despite these changes, the issue persists.

Answer №2

  1. Ensure the angular-cli is up to date: https://github.com/angular/angular-cli/wiki/stories-1.0-update
  2. Update typescript and consider updating your @angular packages as well. Your packages, especially angular-cli, are quite outdated so brace yourself.
    • Main packages I updated:

dependecies: {
  "@angular/animations": "^4.0.2",
  "@angular/common": "^2.3.1",
  "@angular/compiler": "^2.3.1",
  "@angular/compiler-cli": "^2.4.10",
  "@angular/core": "^2.3.1",
  "@angular/forms": "^2.3.1",
  "@angular/http": "^2.3.1",
  "@angular/material": "^2.0.0-beta.3",
  "@angular/platform-browser": "^2.3.1",
  "@angular/platform-browser-dynamic": "^2.3.1",
  "@angular/platform-server": "^4.0.0",
  "@angular/router": "^3.3.1"
}
devDependencies: {
  "@angular/cli": "^1.0.0",
  "typescript": "^2.2.2"
}

  1. npm install @angular/material && npm install hammerjs —-save
    • Add /node_modules/hammerjs/hammer.js in angular-cli.json
  2. The use of MaterialModuleis no longer recommended. Check out https://github.com/angular/material2/releases
    • Import individual modules into your app.module, export accordingly, then simply include tags in your HTML.

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

The 'RegExpExecArray | null' type is required to include a method '[Symbol.iterator]()' which returns an iterator to iterate through its values

As someone who is new to TypeScript, I have a good understanding of the basics but recently came across a typecast error that I am struggling to solve. const [full, id]: string | null = /.*media\/[^\/]+\/(.*)/.exec(item.uri) When it comes t ...

Want to learn how to integrate React-pdf (@react-pdf/renderer) with TypeScript on NodeJS and Express JS?

I am encountering difficulties running React-Pdf (@react-pdf/renderer) with TypeScript on an Express JS server. I have attempted to use babel but encountered errors that I cannot resolve. build error error error You can find the Github repository for t ...

Check the integrity of a combined data type with Joi

I have a union type called PaymentTerm: type PaymentTerm = | { type: 'AdvancePayment' } | { type: 'PaymentGoal'; netPaymentDays: number } To validate it, I am using the Joi.alternatives method: Joi.object({ type: Joi.stri ...

What could be causing the elements in my array to appear as undefined?

https://i.stack.imgur.com/ze1tx.png I'm stuck trying to understand why I can't extract data from the array. const usedPlatformLog: Date[] = [] users.forEach(el => { usedPlatformLog.push(el.lastUsed) }) console.log(usedPlatformLog) // disp ...

Angular2 Error -- The server is unable to locate the resource at http://localhost:1595/angular2/http

Struggling with getting my first Angular2 app up and running. I keep encountering the error message "The server has not found http://localhost/angular2/http". All other Angular elements are functioning correctly, so it appears to be a problem specific to ...

Unusual behavior and confusion encountered with loadChildren in Angular 7 routing

I've encountered a strange behavior while using loadChildren in my application and I'm quite confused about why it's happening. Here is the content of my app-routing-module.ts: const routes: Routes = [ { path: '', redire ...

Angular 4: Leveraging a directive as a universal constant

I am looking to develop a directive that allows me to utilize a template variable in order to access a global variable, much like $rootScope in Angular.JS. The goal is to avoid having to inject a service into every component where I need access to the vari ...

Crystal-clear TextField component in Office UI Fabric

Seeking advice on how to clear a masked text field from Office UI Fabric using a button. Does anyone have a solution for this? I attempted to set the value using a state, but unfortunately, it did not work as expected. ...

Cookie Setting Disregarded

The browser is not recognizing the csrf cookie sent by my backend server. https://i.sstatic.net/YVcyj.jpg The request is being initiated through Angular (2) from like this: get() { let headers = new Headers({ 'Content-Type' : 'a ...

What is preventing me from retrieving the attribute value from my custom directive?

The angularjs code: app.directive('test', function(){ return { restrict: 'A', scope: { myId: '@' }, link: function(scope) { alert(scope.myId); } } }); In the directive, there is a scope: { ...

TypeScript: a sequence of symbols representing a particular <type>

Perhaps I'm going crazy. I have a roster of potential nucleotides and a corresponding type: const DNA = ['G', 'C', 'T', 'A'] as const; type DNA = typeof DNA[number]; So, a DNA strand could be a sequence of an ...

Angular2 - Integration and utilization of the datepicker component

Is there a way to retrieve the selected date from an input and wrap it in a <p> tag? I've been attempting to use the jQueryUI datepicker and have tried binding events like change and click, but haven't had any success. Can anyone offer som ...

Developing UIs in React that change dynamically according to the radio button chosen

Problem Statement I am currently developing a web application feature that computes the heat insulation factor for a specific area. You can view the live demonstration on Codesandbox <a href="https://codesandbox.io/p/github/cloudmako09/btu-calc/main?im ...

Transitioning to a mixed Angular and AngularJS application: encountering TypeScript and AngularJS module import issues

Our team is currently working on migrating an AngularJS application to Angular, using a gradual approach. Our goal is to create new components in Angular and upgrade existing AngularJS components one by one while ensuring that the application remains funct ...

I'm curious as to why my table header changes color when there is no CSS and I haven't styled the table in my HTML

Hey there, I need some help with my page setup: https://i.sstatic.net/EUsUC.png The section labeled "Detailansicht Telefonnummer" has a mysterious blue background that's not coming from the empty CSS file or Angular component. Any insights on where ...

How to access the component instance in Angular through router events

I am currently working on incorporating a title service into my Angular 10 application. My goal is to subscribe to router events, access the activated route's component, check if it has a title() getter, and then use that information to set the page&a ...

Determining the quantity of variations within a union in Typescript

Is it possible to determine the number of types in a union type in Typescript, prior to runtime? Consider the following scenario: type unionOfThree = 'a' | 'b' | 'c'; const numberOfTypes = NumberOfTypes<unionOfThree>; c ...

Tips for preserving shopping cart in Angular?

As I delve into Angular, my goal is to create a straightforward ecommerce platform that allows users to add items to their cart, view them, and complete a checkout process. To accomplish this, I have set up three components: the products list, cart, and c ...

"Unleash the power of a solo spa built with Angular and

When working with Single spa and Angular, how do we tackle runtime issues that occur when using shared services, modules, components, etc. across microfrontends? For instance, I have a microfrontend called 'container' which is always loaded and c ...

Modify the appearance of certain text within an input field

I need some help adding style to specific text within an input field. For example, if the user types in "Hello world" and the special text is "world" I want to achieve this result: https://i.sstatic.net/Ozd6n.png This is what my HTML code looks like: & ...