I have developed an SPFx web part with this details:-
yo-rc.json for the project, is:-
{
"#microsoft/generator-sharepoint": {
"isCreatingSolution": true,
"environment": "spo",
"version": "1.12.1",
"libraryName": "spfx-my-modal-popup",
"libraryId": "616c9b54-d123-42d8-9942-9abb0fe4f46c",
"packageManager": "npm",
"isDomainIsolated": false,
"componentType": "webpart"
}
}
now i installed nvm to be able to run multiple node versions, here what i did so far:-
1- I install node version 10.24.1 , then i use it as follow :-
nvm use 10.24.1
2- i run :-
gulp serve
The https://localhost:4321/temp/workbench.html opened but when i tried to add the web part by clicking on the + icon i will get this error inside the F12 developer tool:-
here is the full error:-
[1636842661379][PropertyPaneLoader] [SPLoaderError.loadComponentError]:
***Failed to load component "f9e737b7-f0df-4597-ba8c-3060f82380db" (SPPropertyPane). Original error: ***Failed to load URL 'https://localhost:4321/node_modules/#microsoft/sp-property-pane/dist/dist/sp-property-pane_en-us.js' for resource 'sp-property-pane' in component 'f9e737b7-f0df-4597-ba8c-3060f82380db' (SPPropertyPane). The file was not found in the server. Make sure that you are running 'gulp serve'.
***INNERERROR:
***Failed to load URL 'https://localhost:4321/node_modules/#microsoft/sp-property-pane/dist/dist/sp-property-pane_en-us.js' for resource 'sp-property-pane' in component 'f9e737b7-f0df-4597-ba8c-3060f82380db' (SPPropertyPane). The file was not found in the server. Make sure that you are running 'gulp serve'.
***CALLSTACK:
SPError#https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:24443:24
SPLoaderError#https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:42161:28
ff4n/ErrorBuilder</ErrorBuilder.buildErrorWithVerboseLog#https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:46155:21
ff4n/ErrorBuilder</ErrorBuilder.buildLoadComponentError#https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:46024:21
_loadComponentImpl/<#https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:45362:75
promise callback*_loadComponentImpl#https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:45361:8
_loadComponentRetryStrategy#https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:45299:12
_loadComponentRetryStrategy/<#https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:45309:20
promise callback*_loadComponentRetryStrategy#https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:45304:10
_loadComponentRetryStrategy/<#https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:45309:20
promise callback*_loadComponentRetryStrategy#https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:45304:10
loadComponent#https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:45281:55
++S4/SPRequireJsComponentLoader</SPRequireJsComponentLoader.prototype._loadComponentWithExecutor#https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:41771:85
td2X/LoadComponentExecutor</LoadComponentExecutor.prototype.loadComponent#https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:46896:21
++S4/SPRequireJsComponentLoader</SPRequireJsComponentLoader.prototype.loadComponent#https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:41742:44
Uk6p/BaseComponentLoader</BaseComponentLoader.prototype.loadComponentById#https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:44816:25
KZU3/SPComponentLoader</SPComponentLoader.loadComponentById#https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:43438:44
get#https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:110639:99
set#https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:16957:21
set#https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:14989:13
CanvasToolboxHint/_this._handleClick#https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/chunk.sp-canvas-edit_7833b0118fe685da1388.js:3982:17
callCallback#https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:75432:14
invokeGuardedCallbackDev#https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:75482:16
invokeGuardedCallback#https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:75539:31
invokeGuardedCallbackAndCatchFirstError#https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:75553:25
executeDispatch#https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:75844:42
executeDispatchesInOrder#https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:75866:20
executeDispatchesAndRelease#https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:75963:29
executeDispatchesAndReleaseTopLevel#https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:75971:10
forEachAccumulated#https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:75945:8
runEventsInBatch#https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:76099:21
runExtractedEventsInBatch#https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:76107:19
handleTopLevel#https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:80109:30
batchedUpdates$1#https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:95687:12
batchedUpdates#https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:77434:12
dispatchEvent#https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:80188:19
interactiveUpdates$1/<#https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:95738:14
unstable_runWithPriority#https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:97248:12
interactiveUpdates$1#https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:95737:22
sp-webpart-workbench-assembly_default.js:26401:21
Uncaught (in promise) Error: ***Failed to load component "f9e737b7-f0df-4597-ba8c-3060f82380db" (SPPropertyPane). Original error: ***Failed to load URL 'https://localhost:4321/node_modules/#microsoft/sp-property-pane/dist/dist/sp-property-pane_en-us.js' for resource 'sp-property-pane' in component 'f9e737b7-f0df-4597-ba8c-3060f82380db' (SPPropertyPane). The file was not found in the server. Make sure that you are running 'gulp serve'.
SPError https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:24443
SPLoaderError https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:42161
buildErrorWithVerboseLog https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:46155
buildLoadComponentError https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:46024
_loadComponentImpl https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:45362
promise callback*_loadComponentImpl https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:45361
_loadComponentRetryStrategy https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:45299
_loadComponentRetryStrategy https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:45309
promise callback*_loadComponentRetryStrategy https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:45304
_loadComponentRetryStrategy https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:45309
promise callback*_loadComponentRetryStrategy https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:45304
loadComponent https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:45281
loadComponent https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:46458
_loadComponentImpl https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:43631
promise callback*PypK/SystemJsFallbackLoader</SystemJsFallbackLoader.prototype._loadComponentImpl https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:43621
loadComponent https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:46896
loadComponent https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:43617
_loadComponentWithExecutor https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:41781
promise callback*++S4/SPRequireJsComponentLoader</SPRequireJsComponentLoader.prototype._loadComponentWithExecutor https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:41777
loadComponent https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:46896
loadComponent https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:41742
loadComponentById https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:44816
loadComponentById https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:43438
get https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:110639
set https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:16957
set https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:14989
_handleClick https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/chunk.sp-canvas-edit_7833b0118fe685da1388.js:3982
callCallback https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:75432
invokeGuardedCallbackDev https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:75482
invokeGuardedCallback https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:75539
invokeGuardedCallbackAndCatchFirstError https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:75553
executeDispatch https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:75844
executeDispatchesInOrder https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:75866
executeDispatchesAndRelease https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:75963
executeDispatchesAndReleaseTopLevel https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:75971
forEachAccumulated https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:75945
runEventsInBatch https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:76099
runExtractedEventsInBatch https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:76107
handleTopLevel https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:80109
batchedUpdates$1 https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:95687
batchedUpdates https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:77434
dispatchEvent https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:80188
1 https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:95738
unstable_runWithPriority https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:97248
interactiveUpdates$1 https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:95737
interactiveUpdates https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:77453
dispatchInteractiveEvent https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:80165
sp-webpart-workbench-assembly_default.js:24430:28
Uncaught (in promise) Error: ***Failed to load component "f9e737b7-f0df-4597-ba8c-3060f82380db" (SPPropertyPane). Original error: ***Failed to load URL 'https://localhost:4321/node_modules/#microsoft/sp-property-pane/dist/dist/sp-property-pane_en-us.js' for resource 'sp-property-pane' in component 'f9e737b7-f0df-4597-ba8c-3060f82380db' (SPPropertyPane). The file was not found in the server. Make sure that you are running 'gulp serve'.
SPError https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:24443
SPLoaderError https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:42161
buildErrorWithVerboseLog https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:46155
buildLoadComponentError https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:46024
_loadComponentImpl https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:45362
promise callback*_loadComponentImpl https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:45361
_loadComponentRetryStrategy https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:45299
_loadComponentRetryStrategy https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:45309
promise callback*_loadComponentRetryStrategy https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:45304
_loadComponentRetryStrategy https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:45309
promise callback*_loadComponentRetryStrategy https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:45304
loadComponent https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:45281
_loadComponentWithExecutor https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:41771
loadComponent https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:46896
loadComponent https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:41742
loadComponentById https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:44816
loadComponentById https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:43438
get https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:110639
set https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:16957
set https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:14989
_handleClick https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/chunk.sp-canvas-edit_7833b0118fe685da1388.js:3982
callCallback https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:75432
invokeGuardedCallbackDev https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:75482
invokeGuardedCallback https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:75539
invokeGuardedCallbackAndCatchFirstError https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:75553
executeDispatch https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:75844
executeDispatchesInOrder https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:75866
executeDispatchesAndRelease https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:75963
executeDispatchesAndReleaseTopLevel https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:75971
forEachAccumulated https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:75945
runEventsInBatch https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:76099
runExtractedEventsInBatch https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:76107
handleTopLevel https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:80109
batchedUpdates$1 https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:95687
batchedUpdates https://localhost:4321/temp/workbench-packages/#microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:77434
dispatchEvent https://localhost:4321/temp/workbench-packages
here is my MyModalPopupWebPart.ts:-
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { Version } from '#microsoft/sp-core-library';
import {
IPropertyPaneConfiguration,
PropertyPaneTextField
} from '#microsoft/sp-property-pane';
import { BaseClientSideWebPart } from '#microsoft/sp-webpart-base';
import * as strings from 'MyModalPopupWebPartStrings';
import MyModalPopup from './components/MyModalPopup';
import { IMyModalPopupProps } from './components/IMyModalPopupProps';
export interface IMyModalPopupWebPartProps {
description: string;
WhoWeAre: string;
OurValue:string;
}
export default class MyModalPopupWebPart extends BaseClientSideWebPart<IMyModalPopupWebPartProps> {
public render(): void {
const element: React.ReactElement<IMyModalPopupProps> = React.createElement(
MyModalPopup,
{
description: this.properties.description,
WhoWeAre: this.properties.WhoWeAre,
OurValue: this.properties.OurValue
}
);
ReactDom.render(element, this.domElement);
}
protected onDispose(): void {
ReactDom.unmountComponentAtNode(this.domElement);
}
protected get dataVersion(): Version {
return Version.parse('1.0');
}
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
return {
pages: [
{
header: {
description: strings.PropertyPaneDescription
},
groups: [
{
groupName: strings.BasicGroupName,
groupFields: [
PropertyPaneTextField('WhoWeAre', {
label: "who We Are",
multiline: true
}),
PropertyPaneTextField('OurValue', {
label: "Our value",
multiline: true
}), PropertyPaneTextField('description', {
label: "Description"
}),
]
}
]
}
]
};
}
}
here is my MYModal.tsx:-
import * as React from 'react';
import { useId, useBoolean } from '#fluentui/react-hooks';
import { sanitize } from 'dompurify';
import {
getTheme,
mergeStyleSets,
FontWeights,
Modal,
IIconProps,
IStackProps,
} from '#fluentui/react';
import { IconButton, IButtonStyles } from '#fluentui/react/lib/Button';
export const MYModal = (myprops) => {
const [isModalOpen, { setTrue: showModal, setFalse: hideModal }] = useBoolean(false);
const [isPopup, setisPopup] = React.useState(true);
const titleId = useId('title');
React.useEffect(() => {
showModal();
}, [isPopup]);
function ExitHandler() {
hideModal();
setisPopup(current => !current)
myprops.handler();
}
return (
<div>
<Modal
titleAriaId={titleId}
isOpen={isModalOpen}
onDismiss={ExitHandler}
isBlocking={true}
containerClassName={contentStyles.container}
>
<div className={contentStyles.header}>
<span id={titleId}>Modal Popup</span>
<IconButton
styles={iconButtonStyles}
iconProps={cancelIcon}
ariaLabel="Close popup modal"
onClick={ExitHandler}
/>
</div>
<div className={contentStyles.body}>
<div dangerouslySetInnerHTML={{ __html: sanitize(myprops.WhoWeAre) }} />
</div>
</Modal>
</div>
);
};
here is my MyModalPopup.tsx:-
import * as React from 'react';
import { IMyModalPopupProps } from './IMyModalPopupProps';
import { DefaultButton } from '#fluentui/react/lib/Button';
import { MYModal } from './MYModal';
import { MYModal2 } from './MYModal2';
interface IPopupState {
showModal: string;
}
export default class MyModalPopup extends React.Component<IMyModalPopupProps, IPopupState> {
constructor(props: IMyModalPopupProps, state: IPopupState) {
super(props);
this.state = {
showModal: ''
};
this.handler = this.handler.bind(this);
this.Buttonclick = this.Buttonclick.bind(this);
}
handler() {
this.setState({
showModal: ''
})
}
private Buttonclick(e, whichModal) {
e.preventDefault();
this.setState({ showModal: whichModal });
}
public render(): React.ReactElement<IMyModalPopupProps> {
const { showModal } = this.state;
return (
<div>
<DefaultButton onClick={(e) => this.Buttonclick(e, 'our-value')} text="Our Value" />
{ showModal === 'our-value' && <MYModal2 OurValue={this.props.OurValue} myprops={this.state} handler={this.handler} />}
<DefaultButton onClick={(e) => this.Buttonclick(e, 'who-we-are')} text="Who We Are" />
{ showModal === 'who-we-are' && <MYModal WhoWeAre={this.props.WhoWeAre} myprops={this.state} handler={this.handler} />}
</div>
);
}
}
It seems there is double "dist" in the URL you have. You need to remove one somehow:
.../sp-property-pane/dist/dist/sp-property-pane_en/...
It seems to be some project misconfiguration issue. I would recommend you to create a new project, following the steps from the "getting started" official tutorial here:
https://learn.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part
Make sure you have the recommended version of node installed (there is "set up your development environment" chapter, please make sure you follow what is written there).
Related
So I am trying run a react app locally that was originally developed on windows, on my system which is running Ubuntu 18.04. I use npm install --legacy-peer-deps as suggested by the original developer and the run npm start/npm run start. I encounter the following error from a whole bunch of files,
ERROR in ./src/components/ui/Task/Template/ReturnHomeTemplate.js
1:40-111 Module not found: Error: You attempted to import
/home/praneet/SevenHub/node_modules/react-refresh/runtime.js which
falls outside of the project src/ directory. Relative imports outside
of src/ are not supported. You can either move it inside src/, or add
a symlink to it from project's node_modules/.
In most of the files, the first line is
import React from "react";
and in some files it's not even that. Apparently the app does not use react-refresh explicitly anywhere.
There are warnings with npm install, but I was told that I can safely ignore them and don't have to audit fix them (I am new to react so I am not sure). I have tried reinstalling various node versions, removing node_modules and package-lock.json but am still unsuccessful in resolving the issue. Any pointers on this would be great, and happy to provide more information if necessary.
A few files where the error is thrown from for reference:
Index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";
import Header from "./components/ui/Header";
import { WorldProvider } from "./components/ui/ToolContext";
import { ROSProvider } from "./components/RosContext";
import { DndProvider } from "react-dnd";
import { HTML5Backend } from "react-dnd-html5-backend";
import UniversMap from "./components/ui/UniversMap/UniversMap";
import { Login } from "./components/ui/Login/Login";
import { FormantProvider } from "#formant/ui-sdk";
ReactDOM.render(
<WorldProvider>
<DndProvider backend={HTML5Backend}>
{/* <Login /> */}
<FormantProvider>
<App />
</FormantProvider>
</DndProvider>
</WorldProvider>,
document.getElementById("root")
);
Navigation.js
import React from "react";
import LiveTvSharpIcon from "#material-ui/icons/LiveTvSharp";
import EditSharpIcon from "#material-ui/icons/EditSharp";
import BorderHorizontalSharpIcon from "#material-ui/icons/BorderHorizontalSharp";
import StreetViewSharpIcon from "#material-ui/icons/StreetviewSharp";
import EqualizerSharpIcon from "#material-ui/icons/EqualizerSharp";
import ListAltSharpIcon from "#material-ui/icons/ListAltSharp";
import TodayOutlinedIcon from "#material-ui/icons/TodayOutlined";
import robotIcon from "../../assets/robotlogo.png";
import MapOutlinedIcon from "#material-ui/icons/MapOutlined";
import TaskItem from "./Taskitem";
import TaskTabs from "./../ui/TaskTabs";
import RobotList from "./Robots/RobotList";
import { userDemoData } from "./User/Users";
import Users from "./User/Users";
const routes = [
"/dashboard",
"/robots",
"/maps",
"/tasks",
"/users",
"/settings",
"/newmap",
];
const taskTabs = [{ id: 1 }];
const dashboardMappings = {
Live: <LiveTvSharpIcon />,
Layout: <EditSharpIcon />,
test: <EditSharpIcon />,
Zones: <BorderHorizontalSharpIcon />,
Streams: <StreetViewSharpIcon />,
Stats: <EqualizerSharpIcon />,
Logs: <ListAltSharpIcon />,
};
const taskList = [
{ id: 1, task: "sort", user: "A" },
{ id: 2, task: "Collaboration", user: "B" },
{ id: 3, task: "queue", user: "C" },
];
const robotList = [
{ id: 1, name: "Robot1" },
{ id: 2, name: "Robot2" },
];
const drawerMappings = {
dashboard: dashboardMappings,
robots: {
list: [<RobotList />],
icon: <img src={robotIcon} style={{ maxWidth: "24px" }} />,
active: [],
},
maps: {
list: ["Map1", "Map2", "Map3", "Map4"],
icon: <MapOutlinedIcon />,
active: [],
},
tasks: {
list: [<TaskTabs />], //taskTabs.map((item) => <TaskTabs />),
active: [],
},
// tasks: {
// list: taskList.map((item) => (
// <TaskItem task={item.task} id={item.id} user={item.user} />
// )),
// icon: <TodayOutlinedIcon />,
// disabled: true,
// active: [],
// },
users: {
list: [<Users />],
icon: <MapOutlinedIcon />,
active: [],
},
};
export { routes, dashboardMappings, drawerMappings, robotList };
It's hard to provide you with a proper solution, but we can investigate. Try these 3 things:
I) Reinstall node.
Remove node_modules, package-lock.json, yarn.lock (if you have it) from your project. Clear cache (npm cache clean --force).
Completely remove node from your computer (How to completely remove node.js from Windows).
Install node. Try the one that you have now (I may assume that the problem is not related to the node version).
Install packages in your project.
II) Issue with the path
Remove the line import robotIcon from "../../assets/robotlogo.png";. The error is related to importing the data outside of ./src directory, maybe the issue is here. If the number of errors will decrease, please, let me know.
III) Replace:
ReactDOM.render(
<WorldProvider>
<DndProvider backend={HTML5Backend}>
{/* <Login /> */}
<FormantProvider>
<App />
</FormantProvider>
</DndProvider>
</WorldProvider>,
document.getElementById("root")
);
with
ReactDOM.render(
<div>text</div>,
document.getElementById("root")
);
If the errors are left, provide the list. If the errors disappeared, try:
ReactDOM.render(
<WorldProvider>
<DndProvider backend={HTML5Backend}>
<FormantProvider>
<div>text</div>
</FormantProvider>
</DndProvider>
</WorldProvider>,
document.getElementById("root")
);
Removing the parts of the code, you will localize the error(s).
Also:
Provide the contents of the files where the errors appear (UniversMap.tsx, UserDetails.js, etc). So far, just index.js and Navigation.js are provided, they don't have the errors following your screenshot and they are less useful rather than files with the errors.
Text of all errors including the details provided with the number of the errors (not on a screenshot, but in a text format).
Excuse me, please, I am just learning. In some gatsby templates I can insert as Image - an image from a URL and in some templates Image don't want to display it.
What does it depend on and how to edit the code to make the url work? (My knowledge about graphql is rather basic)
this is the code for the blog template:
/** #jsx jsx */
import { jsx } from 'theme-ui'
import { Link, graphql } from "gatsby"
import Img from "gatsby-image"
import { RiArrowRightLine, RiArrowLeftLine } from "react-icons/ri"
import Layout from "../components/layout"
import SEO from '../components/seo';
const styles = {
'article blockquote': {
'background-color': 'cardBg'
},
pagination: {
'a': {
color: 'muted',
'&.is-active': {
color: 'text'
},
'&:hover': {
color: 'text'
}
}
}
}
const Pagination = (props) => (
<div
className="pagination -post"
sx={styles.pagination}
>
<ul>
{(props.previous && props.previous.frontmatter.template === 'blog-post') && (
<li>
<Link to={props.previous.frontmatter.slug} rel="prev">
<p
sx={{
color: 'muted'
}}
>
<span className="icon -left"><RiArrowLeftLine/></span> Previous</p>
<span className="page-title">{props.previous.frontmatter.title}</span>
</Link>
</li>
)}
{(props.next && props.next.frontmatter.template === 'blog-post') && (
<li>
<Link to={props.next.frontmatter.slug} rel="next">
<p
sx={{
color: 'muted'
}}
>Next <span className="icon -right"><RiArrowRightLine/></span></p>
<span className="page-title">{props.next.frontmatter.title}</span>
</Link>
</li>
)}
</ul>
</div>
)
const Post = ({ data, pageContext }) => {
const { markdownRemark } = data // data.markdownRemark holds your post data
const { frontmatter, html, excerpt } = markdownRemark
const Image = frontmatter.featuredImage ? frontmatter.featuredImage.childImageSharp.fluid : ""
const { previous, next } = pageContext
let props = {
previous,
next
}
return (
<Layout className="page">
<SEO
title={frontmatter.title}
description={frontmatter.description ? frontmatter.description : excerpt}
image={Image}
article={true}
/>
<article className="blog-post">
<header className="featured-banner">
<section className="article-header">
<h1>{frontmatter.title}</h1>
<time>{frontmatter.date}</time>
</section>
{Image ? (
<Img
fluid={Image}
objectFit="cover"
objectPosition="50% 50%"
alt={frontmatter.title + ' - Featured image'}
className="featured-image"
/>
) : ""}
</header>
<div
className="blog-post-content"
dangerouslySetInnerHTML={{ __html: html }}
/>
</article>
{(previous || next) && (
<Pagination {...props} />
)}
</Layout>
)
}
export default Post
export const pageQuery = graphql`
query BlogPostQuery($id: String!) {
markdownRemark(
id: { eq: $id }
) {
id
html
excerpt(pruneLength: 148)
frontmatter {
date(formatString: "MMMM DD, YYYY")
slug
title
description
featuredImage {
childImageSharp {
fluid(maxWidth: 1980, maxHeight: 768, quality: 80, srcSetBreakpoints: [350, 700, 1050, 1400]) {
...GatsbyImageSharpFluid
...GatsbyImageSharpFluidLimitPresentationSize
}
sizes {
src
}
}
}
}
}
}
`
typical post:
---
template: blog-post
title: my title
slug: /plant/bud
date: 2020-05-13 12:37
description: abc
featuredImage: /assets/screen-post-hixmjdah9xhoo-unsplash.jpg (but online image from imgurl png doesnt work)
---
post nr 1
edited ///
plugins: [
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/static/assets/`,
name: `assets`,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/src/content/`,
name: `content`,
},
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
{
resolve: `gatsby-transformer-remark`,
options: {
gfm: true,
plugins: [
netlifyCmsPaths,
`gatsby-remark-reading-time`,
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 1024,
showCaptions: true,
linkImagesToOriginal: false,
tracedSVG: true,
loading: "lazy",
},
},
`gatsby-remark-responsive-iframe`,
{
resolve: `gatsby-remark-prismjs`,
options: {
classPrefix: "language-",
inlineCodeMarker: null,
aliases: {},
showLineNumbers: false,
noInlineHighlight: false,
// By default the HTML entities <>&'" are escaped.
// Add additional HTML escapes by providing a mapping
// of HTML entities and their escape value IE: { '}': '{' }
escapeEntities: {},
},
},
],
},
},
In Gatsby, you can insert images from external sources using the standard HTML <img> tag with the src property:
<img src="https://via.placeholder.com/150" alt="Alt text" width="500" height="600">
If you want to keep the benefits of gatsby-image across the external (or online) images, you should need to use some dependencies to achieve lazy loading and other features.
However, to use gatsby-image you need to allow Gatsby and the inferred GraphQL schema to use their transformers (gatsby-transformer-sharp and sharps (gatsby-plugin-sharp) across with the filesystem (gatsby-source-filesystem) or in other words, Gatsby needs to have access to the images that needs to parse to create a valid queryable GraphQL schema, that will be consumed with the gatsby-image.
In addition, you need to specify the folder of your project where those images belong (setting the filesystem):
const path = require(`path`)
module.exports = {
plugins: [
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: path.join(__dirname, `src`, `images`),
},
},
`gatsby-plugin-sharp`,
`gatsby-transformer-sharp`,
],
}
Once the filesystem is set and the images are processed, a GraphQL node is created, and you are allowed to use the fragments like the one you've provided:
featuredImage {
childImageSharp {
fluid(maxWidth: 1980, maxHeight: 768, quality: 80, srcSetBreakpoints: [350, 700, 1050, 1400]) {
...GatsbyImageSharpFluid
...GatsbyImageSharpFluidLimitPresentationSize
}
sizes {
src
}
}
}
Since the external images can't be directly processed by Gatsby, they can't be used with gatsby-image. Depending on the source of those images, some plugins allow you to keep using gatsby-image from external sources (usually from CMSs like Contentful and others).
You can check for further documentation in Working with images docs.
Update (01/06/2021)
In the last Gatsby version (v2.30) they've added a new experimental feature, still in beta to support external images in a <StaticImage> component. To enable it, just upgrade to the latest Gatsby version (via npm or yarn) and add the following flags in your running scripts:
GATSBY_EXPERIMENTAL_REMOTE_IMAGES=1 gatsby develop
GATSBY_EXPERIMENTAL_REMOTE_IMAGES=1 gatsby build
You can then pass absolute URLs to StaticImage:
<StaticImage src="https://placekitten.com/400/400" alt="Kittin" />
I am trying to get started on running tests on my create-react-app project. I keep getting this error 'Cannot find module 'react-dom' from 'reactBatchedUpdates.js'.
I tried editing package.json by pasting this code into it.
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx,ts,tsx}",
"!<rootDir>/node_modules/",
"!<rootDir>/path/to/dir/"
],
"coverageThreshold": {
"global": {
"branches": 90,
"functions": 90,
"lines": 90,
"statements": 90
}
},
"coverageReporters": ["text"],
"snapshotSerializers": ["my-serializer-module"]
}
I assume that react-dom cannot be imported correctly for whatever reason?
const Header = ({clicked, open}) => {
return (
<div className="Header__Wrapper">
<DrawerToggleButton clicked={clicked} open={open} />
<SubHeader subHeadClass={'Header__Left'} urls={URLS.slice(0, 2)} />
<div className="Logo">
<Lock />
</div>
<SubHeader subHeadClass={'Header__Right'} urls={URLS.slice(2)} />
<LogInButton className="right LogInButton__Wrapper"/>
</div>
);
};
export default Header;
Here is the test code, simple rendering of my presentational header. I am starting to realize it is the way I am wrapping redux and react-router-dom over my component. I think that is my main issue at the moment. I am rather rusty on the inner workings of redux and react-router-dom. I tried following the example in this post redux and react-router-dom wrapping but I am rather unsuccessful.
import React from 'react'
import '#testing-library/jest-dom/extend-expect'
import { render } from '#testing-library/react'
import { createStore } from 'redux'
import {NAVIGATE_PAGES, SAVE_ROUTE} from '../../../../actions/types';
import SubHeader from '../SubHeader';
import Navigate from '../../../../actions/index';
const INITIAL_STATE = {
page: null,
route: null,
};
function reducer(state = INITIAL_STATE, action){
switch (action.type) {
case NAVIGATE_PAGES: {
return {...state, page: action.payload};
}
case SAVE_ROUTE: {
return {...state, route: action.payload};
}
default:
return state;
}
};
function renderWithRouter(
ui,
{
route = '/',
history = createMemoryHistory({ initialEntries: [route] }),
initialState, store = createStore(reducer, initialState) ,
} = {}
) {
return {
...render(<Provider store={store}><Router history={history}>{ui}</Router></Provider>),
// adding `history` to the returned utilities to allow us
// to reference it in our tests (just try to avoid using
// this to test implementation details).
history,
}
}
test('it renders lock', async () => {
const store = createStore(() => ({ reducer: reducer ,initialState:INITIAL_STATE}))
renderWithRouter(<SubHeader/>,{store,});
})
I am just trying to render a simple presentational Navbar component.
However I keep getting the error below.
● Test suite failed to run
Cannot find module 'react-dom' from 'reactBatchedUpdates.js'
However, Jest was able to find:
'utils/reactBatchedUpdates.js'
'utils/reactBatchedUpdates.native.js'
You might want to include a file extension in your import, or update your 'moduleFileExtensions', which is currently ['web.js', 'js', 'web.ts', 'ts', 'web.tsx', 'tsx', 'json', 'web.jsx', 'jsx', 'node'].
However, Jest was able to find:
'../Login/LogInButton.js'
I have thoroughly followed the instructions in the following guides:
Get Started with ag-Grid in Your Angular Project
Angular Webpack 3
My app.module.ts includes:
import { AgGridModule } from 'ag-grid-angular';
...
#NgModule({
imports: [
...,
AgGridModule.withComponents([])
]
})
In vendor.css
#import "~ag-grid-community/dist/styles/ag-grid.css";
#import "~ag-grid-community/dist/styles/ag-theme-balham.css";
In the home.component.ts:
import { Component, OnInit } from '#angular/core';
import {GridOptions} from 'ag-grid-community';
#Component({
selector: 'jhi-home',
templateUrl: './home.component.html',
styleUrls: ['home.css']
})
export class HomeComponent implements OnInit {
private gridOptions: GridOptions;
public rowData: any[];
private columnDefs: any[];
constructor(
private accountService: AccountService,
private loginModalService: LoginModalService,
private eventManager: JhiEventManager
) {
this.gridOptions = <GridOptions>{
onGridReady: () => {
this.gridOptions.api.sizeColumnsToFit();
}
};
this.columnDefs = [
{headerName: 'Make', field: 'make'},
{headerName: 'Model', field: 'model'},
{headerName: 'Price', field: 'price'}
];
this.rowData = [
{make: 'Toyota', model: 'Celica', price: 35000},
{make: 'Ford', model: 'Mondeo', price: 32000},
{make: 'Porsche', model: 'Boxter', price: 72000}
];
}
ngOnInit() {
}
}
Eventually in the template I added the component:
<ag-grid-angular #agGrid style="width: 500px; height: 300px;"
[gridOptions]="gridOptions"
[columnDefs]="columnDefs"
[rowData]="rowData">
</ag-grid-angular>
Although there are no errors at build, the grid will not render. That is the way my HTML looks after compilation:
I presume there may be an incompatibility between Angular 7/Webpack 4/the way Jhipster loads the app and ag-grid-angular.
Would you suggest any solution? Thank you!
You should import the AgGridModule on each one of your 'entities' apps modules, not on your main apps.module.ts.
I have the following app structure:
I want my application where each page like "Create.cshtml" will
bootstrap(Scripts/app/project/create/app.projects.create-boot.ts)
and
load the application (/app.projects.create.ts).
I also have a models folder which will hold all my models and will be shared.
serviceline.js(Scripts/models/serviceline.ts)
app.projects.create-boot.ts:
/// <reference path="../../../../node_modules/angular2/typings/browser.d.ts" />
import {bootstrap} from 'angular2/platform/browser'
import {AppProjectsCreateComponent} from './app.projects.create'
import {ServiceLine} from '../../../models/serviceline';
bootstrap(AppProjectsCreateComponent, [ServiceLine]);
app.projects.create.ts:
import {Component} from 'angular2/core';
import {ServiceLine} from '../../../models/serviceline';
#Component({
selector: 'project-create',
templateUrl: '../../appScripts/app/projects/create/app.projects.create.html'
})
export class AppProjectsCreateComponent {
name = "max";
serviceLines: ServiceLine[];
constructor() {
//this.serviceLines = [ new ServiceLine(1, "Name Test") ];
}
}
serviceLine.ts
export class ServiceLine {
ServiceLineId: number;
Name: string
constructor(serviceLineId: number, name: string) {
this.ServiceLineId = serviceLineId;
this.Name = name;
}
}
Create.cshtml:
#*
For more information on enabling MVC for empty projects, visit http://go.microsoft.com/fwlink/?LinkID=397860
*#
#section head{
<script src="~/lib/es6-shim.min.js"></script>
<script src="~/lib/system-polyfills.js"></script>
<script src="~/lib/shims_for_IE.js"></script>
<script src="~/lib/angular2-polyfills.js"></script>
<script src="~/lib/system.js"></script>
<script src="~/lib/rx.js"></script>
<script src="~/lib/angular2.dev.js"></script>
<!-- 2. Configure SystemJS -->
}
#{
<script>
System.config({
map: {
appScripts: '../appScripts/app/projects/create'
},
packages: {
appScripts: {
defaultExtension: 'js'
}
}
});
System.import('appScripts/app.projects.create-boot')
.then(null, console.error.bind(console));
</script>
}
<br />
<project-create></project-create>
Everything was loading find until I added ServiceLine[] in the app.projects.create.ts file.
Here is the error:
What am I missing? Why can't Angular find the serviceLine.js.
Edit: Change the map field.
<script>
System.config({
map: {
appScripts: '../appScripts' //Change Here
},
packages: {
appScripts: {
defaultExtension: 'js'
}
}
});
System.import('appScripts/app/projects/create/app.projects.create-boot') //Change Here
.then(null, console.error.bind(console));
</script>
The problem is that your service file isn't targetted with your SystemJS configuration because of the map block.
So SystemJS doesn't append the JS extension. I would remove the map block:
<script>
System.config({
/* map: {
appScripts: '../appScripts/app/projects/create'
}, */
packages: {
appScripts: {
defaultExtension: 'js'
}
}
});
System.import('appScripts/app/projects/create/app.projects.create-boot')
.then(null, console.error.bind(console));
</script>
and update accordingly the path in your imports.
With this configuration the "model" will be token into account. Your configuration would only work if your "model" folder was under the "create" one.