Error in Ionic 4 + dynamic forms

Hi, I got dynamic form working in an old project (probably some setting there) which can make it work, somehow when I tried to create a new project and tried to implement dynamic form only, I got this error message:

ERROR Error: Uncaught (in promise): Error: No template specified for component HomePage
Error: No template specified for component HomePage
at syntaxError (compiler.js:2430)
at DirectiveNormalizer.push…/node_modules/@angular/compiler/fesm5/compiler.js.DirectiveNormalizer.normalizeTemplate (compiler.js:16194)
at CompileMetadataResolver.push…/node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.loadDirectiveMetadata (compiler.js:18392)
at compiler.js:26036
at Array.forEach ()
at compiler.js:26035
at Array.forEach ()
at JitCompiler.push…/node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._loadModules (compiler.js:26032)
at JitCompiler.push…/node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:26010)
at JitCompiler.push…/node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler.compileModuleAsync (compiler.js:25970)
at resolvePromise (zone.js:831)
at resolvePromise (zone.js:788)
at zone.js:892
at ZoneDelegate.push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)

I even copied the exact same code to new project, still no luck, probably
I need to change some setting or import package? I actually just try the
example in this link:
https://angular.io/guide/dynamic-form

My home.page.ts:


import { Component } from ‘@angular/core’;

@Component({
selector: ‘app-home’,
//templateUrl: ‘home.page.html’,
styleUrls: [‘home.page.scss’],
})
export class HomePage {

constructor() {}

}

home.module.ts:


import { NgModule } from ‘@angular/core’;
import { CommonModule } from ‘@angular/common’;
import { IonicModule } from ‘@ionic/angular’;
import { FormsModule } from ‘@angular/forms’;
import { RouterModule } from ‘@angular/router’;

import { HomePage } from ‘./home.page’;

@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild([
{
path: ‘’,
component: HomePage
}
])
],
declarations: [HomePage]
})
export class HomePageModule {}

app.component.ts:


import { Component } from ‘@angular/core’;

import { Platform } from ‘@ionic/angular’;
import { SplashScreen } from ‘@ionic-native/splash-screen/ngx’;
import { StatusBar } from ‘@ionic-native/status-bar/ngx’;
import { QuestionService } from ‘./question.service’;

@Component({
selector: ‘app-root’,
templateUrl: ‘app.component.html’
})
export class AppComponent {
questions: any;

constructor(
private platform: Platform,
private splashScreen: SplashScreen,
private statusBar: StatusBar,
private questionService: QuestionService
) {
this.initializeApp();
this.questions = this.questionService.getQuestions();
}

initializeApp() {
this.platform.ready().then(() => {
this.statusBar.styleDefault();
this.splashScreen.hide();
});
}
}

Any suggestion is greatly appreciated!

Could it be because you have commented out your templateUrl line?:

1 Like

It was commented out in my old project and it worked, it was commented out on purpose for the page to display app.component.html instead.

Liying

If I open up the comment and I did the same in old project, it fixes the error message,
but still my new project doesn’t display any content in app.component.html even I tried just to display the header.

My app.component.html for both projects are side by side:

I got no error message when I inspect in browser. In my old project, I got following when I inspect the page and check elements :

New Project, I got this instead:

Any suggestions?

I inspect the page and checked the sources and found that in main.js, map seems different, see the image below, working project is on left, right one is blank page. For working project, package.json:

