Mohammed Mohammed - 4 months ago 101
Node.js Question

Angular2 @angular/forms.js not found after npm install

After installing a new module to my angular2 project, a problem

HOST_VAR = http://localhost:3000 (because of stackoverflow url limitation)

console:


GET HOST_VAR/@angular/forms.js 404 (Not Found)scheduleTask @
zone.js:101ZoneDelegate.scheduleTask @
zone.js:336Zone.scheduleMacroTask @ zone.js:273(anonymous function) @
zone.js:122send @ VM2803:3X @ system.src.js:5105(anonymous function) @
system.src.js:5105ZoneAwarePromise @ zone.js:584(anonymous function) @
system.src.js:5105(anonymous function) @ system.src.js:5105(anonymous
function) @ system.src.js:5105(anonymous function) @
system.src.js:5105(anonymous function) @ system.src.js:5105(anonymous
function) @ system.src.js:5105(anonymous function) @
system.src.js:5105(anonymous function) @
system.src.js:5105ZoneDelegate.invoke @ zone.js:323Zone.run @
zone.js:216(anonymous function) @ zone.js:571ZoneDelegate.invokeTask @
zone.js:356Zone.runTask @ zone.js:256drainMicroTaskQueue @
zone.js:474ZoneTask.invoke @ zone.js:426 zone.js:323 Error: Error: XHR
error (404 Not Found) loading
HOST_VAR/@angular/forms.js(…)ZoneDelegate.invoke @ zone.js:323Zone.run
@ zone.js:216(anonymous function) @ zone.js:571ZoneDelegate.invokeTask
@ zone.js:356Zone.runTask @ zone.js:256drainMicroTaskQueue @
zone.js:474ZoneTask.invoke @ zone.js:426

Error: Error: XHR error (404 Not Found) loading
HOST_VAR/@angular/forms.js(…)ZoneDelegate.invoke @ zone.js:323Zone.run
@ zone.js:216(anonymous function) @ zone.js:571ZoneDelegate.invokeTask
@ zone.js:356Zone.runTask @ zone.js:256drainMicroTaskQueue @
zone.js:474ZoneTask.invoke @ zone.js:426 zone.js:101 GET
HOST_VAR/@angular/forms.js 404 (Not Found)scheduleTask @
zone.js:101ZoneDelegate.scheduleTask @
zone.js:336Zone.scheduleMacroTask @ zone.js:273(anonymous function) @
zone.js:122send @ VM2803:3X @ system.src.js:5105(anonymous function) @
system.src.js:5105ZoneAwarePromise @ zone.js:584(anonymous function) @
system.src.js:5105(anonymous function) @ system.src.js:5105(anonymous
function) @ system.src.js:5105(anonymous function) @
system.src.js:5105(anonymous function) @ system.src.js:5105(anonymous
function) @ system.src.js:5105(anonymous function) @
system.src.js:5105(anonymous function) @
system.src.js:5105ZoneDelegate.invoke @ zone.js:323Zone.run @
zone.js:216(anonymous function) @ zone.js:571ZoneDelegate.invokeTask @
zone.js:356Zone.runTask @ zone.js:256drainMicroTaskQueue @
zone.js:474ZoneTask.invoke @ zone.js:426

zone.js:101 GET HOST_VAR/@angular/forms.js 404 (Not Found)scheduleTask
@ zone.js:101ZoneDelegate.scheduleTask @
zone.js:336Zone.scheduleMacroTask @ zone.js:273(anonymous function) @
zone.js:122send @ VM2803:3X @ system.src.js:5105(anonymous function) @
system.src.js:5105ZoneAwarePromise @ zone.js:584(anonymous function) @
system.src.js:5105(anonymous function) @ system.src.js:5105(anonymous
function) @ system.src.js:5105(anonymous function) @
system.src.js:5105(anonymous function) @ system.src.js:5105(anonymous
function) @ system.src.js:5105(anonymous function) @
system.src.js:5105(anonymous function) @
system.src.js:5105ZoneDelegate.invoke @ zone.js:323Zone.run @
zone.js:216(anonymous function) @ zone.js:571ZoneDelegate.invokeTask @
zone.js:356Zone.runTask @ zone.js:256drainMicroTaskQueue @
zone.js:474ZoneTask.invoke @ zone.js:426





my index.html code:

<html>

<head>
<!--<base href="">-->
<script>document.write('<base href="' + document.location + '" />');</script>
<title></title>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="node_modules/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css">
<link rel="stylesheet" type="text/css" href="node_modules/angular2-toaster/lib/toaster.css" />
<link rel="stylesheet" href="assets/styles/style.css">
<link rel="stylesheet" href="assets/styles/custom.css">
<link rel="stylesheet" href="assets/styles/osp.theme.css">

<!-- 1. Load libraries -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>

<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>

<script src="node_modules/systemjs/dist/system.js"></script>
<script src="node_modules/rxjs/bundles/Rx.min.js"></script>

<script src="node_modules/ng2-bootstrap/bundles/ng2-bootstrap.min.js"></script>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.js"></script>

<!-- 2. Configure SystemJS -->
<script>
System.config({
defaultJSExtensions: true,
packages: {
app: {
format: 'register',
},
rxjs: {
defaultExtension: false
},
},
map: {
"ng2-bootstrap": "node_modules/ng2-bootstrap/ng2-bootstrap.js",
moment: 'node_modules/moment/moment.js',
"@angular/core": "node_modules/@angular/core/bundles/core.umd.js",
"angular2/core": "node_modules/@angular/core/bundles/core.umd.js",
"@angular/router": "node_modules/@angular/router/index.js",
"@angular/router-deprecated": "node_modules/@angular/router-deprecated/router-deprecated.umd.js",
"@angular/common": "node_modules/@angular/common/bundles/common.umd.js",
"@angular/http": "node_modules/@angular/http/bundles/http.umd.js",
"angular2/common": "node_modules/@angular/common/bundles/common.umd.js",
"@angular/compiler": "node_modules/@angular/compiler/bundles/compiler.umd.js",
"@angular/platform-browser": "node_modules/@angular/platform-browser/bundles/platform-browser.umd.js",
"@angular/platform-browser-dynamic": "node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js",
"videogular2": "node_modules/videogular2",
"angular2-localstorage" : "node_modules/angular2-localstorage",
"ng2-ui-auth" : "node_modules/ng2-ui-auth/dist/ng2-ui-auth",
"angular2-toaster/angular2-toaster" : "node_modules/angular2-toaster/angular2-toaster.js",
// ng2-bootstrap specifics
"@angular/core/src/facade/lang": "node_modules/@angular/core/src/facade/lang.js",
// "@angular/platform-browser/src/animate/animation_builder": "node_modules/@angular/platform-browser/src/animate/animation_builder.js"
}
});
System.import('app/boot')
.then(null, console.error.bind(console));
</script>

</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>

</html>

Answer

Try to add forms map to your systemjs config like:

System.config({
   defaultJSExtensions: true,
   packages: {
     app: {
       format: 'register',
     },
     rxjs: {
       defaultExtension: false
     },
   },
   map: {
     ...
     "@angular/forms": "node_modules/@angular/forms/bundles/forms.umd.js", <== this line
Comments