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

0
votes

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>
2
node.jsangular

2 Answers

3
votes

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
1
votes

This is because you are not mapping @angular/forms in the system.config.js, follow the steps

npm install @angular/forms

now the dependency is installed in the node_modules folder then in the system.config.js

  map: {
    '@angular/core': 'unpkg:@angular/core@'+angularVersion,
    '@angular/compiler': 'unpkg:@angular/compiler@'+angularVersion,
    '@angular/common': 'unpkg:@angular/common@'+angularVersion,
    '@angular/platform-browser': 'unpkg:@angular/platform-browser@'+angularVersion,
    '@angular/platform-browser-dynamic': 'unpkg:@angular/platform-browser-dynamic@'+angularVersion,
    'rxjs': 'unpkg:[email protected]',
    'zone.js': 'unpkg:[email protected]',
    'reflect-metadata': 'unpkg:[email protected]',
    "crypto": "@empty",
    "@angular/forms": "node_modules/@angular/forms/bundles/forms.umd.js"

  },

See the last mapping "@angular/forms": "node_modules/@angular/forms/bundles/forms.umd.js"

Now everything should work.