{
“name”: “MyApp”,
“version”: “0.0.1”,
“author”: “Ionic Framework”,
“homepage”: “https://ionicframework.com/”,
“scripts”: {
“ng”: “ng”,
“start”: “ng serve”,
“build”: “ng build”,
“test”: “ng test”,
“lint”: “ng lint”,
“e2e”: “ng e2e”
},
“private”: true,
“dependencies”: {
@angular/common”: “^7.2.2”,
@angular/core”: “^7.2.2”,
@angular/forms”: “^7.2.2”,
@angular/http”: “^7.2.2”,
@angular/platform-browser”: “^7.2.2”,
@angular/platform-browser-dynamic”: “^7.2.2”,
@angular/router”: “^7.2.2”,
@ionic-native/core”: “^5.0.0”,
@ionic-native/onesignal”: “^5.3.0”,
@ionic-native/splash-screen”: “^5.0.0”,
@ionic-native/status-bar”: “^5.0.0”,
@ionic/angular”: “^4.1.0”,
@ionic/pro”: “2.0.4”,
“cordova-android”: “7.1.4”,
“cordova-plugin-device”: “^2.0.2”,
“cordova-plugin-ionic-keyboard”: “^2.1.3”,
“cordova-plugin-ionic-webview”: “^3.1.2”,
“cordova-plugin-splashscreen”: “^5.0.2”,
“cordova-plugin-statusbar”: “^2.4.2”,
“cordova-plugin-whitelist”: “^1.3.3”,
“core-js”: “^2.5.4”,
“onesignal-cordova-plugin”: “2.4.6”,
“rxjs”: “~6.3.3”,
“rxjs-compat”: “^6.4.0”,
“zone.js”: “~0.8.29”
},
“devDependencies”: {
@angular-devkit/architect”: “~0.12.3”,
@angular-devkit/build-angular”: “^0.13.8”,
@angular-devkit/core”: “~7.2.3”,
@angular-devkit/schematics”: “~7.2.3”,
@angular/cli”: “~7.3.1”,
@angular/compiler”: “~7.2.2”,
@angular/compiler-cli”: “~7.2.2”,
@angular/language-service”: “~7.2.2”,
@ionic/angular-toolkit”: “~1.4.0”,
@types/jasmine”: “~2.8.8”,
@types/jasminewd2”: “~2.0.3”,
@types/node”: “~10.12.0”,
“codelyzer”: “~4.5.0”,
“jasmine-core”: “~2.99.1”,
“jasmine-spec-reporter”: “~4.2.1”,
“karma”: “~3.1.4”,
“karma-chrome-launcher”: “~2.2.0”,
“karma-coverage-istanbul-reporter”: “~2.0.1”,
“karma-jasmine”: “~1.1.2”,
“karma-jasmine-html-reporter”: “^0.2.2”,
“protractor”: “~5.4.0”,
“ts-node”: “~8.0.0”,
“tslint”: “~5.12.0”,
“typescript”: “~3.1.6”
},
“description”: “An Ionic project”,
“cordova”: {
“plugins”: {
“onesignal-cordova-plugin”: {},
“cordova-plugin-whitelist”: {},
“cordova-plugin-statusbar”: {},
“cordova-plugin-device”: {},
“cordova-plugin-splashscreen”: {},
“cordova-plugin-ionic-webview”: {
“ANDROID_SUPPORT_ANNOTATIONS_VERSION”: “27.+”
},
“cordova-plugin-ionic-keyboard”: {}
},
“platforms”: [
“android”
]
}
}

For project not working with blank page, package.json:

{
“name”: “df”,
“version”: “0.0.1”,
“author”: “Ionic Framework”,
“homepage”: “https://ionicframework.com/”,
“scripts”: {
“ng”: “ng”,
“start”: “ng serve”,
“build”: “ng build”,
“test”: “ng test”,
“lint”: “ng lint”,
“e2e”: “ng e2e”
},
“private”: true,
“dependencies”: {
@angular/common”: “^7.2.2”,
@angular/core”: “^7.2.2”,
@angular/forms”: “^7.2.2”,
@angular/http”: “^7.2.2”,
@angular/platform-browser”: “^7.2.2”,
@angular/platform-browser-dynamic”: “^7.2.2”,
@angular/router”: “^7.2.2”,
@ionic-native/core”: “^5.0.0”,
@ionic-native/splash-screen”: “^5.0.0”,
@ionic-native/status-bar”: “^5.0.0”,
@ionic/angular”: “^4.1.0”,
“cordova-android”: “^7.1.4”,
“core-js”: “^2.5.4”,
“rxjs”: “~6.5.1”,
“tslib”: “^1.9.0”,
“zone.js”: “~0.8.29”
},
“devDependencies”: {
@angular-devkit/architect”: “~0.13.8”,
@angular-devkit/build-angular”: “~0.13.8”,
@angular-devkit/core”: “~7.3.8”,
@angular-devkit/schematics”: “~7.3.8”,
@angular/cli”: “~7.3.8”,
@angular/compiler”: “~7.2.2”,
@angular/compiler-cli”: “~7.2.2”,
@angular/language-service”: “~7.2.2”,
@ionic/angular-toolkit”: “~1.5.1”,
@types/jasmine”: “~2.8.8”,
@types/jasminewd2”: “~2.0.3”,
@types/node”: “~12.0.0”,
“codelyzer”: “~4.5.0”,
“cordova-plugin-device”: “^2.0.2”,
“cordova-plugin-ionic-keyboard”: “^2.1.3”,
“cordova-plugin-ionic-webview”: “^4.1.1”,
“cordova-plugin-splashscreen”: “^5.0.2”,
“cordova-plugin-statusbar”: “^2.4.2”,
“cordova-plugin-whitelist”: “^1.3.3”,
“jasmine-core”: “~2.99.1”,
“jasmine-spec-reporter”: “~4.2.1”,
“karma”: “~4.1.0”,
“karma-chrome-launcher”: “~2.2.0”,
“karma-coverage-istanbul-reporter”: “~2.0.1”,
“karma-jasmine”: “~1.1.2”,
“karma-jasmine-html-reporter”: “^0.2.2”,
“protractor”: “~5.4.0”,
“ts-node”: “~8.3.0”,
“tslint”: “~5.17.0”,
“typescript”: “~3.1.6”
},
“description”: “An Ionic project”,
“cordova”: {
“plugins”: {
“cordova-plugin-whitelist”: {},
“cordova-plugin-statusbar”: {},
“cordova-plugin-device”: {},
“cordova-plugin-splashscreen”: {},
“cordova-plugin-ionic-webview”: {
“ANDROID_SUPPORT_ANNOTATIONS_VERSION”: “27.+”
},
“cordova-plugin-ionic-keyboard”: {}
},
“platforms”: [
“android”
]
}
}