We Keep Coding

Lazy Loading Angular / Ionic 3 Component AOT "is not a known element: Error"

This is driving me crazy, hopefully someone can shed some light on the problem. I am Lazy loading my Ionic components everything works fine in development, however when I go to compile AOT throws an error. I spent about 4 hours trying different ways to load this in I am lost, keep getting the same error.
From what I read and found in examples this should be correct. What am I missing here?
'tester' is not a known element: 1. If 'tester' is an Angular component, then verify that it is part of this
module. 2. To allow any element add 'NO_ERRORS_SCHEMA' to the '#NgModule.schemas' of this component. ("
<ion-list *ngIf="!id"> <ion-list-header> [ERROR -><tester></tester>
// components/tester/tester.ts
import { Component } from '#angular/core';
#Component({
selector: 'tester',
templateUrl: 'tester.html'
})
export class TesterComponent {
text: string;
constructor() {
console.log('Hello TesterComponent Component');
this.text = 'Hello World';
}
}
// components/components.module.ts
import { NgModule } from '#angular/core';
import { TesterComponent } from './tester/tester';
import {IonicModule} from "ionic-angular";
#NgModule({
declarations: [TesterComponent],
imports: [IonicModule],
exports: [TesterComponent,
]
})
export class ComponentsModule {}
// pages/faq/faq.module.ts
import { NgModule } from '#angular/core';
import { IonicPageModule } from 'ionic-angular';
import { FaqPage } from './faq';
import {ComponentsModule} from "../../components/components.module";
#NgModule({
declarations: [
FaqPage
],
imports: [
IonicPageModule.forChild(FaqPage), ComponentsModule
],
})
export class FaqPageModule {}
// pages/faq/faq.html
<tester></tester>
EDIT
Thanks to #Joel Joseph - Apparently the view needs to reside in the same directory as your parent component. I had the view .html file in a shared directory hence the problem.
templateUrl: '../shared/view/list.html'
changed to
templateUrl: 'list.html'
and it compiles fine now. Will leave this up incase anyone else has this issue.

Thanks to #Joel Joseph - Apparently the view needs to reside in the same directory as your parent component. I had the view .html file in a shared directory hence the problem.
templateUrl: '../shared/view/list.html'
changed to
templateUrl: 'list.html'
and it compiles fine now. Will leave this up incase anyone else has this issue.

Not able to load component into page - Angular 4/Ionic 3

A button is displayed on the page. When the user selects the button the child component will appear, however, the following error appears - Error: Uncaught (in promise): Error: No component factory found for ModalComponent. Did you add it to #NgModule.entryComponents?
The structure I have set up is as follows and this is in conjunction with Ionic 3 -
app (folder)
- app.module
- app.component
components (folder)
- modal-component.ts
pages (folder)
- pageOne (folder)
- pageOne.module
- pageOne.ts
I put the modal component in the pageOne.module
pageOne.module
#NgModule({
declarations: [
pageOne,
modalComponent
],
entryComponents: [
modalComponent
],
imports: [
IonicPageModule.forChild(pageOne),
],
exports: [
pageOne,
]
})
export class pageOneModule {}
pageOne.ts
#IonicPage()
#Component({
selector: 'pageOne',
templateUrl: 'pageOne.html',
})
export class pageOne {}

Are you bootstrapping your module?
put this somewhere where it will load
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { pageOneModule } from './pages/pageOne/pageOne.module';
document.addEventListener('DOMContentLoaded', () => {
platformBrowserDynamic().bootstrapModule(pageOneModule)
.catch(err => console.log(err));
});
I would also suggest using the angular cli, It does this kind of stuff for you.

Your Page module isn't setup right for lazy loading. I'm not sure exactly what's causing the exact error but when you lazy load you don't export or declare the entry components. Change your page module to:
#NgModule({
declarations: [
pageOne,
modalComponent ],
imports: [ IonicPageModule.forChild(pageOne) ]
})
export class pageOneModule {}
Now, you didn't post your modal component code so I'm not sure if it's something you made or not. If it's something like the Material2 Modals, those need to be in entryComponents. Also, your Nav stacks should use the string name of the page now, not a import to make sure you are loading the same object vs cloning it.

Bootstrapping hybrid AngularJS & Angular application causing very slow rendering

