Angular-cli: BUG: "If 'ng-template' is an Angular component, then verify that it is part of this module."

[darrenbrett]

My dev environment:
MacBook Air, OS X El Capitan 10.11.6
@angular/cli: 1.0.1
node: 7.4.0
NPM: 4.6.1

After running an "npm install", and then running "ng s", my app is compiling:

* NG Live Development Server is running on http://localhost:4600 *
Hash: 2c393e67e8c2251c234e
Time: 56121ms
chunk {0} main.bundle.js, main.bundle.js.map (main) 1.5 MB {3} [initial] [rendered]
chunk {1} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 239 kB {4} [initial] [rendered]
chunk {2} styles.bundle.js, styles.bundle.js.map (styles) 87.4 kB {4} [initial] [rendered]
chunk {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 5.64 MB [initial] [rendered]
chunk {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]
webpack: Compiled successfully.

But in the browser the app load stalls, and I get this error in the console:

zone.js:567 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 ->]
   MdAutocomplete@0:0 ; Zone: ; Task: Promise.then ; Value:

I am not using "ng-template" anywhere in my app. In addition I have run a "find" over my entire "node_modules" folder, and it doesn't show up there either. I am using "material", and have heard that can be an issue here. But it didn't show up in my "find" over the "node_modules".

My package.json looks like this:

{
  "name": "cli-abc",
  "version": "0.0.1",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "build": "ng build",
    "start": "ng serve --proxy-config proxy.conf.json",
    "test": "ng test",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^2.3.1",
    "@angular/compiler": "^2.3.1",
    "@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/router": "^3.3.1",
    "@ng-idle/core": "^2.0.0-beta.8",
    "@ng-idle/keepalive": "^2.0.0-beta.11",
    "@ngtools/webpack": "^1.3.1",
    "@types/socket.io": "^1.4.29",
    "@types/socket.io-client": "^1.4.29",
    "angular-in-memory-web-api": "~0.3.2",
    "angular2-chartjs": "^0.2.0",
    "angular2-markdown": "^1.6.0",
    "angular2-moment": "^1.3.3",
    "angular2-perfect-scrollbar": "^2.0.6",
    "chart.js": "^2.5.0",
    "core-js": "^2.4.1",
    "mydatepicker": "^1.10.1",
    "ng2-pagination": "^2.0.1",
    "rxjs": "^5.3.1",
    "ts-helpers": "^1.1.2",
    "zone.js": "^0.8.9"
  },
  "devDependencies": {
    "@angular/animations": "4.1.0",
    "@angular/cli": "^1.0.1",
    "@angular/compiler-cli": "^2.3.1",
    "@types/jasmine": "2.5.38",
    "@types/node": "^6.0.42",
    "codelyzer": "~2.0.0-beta.1",
    "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.13",
    "ts-node": "1.2.1",
    "tslint": "^4.3.0",
    "typescript": "~2.3.2"
  }
}

[grizzm0]

@angular/material is now using angular4 which has renamed the template component to ng-template. You're getting this error as you're still using angular2 but depend on a package that depends on angular4.

Update to angular4 and it should work just fine.

[filipesilva]

Closing as answered by @grizzm0, cheers!

[darrenbrett]

@filipesilva & @grizzm0 , I thought that this was not supposed to cause a breaking change until Angular 5. Isn't that what the docs say? So why would this be breaking on me now with my current configuration? Perhaps this issue should be re-opened?

[grizzm0]

It's breaking because @angular/material is using an angular4 component. If it was your own project you could happily keep using the template component throughout angular4 (but with a deprecation notice).

But @angular/material has already migrated to angular4 and thus replaced template with ng-template which doesn't exist in your version of angular.

[darrenbrett]

@grizzm0, the challenge is, after trying to go ahead and upgrade to Angular 4, I'm left with a (different, and totally non-explicit) console error, which I discuss here: https://github.com/angular/angular-cli/issues/6146. So I'm kind of caught between a rock and a hard place in terms of having a working app. Any ideas as to how I can get this working in one of the two versions?

[grizzm0]

You can lock to @angular/[email protected] until all your dependencies have been updated to angular4.

[darrenbrett]

I will try that. Thanks.

[darrenbrett]

@grizzm0 Thanks, got my app working after locking to @angular/[email protected].

[keivankashani]

Maybe This is for name of htmltag component
You use in htmlsomething like this <mycomponent></mycomponent>

You must use this <app-mycomponent></app-mycomponent>

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