I am facing the following problem:
I have generated a JHipster Application and now need to import a component inside another component like shown in this tutorial:
https://coursetro.com/courses/12/Learn-Angular-4-from-Scratch/lessons/2
I have a TeamMember.component
import { Component, OnInit, OnDestroy } from '#angular/core';
import { ActivatedRoute, Router } from '#angular/router';
import { Subscription } from 'rxjs/Rx';
import { JhiEventManager, JhiParseLinks, JhiAlertService } from 'ng-jhipster';
import { Team } from './team.model';
import { TeamService } from './team.service';
import { ITEMS_PER_PAGE, Principal, ResponseWrapper } from '../../shared';
#Component({
selector: 'jhi-team',
templateUrl: './team.component.html'
})
export class TeamComponent implements OnInit, OnDestroy {
teams: Team[];
currentAccount: any;
eventSubscriber: Subscription;
constructor(
private teamService: TeamService,
private jhiAlertService: JhiAlertService,
private eventManager: JhiEventManager,
private principal: Principal
) {
}
loadAll() {
this.teamService.query().subscribe(
(res: ResponseWrapper) => {
this.teams = res.json;
},
(res: ResponseWrapper) => this.onError(res.json)
);
}
ngOnInit() {
this.loadAll();
this.principal.identity().then((account) => {
this.currentAccount = account;
});
this.registerChangeInTeams();
this.teamService.query();
}
ngOnDestroy() {
this.eventManager.destroy(this.eventSubscriber);
}
trackId(index: number, item: Team) {
return item.id;
}
registerChangeInTeams() {
this.eventSubscriber = this.eventManager.subscribe('teamListModification', (response) => this.loadAll());
}
private onError(error) {
this.jhiAlertService.error(error.message, null, null);
}
}
and a Team.component, where I want to import the teammembers.
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '#angular/core';
import { RouterModule } from '#angular/router';
import { EntrestratsSharedModule } from '../../shared';
import {ButtonModule} from 'primeng/primeng';
import {DataListModule} from 'primeng/primeng';
import {TeamMemberComponent} from '../team-member/team-member.component';
import {
TeamService,
TeamPopupService,
TeamComponent,
TeamDetailComponent,
TeamDialogComponent,
TeamPopupComponent,
TeamDeletePopupComponent,
TeamDeleteDialogComponent,
teamRoute,
teamPopupRoute,
} from './';
const ENTITY_STATES = [
...teamRoute,
...teamPopupRoute,
];
#NgModule({
imports: [
EntrestratsSharedModule,
ButtonModule,
DataListModule,
RouterModule.forRoot(ENTITY_STATES, { useHash: true }),
],
declarations: [
TeamComponent,
TeamMemberComponent,
TeamDetailComponent,
TeamDialogComponent,
TeamDeleteDialogComponent,
TeamPopupComponent,
TeamDeletePopupComponent,
],
entryComponents: [
TeamComponent,
TeamDialogComponent,
TeamPopupComponent,
TeamDeleteDialogComponent,
TeamDeletePopupComponent,
],
providers: [
TeamService,
TeamPopupService,
],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class EntrestratsTeamModule {}
My Problem is the following:
If I do this as described in the tutorial and as shown in my code snippets, I only get a blank page for this app. I don't get an error, just a white page for the whole app.
Has anyone experienced this and some ideas for me? I sit on this the whole day now and don't have an idea what I could do with this.
Thank you in advance for all suggestions!
Karsten
EDIT:
Maybe it helps if i share my package.json:
{
"name": "entrestrats",
"version": "0.0.1",
"description": "Description for entrestrats",
"private": true,
"license": "UNLICENSED",
"cacheDirectories": [
"node_modules"
],
"dependencies": {
"#angular-devkit/schematics": "0.0.34",
"#angular/animations": "4.3.2",
"#angular/common": "4.3.2",
"#angular/compiler": "4.3.2",
"#angular/core": "4.3.2",
"#angular/forms": "4.3.2",
"#angular/http": "4.3.2",
"#angular/platform-browser": "4.3.2",
"#angular/platform-browser-dynamic": "4.3.2",
"#angular/router": "4.3.2",
"#ng-bootstrap/ng-bootstrap": "1.0.0-beta.5",
"bootstrap": "4.0.0-beta",
"core-js": "2.4.1",
"font-awesome": "4.7.0",
"jquery": "3.2.1",
"ng-jhipster": "0.2.12",
"ng2-webstorage": "1.8.0",
"ngx-cookie": "1.0.0",
"ngx-infinite-scroll": "0.5.1",
"popper.js": "1.11.0",
"primeng": "^4.3.0",
"reflect-metadata": "0.1.10",
"rxjs": "5.4.2",
"swagger-ui": "2.2.10",
"tether": "1.4.0",
"zone.js": "0.8.16"
},
"devDependencies": {
"#angular/cli": "1.4.2",
"#angular/compiler-cli": "4.3.2",
"#types/jasmine": "2.5.53",
"#types/node": "8.0.18",
"angular2-template-loader": "0.6.2",
"awesome-typescript-loader": "3.2.2",
"browser-sync": "2.18.13",
"browser-sync-webpack-plugin": "1.2.0",
"codelyzer": "3.1.2",
"copy-webpack-plugin": "4.0.1",
"css-loader": "0.28.4",
"exports-loader": "0.6.4",
"extract-text-webpack-plugin": "3.0.0",
"file-loader": "0.11.2",
"generator-jhipster": "4.10.2",
"html-loader": "0.5.0",
"html-webpack-plugin": "2.30.1",
"jasmine-core": "2.7.0",
"karma": "1.7.1",
"karma-chrome-launcher": "2.2.0",
"karma-coverage": "1.1.1",
"karma-intl-shim": "1.0.3",
"karma-jasmine": "1.1.0",
"karma-junit-reporter": "1.2.0",
"karma-notify-reporter": "1.0.1",
"karma-remap-istanbul": "0.6.0",
"karma-sourcemap-loader": "0.3.7",
"karma-webpack": "2.0.4",
"merge-jsons-webpack-plugin": "1.0.11",
"ngc-webpack": "3.2.2",
"node-sass": "4.5.3",
"postcss-loader": "2.0.6",
"proxy-middleware": "0.15.0",
"puppeteer": "0.10.2",
"rimraf": "2.6.1",
"sass-loader": "6.0.6",
"sourcemap-istanbul-instrumenter-loader": "0.2.0",
"string-replace-webpack-plugin": "0.1.3",
"style-loader": "0.18.2",
"to-string-loader": "1.1.5",
"tslint": "5.5.0",
"tslint-loader": "3.5.3",
"typescript": "2.5.2",
"uglifyjs-webpack-plugin": "1.0.0-beta.2",
"web-app-manifest-loader": "0.1.1",
"webpack": "3.6.0",
"webpack-dev-server": "2.8.2",
"webpack-merge": "4.1.0",
"webpack-notifier": "1.5.0",
"webpack-visualizer-plugin": "0.1.11",
"write-file-webpack-plugin": "4.1.0",
"xml2js": "0.4.17"
},
"engines": {
"node": ">=6.9.0"
},
"scripts": {
"lint": "tslint --type-check --project './tsconfig.json' -e 'node_modules/**'",
"lint:fix": "yarn run lint -- --fix",
"ngc": "ngc -p tsconfig-aot.json",
"cleanup": "rimraf target/{aot,www}",
"clean-www": "rimraf target//www/app/{src,target/}",
"start": "yarn run webpack:dev",
"serve": "yarn run start",
"build": "yarn run webpack:prod",
"test": "karma start src/test/javascript/karma.conf.js",
"test:watch": "yarn test -- --watch",
"webpack:dev": "yarn run webpack-dev-server -- --config webpack/webpack.dev.js --progress --inline --hot --profile --port=9060 --watch-content-base",
"webpack:build:main": "yarn run webpack -- --config webpack/webpack.dev.js --progress --profile",
"webpack:build": "yarn run cleanup && yarn run webpack:build:main",
"webpack:prod:main": "yarn run webpack -- --config webpack/webpack.prod.js --progress --profile",
"webpack:prod": "yarn run cleanup && yarn run webpack:prod:main && yarn run clean-www",
"webpack:test": "yarn run test",
"webpack-dev-server": "node --max_old_space_size=4096 node_modules/webpack-dev-server/bin/webpack-dev-server.js",
"webpack": "node --max_old_space_size=4096 node_modules/webpack/bin/webpack.js"
}
It can sound crazy but try importing the:
templateUrl: './team.component.html'
without the './'
templateUrl: 'team.component.html'
and also add the
moduleId: module.id above the selector.
Related
These are my setup files
Router.js
import { createWebHistory, createRouter } from 'vue-router';
import MyComponent from './component/MyComponent.vue';
const routes = [{
path: 'main/publish/tasks',
component: MyComponent
}]
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
index.js
import { createApp, configureCompat } from 'vue';
import router from './Router';
import MainApp from './MainApp.vue';
const app = createApp(MainApp);
app.use(router);
configureCompat({
// default everything to Vue 2 behavior
MODE: 2,
});
app.mount('.vue-app');
MainApp.vue
<template>
<router-view />
</template>
<script>
export default{
name: 'MainApp'
}
</script>
Edit:
MyComponent.vue
<template>
<div> Hello world </div>
</template>
<script>
export default {
name: 'MyComponent'
}
</script>
package.json
{
"name": "Demo Project",
"version": "6.0.0",
"dependencies": {
"#vue/compat": "^3.2.39",
"#vue/compiler-sfc": "^3.2.39",
"core-js": "3.1.2",
"mitt": "^3.0.0",
"moment": "^2.29.4",
"regenerator-runtime": "^0.13.9",
"vue": "^3.2.41",
"vue-carousel": "^0.18.0",
"vue-click-outside": "^1.1.0",
"vue-color": "^2.8.1",
"vue-custom-element": "^3.3.0",
"vue-debounce": "^2.6.0",
"vue-multiselect": "^2.1.6",
"vue-router": "^4.1.6",
"vuex": "^4.0.2",
"whatwg-fetch": "^3.6.2"
},
"devDependencies": {
"#babel/core": "^7.11.6",
"#babel/plugin-proposal-class-properties": "^7.12.13",
"#babel/plugin-syntax-dynamic-import": "^7.8.3",
"#babel/preset-env": "^7.11.5",
"#types/jest": "^28.1.8",
"#types/node": "^14.14.45",
"#typescript-eslint/eslint-plugin": "^5.31.0",
"#typescript-eslint/parser": "^5.31.0",
"#vue/test-utils": "^1.3.0",
"autoprefixer": "^10.4.12",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^28.1.3",
"babel-loader": "^8.1.0",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^4.3.0",
"file-loader": "^6.2.0",
"license-checker": "^25.0.1",
"mini-css-extract-plugin": "^0.12.0",
"postcss": "^8.4.16",
"postcss-loader": "^4.3.0",
"terser-webpack-plugin": "^4.2.3",
"ts-loader": "^8.0.18",
"typescript": "^4.0.8",
"vue-jest": "^3.0.7",
"vue-loader": "^17.0.0",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12",
"webpack-manifest-plugin": "^2.2.0",
"webpack-merge": "^5.7.3"
},
"resolutions": {
"lodash": "^4.17.21"
},
"scripts": {
"dev": "webpack --config webpack.dev.js",
"watch": "webpack --config webpack.dev.js --watch",
"build": "webpack --config webpack.prod.js",
"test": "jest src"
}
}
This code setup leads me to this error
Can anyone help me what I'm doing wrong? Everything works when I remove <router-view/>. I can render component fine by importing and adding it to MainApp.vue. But cannot get it rendered through <router-view/>.
Hi I'm still a rookie in both Angular and firebase. I have initialized a app and I want to connect it to my firebase database. but when I inject the Firebase providers, and specify your Firebase configuration, It gives me an error. **Value at position 1 in the NgModule.imports of AppModule is not a reference Value could not be determined statically**.
This how the error is highlighted at vs-code
This is my package.json
{
"name": "angular-angular-firebase",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},enter code here
"private": true,
"dependencies": {
"#angular/animations": "~13.1.0",
"#angular/common": "~13.1.0",
"#angular/compiler": "~13.1.0",
"#angular/core": "~13.1.0",
"#angular/fire": "^7.2.0",
"#angular/forms": "~13.1.0",
"#angular/platform-browser": "~13.1.0",
"#angular/platform-browser-dynamic": "~13.1.0",
"#angular/router": "~13.1.0",
"angularfire": "^2.3.0",
"firebase": "^9.6.4",
"rxjs": "~7.4.0",
"tslib": "^2.3.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"#angular-devkit/build-angular": "~13.1.2",
"#angular/cli": "~13.1.2",
"#angular/compiler-cli": "~13.1.0",
"#types/jasmine": "~3.10.0",
"#types/node": "^12.11.1",
"jasmine-core": "~3.10.0",
"karma": "~6.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.1.0",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "~1.7.0",
"typescript": "~4.5.2"
}
}
This is the app.module.ts (Note:-The credentials are hidden using)
mport { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import {getFirestore, provideFirestore } from '#angular/fire/firestore'
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';
export const environment = {
production: false,
firebase: {
apiKey: '********************************************',
authDomain: '********************************************',
databaseURL:
'https://fire-base-learn-9a4db-default-rtdb.asia-southeast1.firebasedatabase.app',
projectId: 'fire-base-learn-9a4db',
storageBucket: '*********************',
messagingSenderId: '*********************',
appId: '********************************************',
measurementId: '********************************************',
},
};
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AngularFireModule.initializeApp(environment),
AppRoutingModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
(Here earlier I added the the credentials object in the environment.ts but the same error appeared so i tired adding it directly inside the app.module.ts)
Need some guidance to get rid of the error and get started.
I am using vueJS to build an authentication (login) page with Firebase, each time when I run: npm run serve I have the same error asking me to install Firebase: `Failed to compile with 7 errors 10:44:30 AM
These dependencies were not found:
#firebase in ./src/main.js
firebase in ./src/components/firebaseInit.js, ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/Login.vue and 3 others
firebase/firestore in ./src/components/firebaseInit.js`.
and asking me to install firebase doing: npm install --save #firebase firebase firebase/firestore. which I did many times, but still the same error.
Here is my package.JSON:
{
"name": "Project",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js",
"predeploy": "npm run build",
"deploy": "gh-pages -d dist"
},
"dependencies": {
"firebase": "^7.13.1",
"node-pre-gyp": "^0.14.0",
"vue": "^2.5.2",
"vue-router": "^3.0.1"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"eventsource-polyfill": "^0.9.6",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"gh-pages": "^1.1.0",
"html-webpack-plugin": "^2.30.1",
"node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"rimraf": "^2.6.0",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
node -v = 16.12.1
npm -v =6.14.4
Any idea ?
main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from "vue";
import App from "./App";
import router from "./router";
import firebase from "#firebase";
import "./components/firebaseInit";
Vue.config.productionTip = false;
let app;
firebase.auth().onAuthStateChanged(function(user) {
if (!app) {
/* eslint-disable no-new */
app = new Vue({
el: "#app",
router,
template: "<App/>",
components: { App }
});
}
});
firebaseInit.js
import firebase from 'firebase';
import 'firebase/firestore';
import firebaseConfig from './firebaseConfig';
const firebaseApp = firebase.initializeApp(firebaseConfig);
export default firebaseApp.firestore();
I find it, just replace "firebase": "^7.13.1" by "firebase": "7.13.1". and it worked.
I don't know why, but it worked!
import { initializeApp } from 'firebase/app'
import { firebaseConfig } from './config'
initializeApp(firebaseConfig)
Angular migration from 2.3.0 to 4.3.0 by using the Migration guide from https://update.angular.io.
Already fixed most of the packages version errors, changing packages...
I had updated my packages.json as described below, The log given by the failure, Without AOT :
ERROR in Error: Error encountered resolving symbol values statically.
Function calls are not supported. Consider replacing the function or
lambda with a reference to an exported function (position 55:26 in the
original .ts file), resolving symbol mapValuesToArray in
C:/Users/project/src/app/app.module.ts, resolving
symbol Artefacts in
C:/Users/project/src/app/app.module.ts, resolving symbol AppModule in
C:/Users/project/src/app/app.module.ts, resolving symbol AppModule in
C:/Users/project/selv2/src/app/app.module.ts
This is my app.module.ts file
import {BrowserModule, Title} from '#angular/platform-browser';
import {NgModule} from '#angular/core';
import {FormsModule, ReactiveFormsModule} from '#angular/forms';
import {RouterModule} from '#angular/router';
import {Http, HttpModule} from '#angular/http';
import {TranslateLoader, TranslateModule, TranslateStaticLoader} from
'ng2-translate';
import {DragulaModule} from 'ng2-dragula/ng2-dragula';
import {ImageCropperComponent} from 'ng2-img-cropper';
import {DynamicFormModule} from './shared/dform/dform.module';
import {SpinnerComponent} from '#app/components';
import {MyDatePickerModule} from 'mydatepicker';
import {UuidModule} from 'ng2-uuid';
import {ResponsiveModule} from 'ng2-responsive';
import {Angulartics2GoogleAnalytics, Angulartics2Module} from
'angulartics2';
import {Ng2DeviceDetectorModule} from 'ng2-device-detector';
import {StoreModule} from '#ngrx/store';
import {StoreDevtoolsModule} from '#ngrx/store-devtools';
import {EffectsModule} from '#ngrx/effects';
// Root Application Component
import {AppComponent} from './app.component';
import {PopupModule} from 'ng2-opd-popup';
// Services
import * as services from './services';
import * as guards from './guards';
// Components included using barrel
import * as components from './components';
// Effects
import * as fromEffects from './effects';
// reducers
import {reducer} from './reducers';
import {WindowRefService} from '#app/services';
import {environment} from '../environments/environment';
import {SharedModule} from "#app/shared/shared.module";
import {NotificationsService} from "angular2-
notifications/src/notifications.service";
import {AppRoutingModule} from "#app/app-routing.module";
import {AboutComponent} from "#app/components/about/about.component";
// Elements loading function
/*const mapValuesToArray = (obj) => Object.keys(obj).map(key =>
obj[key]);*/
export function mapValuesToArray (obj){
return [
Object.keys(obj).map(key => obj[key])
];
};
export const apiUrl = (windowRef: WindowRefService) => {
return environment.api_url || windowRef.nativeWindow['__env']['backend']
+ '/api';
};
export const Providers = [
...mapValuesToArray(services),
...mapValuesToArray(guards),
{ provide: 'api_url', useFactory: apiUrl, deps: [WindowRefService] }
];
export const Artefacts = [
...mapValuesToArray(components),
ImageCropperComponent
];
export const Features = [];
export function createTranslateLoader(http: Http) {
return new TranslateStaticLoader(http, './assets/i18n', '.json');
}
#NgModule({
declarations: [
AppComponent,
Artefacts,
Features,
SpinnerComponent,
AboutComponent
],
exports:[RouterModule],
imports: [
SharedModule,
Ng2DeviceDetectorModule.forRoot(),
PopupModule.forRoot(),
BrowserModule,
MyDatePickerModule,
FormsModule,
ReactiveFormsModule,
DynamicFormModule,
HttpModule,
DragulaModule,
UuidModule,
AppRoutingModule,
TranslateModule.forRoot({
provide: TranslateLoader,
useFactory: (createTranslateLoader),
deps: [Http]
}),
StoreModule.provideStore(reducer),
StoreDevtoolsModule.instrumentOnlyWithExtension(),
// Initializing effects
EffectsModule.run(fromEffects.AuthEffects),
EffectsModule.run(fromEffects.CircuitEffects),
ResponsiveModule,
Angulartics2Module.forRoot([ Angulartics2GoogleAnalytics ]),
],
providers: [
Title,
Providers,
NotificationsService
],
bootstrap: [AppComponent]
})
export class AppModule { }
This my Packages.json file :
{
"name": "migrationProject",
"version": "2.0",
"license": "MIT",
"#angular/cli": {},
"scripts": {
"start": "node node_modules/#angular/cli/bin/ng s --env=source",
"start:local": "node node_modules/#angular/cli/bin/ng s --
env=local",
"build": "node node_modules/#angular/cli/bin/ng build --dev --
env=source",
"build:prod": "node node_modules/#angular/cli/bin/ng build --prod --
env=prod",
"deploy": "./gradlew deploy",
"deploy:win": "gradlew.bat deploy",
"lint": "tslint \"src/**/*.ts\"",
"test": "node node_modules/#angular/cli/bin/ng test",
"pree2e": "webdriver-manager update",
"e2e": "protractor",
"i18n": "./node_modules/.bin/ng-xi18n"
},
"private": true,
"dependencies": {
"#angular/animations": "4.3.0 ",
"#angular/common": "4.3.0 ",
"#angular/compiler": "4.3.0 ",
"#angular/core": "4.3.0 ",
"#angular/forms": "4.3.0 ",
"#angular/http": "4.3.0 ",
"#angular/platform-browser": "4.3.0 ",
"#angular/platform-browser-dynamic": "4.3.0 ",
"#angular/router": "4.3.0 ",
"#ngrx/core": "^1.2.0",
"#ngrx/effects": "^2.0.0",
"#ngrx/store": "^2.2.1",
"#swimlane/ngx-charts": "4.4.0",
"#types/file-saver": "0.0.1",
"#types/jszip": "0.0.33",
"#types/lodash": "4.14.30",
"#types/node-uuid": "0.0.28",
"angular-2-daterangepicker": "^1.1.32",
"angular2-bootstrap-switch": "^0.2.3",
"angular2-jwt": "^0.1.28",
"angular2-notifications": "0.4.53",
"angular2-signaturepad": "^2.8.0",
"angular2-tag-input": "^1.2.3",
"angulartics2": "<= 1.6.4",
"chart.js": "^2.7.2",
"classlist.js": "^1.1.20150312",
"core-js": "^2.4.1",
"d3": "^4.6.0",
"dragula": "^3.7.2",
"file-saver": "^1.3.3",
"font-awesome": "^4.7.0",
"lie": "^3.3.0",
"lodash": "^4.14.17",
"moment": "2.18.1",
"mydatepicker": "^2.0.20",
"ng-qrcode": "^1.1.2",
"ng2-ckeditor": "^1.2.2",
"ng2-device-detector": "^1.0.0",
"ng2-dragula": "^1.2.1",
"ng2-file-upload": "^1.2.1",
"ng2-img-cropper": "^0.8.0",
"ng2-opd-popup": "^1.1.21",
"ng2-pdf-viewer": "^3.0.8",
"ng2-responsive": "^0.8.4",
"ng2-translate": "^4.2.0",
"ng2-uuid": "0.0.3",
"ngx-bootstrap": "^2.0.0",
"ngx-drag-drop": "^1.1.0",
"ngx-infinite-scroll": "^0.8.4",
"ngx-popover": "0.0.16",
"node-uuid": "^1.4.8",
"pdf.js": "^0.1.0",
"pdfjs-dist": "^1.9.489",
"rxjs": "^5.4.2",
"ts-helpers": "^1.1.1",
"zone.js": "^0.8.14"
},
"devDependencies": {
"#angular/cli": "^1.4.3",
"#angular/compiler-cli": "^4.3.0 ",
"#angular/platform-server": "4.3.0 ",
"#ngrx/store-devtools": "^3.2.2",
"#types/chai": "^3.4.34",
"#types/jasmine": "2.5.38",
"#types/node": "^6.0.51",
"angular2-template-loader": "^0.6.2",
"awesome-typescript-loader": "^3.5.0",
"base64-js": "^1.2.1",
"bootstrap": "^3.3.7",
"bootstrap-sass": "^3.3.7",
"codelyzer": "^2.0.0-beta.4",
"coffeescript": "^2.4.1",
"css-loader": "^0.26.4",
"extract-text-webpack-plugin": "^2.0.0-beta.5",
"file-loader": "^3.0.1",
"html-webpack-plugin": "^3.2.0",
"ieee754": "^1.1.8",
"jasmine-core": "^2.5.2",
"jasmine-spec-reporter": "^3.2.0",
"jszip": "3.1.3",
"karma": "^1.3.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-coverage": "^1.1.1",
"karma-jasmine": "^1.0.2",
"karma-mocha-reporter": "^2.2.2",
"karma-phantomjs-launcher": "^1.0.2",
"karma-remap-istanbul": "^0.6.0",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "1.8.0",
"ngrx-store-freeze": "^0.1.6",
"ngx-bootstrap": "^1.6.5",
"node-sass": "^4.11.0",
"protractor": "^5.1.1",
"raw-loader": "^2.0.0",
"reflect-metadata": "^0.1.9",
"sass-loader": "^4.1.1",
"sockjs-client": "^1.1.4",
"style-loader": "^0.13.2",
"ts-helpers": "^1.1.2",
"ts-node": "^1.7.0",
"tslint": "^4.3.1",
"tslint-loader": "^3.3.0",
"typescript": "~2.3.3",
"url-loader": "^1.1.2",
"webpack": "^4.3.0",
"webpack-dev-server": "^2.11.5"
}
}
How to fix this error...
Import services
// Does not use the mapValuesToArray function
export function mapValuesToArray (obj){
return [
Object.keys(obj).map(key => obj[key])
];
}
// Replace the following expression :
export const Artefacts = [
...mapValuesToArray(components),
ImageCropperComponent
];
// With the following expression :
export const Artefacts = [
...components,
ImageCropperComponent
];
// for that you should change the following import :
import * as components from './components';
// to this expression :
import {components} from './components';
// you need also to exports the components in your index.ts as follows :
import {SpinnerComponent} from "./spinner/spinner.component";
import {AboutComponent} from "./about/about.component";
export const components = [AboutComponent, SpinnerComponent];
// does the same for the following imports :
import * as services from './services';
import * as guards from './guards';
// In the other hand
unistall webpack library, because it is offer by #angular/cli
I am receiving the above error in the console of the Chrome browser, and I am at a loss as where to look and what too do. The complete stack trace looks like this:
ERROR TypeError: Cannot read property 'index' of null
at ComponentFactory_.create (http://localhost:63770/node_modules/#angular/core/bundles/core.umd.js:9896:101)
at ComponentFactoryBoundToModule.create (http://localhost:63770/node_modules/#angular/core/bundles/core.umd.js:3434:29)
at ApplicationRef_.bootstrap (http://localhost:63770/node_modules/#angular/core/bundles/core.umd.js:5017:57)
at eval (http://localhost:63770/node_modules/#angular/core/bundles/core.umd.js:4806:79)
at Array.forEach (native)
at PlatformRef_._moduleDoBootstrap (http://localhost:63770/node_modules/#angular/core/bundles/core.umd.js:4806:42)
at eval (http://localhost:63770/node_modules/#angular/core/bundles/core.umd.js:4768:27)
at ZoneDelegate.invoke (http://localhost:63770/node_modules/zone.js/dist/zone.js:365:26)
at Object.onInvoke (http://localhost:63770/node_modules/#angular/core/bundles/core.umd.js:4135:37)
at ZoneDelegate.invoke (http://localhost:63770/node_modules/zone.js/dist/zone.js:364:32)
at Zone.run (http://localhost:63770/node_modules/zone.js/dist/zone.js:125:43)
at http://localhost:63770/node_modules/zone.js/dist/zone.js:758:57
at ZoneDelegate.invokeTask (http://localhost:63770/node_modules/zone.js/dist/zone.js:398:31)
at Object.onInvokeTask (http://localhost:63770/node_modules/#angular/core/bundles/core.umd.js:4126:37)
at ZoneDelegate.invokeTask (http://localhost:63770/node_modules/zone.js/dist/zone.js:397:36)
My app.module.ts is this:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { GPAEnterpriseAppComponent } from './gpaenterprise-app.component';
#NgModule({
imports: [
BrowserModule
],
declarations: [
GPAEnterpriseAppComponent
],
providers: [],
bootstrap: [GPAEnterpriseAppComponent]
})
export class AppModule { }
The referenced app component looks like this:
import { Component } from '#angular/core';
#Component({
selector: 'gpa-enterprise-app',
template: '<h1>We are here</h1>'
})
export class GPAEnterpriseAppComponent {
}
I do not know if it is needed, but here is the package.json:
"version": "1.0.0",
"name": "gpa_enterprise",
"private": true,
"devDependencies": {
"gulp": "^3.9.1",
"typescript": "^2.3.2",
"typings": "^2.1.1"
},
"dependencies": {
"#angular/animations": "^4.1.2",
"#angular/common": "^4.1.2",
"#angular/compiler": "^4.1.2",
"#angular/core": "^4.1.2",
"#angular/forms": "^4.1.2",
"#angular/http": "^4.1.2",
"#angular/material": "^2.0.0-beta.3",
"#angular/platform-browser": "^4.1.2",
"#angular/platform-browser-dynamic": "^4.1.2",
"#angular/router": "^4.1.2",
"#angular/upgrade": "^4.1.2",
"angular2-in-memory-web-api": "^0.0.21",
"core-js": "^2.4.1",
"primeng": "^4.0.0",
"reflect-metadata": "^0.1.10",
"rxjs": "^5.4.0",
"systemjs": "^0.20.12",
"zone.js": "^0.8.10"
},
"scripts": {
"postinstall": "typings install",
"typings": "typings",
"cmd": "npm typescript"
}
}
.csproj typescript configurations, as requested:
<PropertyGroup>
<TypeScriptToolsVersion>1.8</TypeScriptToolsVersion>
<TypeScriptRemoveComments>false</TypeScriptRemoveComments>
<TypeScriptSourceMap>true</TypeScriptSourceMap>
<TypeScriptTarget>ES5</TypeScriptTarget>
<TypeScriptJSXEmit>None</TypeScriptJSXEmit>
<TypeScriptCompileOnSaveEnabled>True</TypeScriptCompileOnSaveEnabled>
<TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
<TypeScriptNoImplicitAny>False</TypeScriptNoImplicitAny>
<TypeScriptModuleKind>System</TypeScriptModuleKind>
<TypeScriptOutFile />
<TypeScriptOutDir />
<TypeScriptGeneratesDeclarations>False</TypeScriptGeneratesDeclarations>
<TypeScriptNoEmitOnError>True</TypeScriptNoEmitOnError>
<TypeScriptMapRoot />
<TypeScriptSourceRoot />
<TypeScriptExperimentalDecorators>True</TypeScriptExperimentalDecorators>
<TypeScriptEmitDecoratorMetadata>True</TypeScriptEmitDecoratorMetadata>
</PropertyGroup>
The .csproj had
<TypeScriptToolsVersion>1.8</TypeScriptToolsVersion>,
but I had updated to 2.3. Changing the above line to reflect this has fixed the error I was receiving.
Not really familiar with .csproj files, but I reckon they function as the tsconfig. I would try setting:
<TypeScriptModuleKind>es2015</TypeScriptModuleKind>
Do not know for sure if you need to cap it for your IDE.