I'm currently trying to bootstrap a large Angular 1.6.1 app to Angular 4.0.1 using the UpgradeModule. I've managed to successfully get the app to run, but I've noticed a significant slowdown with rendering times - so bad that it completely freezes after triggering a few events.
I suspect that it is an issue with the digest loop, and running the profiler I can see that the zonejs function calls are taking a very long time to process.
It's also unclear whether I should expect significantly slower rendering times whilst running a hybrid app?
I've also noticed some odd behaviour that may be related to the same issue. The promises seem to be working inconsistently. It seems like server responses are successfully returning, but the angular promises doesn't detect that it has returned - resulting in an infinite loading icon (I have a loader component which displays a loading icon until ALL promises have returned).
Is there anything in particular I could check for, that may be causing the slow rendering?
Here is my set up.
app.ts - main entry file
import 'zone.js';
import 'reflect-metadata';
import { NgModule } from '#angular/core';
import { UpgradeModule } from '#angular/upgrade/static';
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { AppModule } from './main.module';
platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
upgrade.bootstrap(document.body, ['main']);
});
main.module.ajs.ts - my AngularJS module (I've removed all dependencies for readability)
// AngularJS entry
import './exampleDep/exampleDep.module';
import { CONFIGURATION } from '../config';
angular
.module('main', [
'ngRoute',
'exampleDep'
])
.config(applicationRouting)
.run(applicationInit)
.constant('CONFIGURATION', CONFIGURATION);
function applicationInit($rootScope, CONFIGURATION) {
$rootScope.CONFIGURATION = CONFIGURATION;
}
function applicationRouting($routeProvider, $analyticsProvider) {
$analyticsProvider.firstPageview(false);
$analyticsProvider.virtualPageviews(false);
$routeProvider
.when('/?', {
reloadOnSearch: false
})
.otherwise({
redirectTo: '/'
});
}
main.module.ts - my Angular module
// Angular entry
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { UpgradeModule } from '#angular/upgrade/static';
#NgModule({
imports: [
BrowserModule,
UpgradeModule
],
bootstrap: []
})
export class AppModule {
ngDoBootstrap() {}
}

Auth0 with Angular 1.5.8 and webpack

I'm trying to integrate Auth0 into my Angular project that I'm bundling with webpack. When I launch the app I get the error:
Error: [$injector:modulerr] Failed to instantiate module auth0.lock due to:
Error: Auth0Lock must be loaded.
My Config.js looks like:
import 'auth0-lock';
import 'angular-lock';
import 'angular-jwt';
import angular from 'angular';
import uiRouter from 'angular-ui-router';
import loginController from 'components/login/login.controller';
import authService from 'shared/auth/auth.service';
const app = angular.module('app',[uiRouter, 'auth0.lock', 'angular-jwt']);
app.config(($stateProvider, lockProvider, $urlRouterProvider, $locationProvider) => {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('login',{
url:'/login',
template: require('components/login/login.view.html'),
controller: loginController,
controllerAs: 'vm'
})
lockProvider.init({
clientID: 'xxx',
domain: 'xxx'
});
$locationProvider.html5Mode(true);
});
app.service('authService',authService);
export default app;
And my index.js is
import angular from 'angular';
import appModule from './config';
angular.bootstrap(document, [appModule.name]);
run.$inject = ['$rootScope', 'authService', 'lock'];
function run($rootScope, authService, lock) {
// Put the authService on $rootScope so its methods
// can be accessed from the nav bar
$rootScope.authService = authService;
// Register the authentication listener that is
// set up in auth.service.js
authService.registerAuthenticationListener();
// Register the synchronous hash parser
lock.interceptHash();
console.log('success');
}
I've read on a few places that setting window.Auth0Lock in the webpack config would fix it, but still no luck.
new webpack.ProvidePlugin({
"window.Auth0Lock" : "auth0-lock"
}),
My problem is exactly the same as this question, but alas it remains unanswered. I would appricate any help.
Edit: The below solution doesn't seem to solve my problem and I'm still stuck. I believe I'm requiring all the required dependencies.

So I do need lock.min.js, and when I tried to require it in my config file webpack would throw up. I also tried downloading and requiring the distributable, but that also was giving me problems. I gave up and now I'm referencing the CDN directly on my index.html. I think you can use webpack script-loader as well.
<script type="text/javascript" src="https://cdn.auth0.com/js/lock/10.5/lock.min.js"></script>
<script src="bundle.js"></script>
Hope this helps.

How to convert angularJS version 1.X controller into angular 2.X using EM6 ngupgrade

angular.module('app', []).controller('MessagesCtrl', function() {
$scope.self.list = [
{text: 'Hello, World!'},
{text: 'This is a message'},
{text: 'And this is another message'}
];
self.clear = function() {
$scope.self.list = [];
};
});
this is a controller written in angular. how can I convert this into angular 2 using EM6.

well upto my knowledge there are not alot of tutorials for the upgradation but yes thetre are few one.
https://angular.io/docs/ts/latest/guide/upgrade.html
http://blog.thoughtram.io/angular/2015/10/24/upgrading-apps-to-angular-2-using-ngupgrade.html
well let me tell you about basic angular2 app.
in angular 1.x our main module is initilize like this
angular.module('app', [])
but in the angular2 our main component started from the bootstraped file like this.
import {bootstrap} from 'angular2/platform/browser';
import {App} from './app';
bootstrap(App,['here global level dependenices....']);
here app is our main component whihc is imported in this bootstrap file. so bootstraped is file our entry point of the app. and
if we want to do some coding stuff like we work in the angular1.x controller here we do the same work in the class file (typescript class)
here i am posting one basic example like this.
import {Component, View} from 'angular2/core';
#Component({
selector: 'app',
templateUrl: "src/app.html",
styleUrls: ['src/app.css'],
directives: [ directives list here....],
})
export class App
{
// stuff you want to do here
}
firstly we have to import angular2 bundles from the systemjs bundles like we imported Component and view in this example from the angular2/core.
there are alot of imports available for the angular2. you can check out here and here