Angular-cli: @angular/forms 404 (Not Found)

[maliq]

SO.
Mac OSX (El Capitan)
Versions.
angular-cli: 1.0.0-beta.8
node: 5.9.1
os: darwin x64

Repro steps. Was this an app that wasn't created using the CLI? What change did you
do on your code? etc.

Update to angular cli 1.0.0-beta.8 and follow the upgrade sequence (https://github.com/angular/angular-cli#updating-angular-cli)

Based in guide https://angular.io/docs/ts/latest/cookbook/dynamic-form.html disable old form and enable new one. In main.ts add import and load forms like show below:

import { disableDeprecatedForms, provideForms } from '@angular/forms';

if (environment.production) {
  enableProdMode();
}

bootstrap(AppComponent, [.., disableDeprecatedForms(), provideForms()]);

The log given by the failure. Normally this include a stack trace and some
more information.

error output:

GET http://localhost:4200/vendor/@angular/forms 404 (Not Found)
Unhandled Promise rejection: Error: XHR error (404 Not Found) loading http://localhost:4200/vendor/@angular/forms
at XMLHttpRequest.wrapFn as _onreadystatechange
at ZoneDelegate.invokeTask (http://localhost:4200/vendor/zone.js/dist/zone.js:356:38)
at Zone.runTask (http://localhost:4200/vendor/zone.js/dist/zone.js:256:48)
at XMLHttpRequest.ZoneTask.invoke (http://localhost:4200/vendor/zone.js/dist/zone.js:423:34)
Error loading http://localhost:4200/vendor/@angular/forms as "@angular/forms" from http://localhost:4200/main.js ; Zone: ; Task: Promise.then ; Value: Error: Error: XHR error (404 Not Found) loading http://localhost:4200/vendor/@angular/forms(…)
Error: Uncaught (in promise): Error: Error: XHR error (404 Not Found) loading http://localhost:4200/vendor/@angular/forms(…)

Mention any other details that might be useful.

Solution: add '@angular/forms' to "Angular specific barrels." in system-config.ts and fixed.

..
const barrels: string[] = [
  // Angular specific barrels.
  '@angular/core',
  '@angular/common',
  '@angular/compiler',
  '@angular/forms', // added
  '@angular/http',
  '@angular/router',
  '@angular/platform-browser',
  '@angular/platform-browser-dynamic',
..

[aferlazzo]

i'm having the same problem.

---

from Chrome dev tools console:

stats.js:100Font Awesome CDN reporting has been enabled
zone.js:101 GET http://localhost:4200/vendor/@angular/forms 404 (Not Found)scheduleTask @ zone.js:101ZoneDelegate.scheduleTask @ zone.js:336Zone.scheduleMacroTask @ zone.js:273(anonymous function) @ zone.js:122send @ VM27928:3fetchTextFromURL @ system.src.js:1154(anonymous function) @ system.src.js:1735ZoneAwarePromise @ zone.js:584(anonymous function) @ system.src.js:1734(anonymous function) @ system.src.js:2759(anonymous function) @ system.src.js:3333(anonymous function) @ system.src.js:3600(anonymous function) @ system.src.js:3985(anonymous function) @ system.src.js:4448(anonymous function) @ system.src.js:4700(anonymous function) @ system.src.js:406ZoneDelegate.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:461 Unhandled Promise rejection: Error: XHR error (404 Not Found) loading http://localhost:4200/vendor/@angular/forms
at XMLHttpRequest.wrapFn as _onreadystatechange
at ZoneDelegate.invokeTask (http://localhost:4200/vendor/zone.js/dist/zone.js:356:38)
at Zone.runTask (http://localhost:4200/vendor/zone.js/dist/zone.js:256:48)
at XMLHttpRequest.ZoneTask.invoke (http://localhost:4200/vendor/zone.js/dist/zone.js:423:34)
Error loading http://localhost:4200/vendor/@angular/forms as "@angular/forms" from http://localhost:4200/app/+modify/modify.component.js ; Zone: ; Task: Promise.then ; Value: Error: Error: XHR error (404 Not Found) loading http://localhost:4200/vendor/@angular/forms(…)consoleError @ zone.js:461_loop_1 @ zone.js:490drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426
zone.js:463 Error: Uncaught (in promise): Error: Error: XHR error (404 Not Found) loading http://localhost:4200/vendor/@angular/forms(…)/

---

Running Windows 10

---

C:\wamp\www\angular2-demo>ng version
(node:12516) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
angular-cli: 1.0.0-beta.8
node: 6.2.1
os: win32 x64

---

package.json

{
"name": "angular2-demo",
"version": "0.0.0",
"license": "MIT",
"angular-cli": {},
"scripts": {
"start": "ng serve",
"postinstall": "typings install",
"lint": "tslint \"src/*_/_.ts\"",
"test": "ng test",
"pree2e": "webdriver-manager update",
"e2e": "protractor"
},
"private": true,
"dependencies": {
"@angular/common": "2.0.0-rc.3",
"@angular/compiler": "2.0.0-rc.3",
"@angular/core": "2.0.0-rc.3",
"@angular/forms": "0.1.1",
"@angular/http": "2.0.0-rc.3",
"@angular/platform-browser": "2.0.0-rc.3",
"@angular/platform-browser-dynamic": "2.0.0-rc.3",
"@angular/router": "3.0.0-alpha.7",
"es6-shim": "0.35.1",
"reflect-metadata": "0.1.3",
"rxjs": "5.0.0-beta.6",
"systemjs": "0.19.26",
"zone.js": "0.6.12"
},
"devDependencies": {
"angular-cli": "1.0.0-beta.8",
"codelyzer": "0.0.20",
"ember-cli-inject-live-reload": "1.4.0",
"jasmine-core": "2.4.1",
"jasmine-spec-reporter": "2.5.0",
"karma": "0.13.22",
"karma-chrome-launcher": "0.2.3",
"karma-jasmine": "0.3.8",
"protractor": "3.3.0",
"ts-node": "0.5.5",
"tslint": "3.11.0",
"typescript": "1.8.10",
"typings": "0.8.1"
}
}

[maliq]

Did you try to add @angular/forms's barrel to system-config.ts? That's work for me.

[aferlazzo]

No, I did not. I was trying to use angular-cli, and that seems to have been a mistake because angular-cli is controlling the system-config.js file, I'll go back and create a webpack project and try it from there. Thanks for your help.

[maliq]

Is a bug when added @angular/forms to packages, but you can modify system-config.js like shows https://github.com/angular/angular-cli/wiki/3rd-party-libs when you have to use another library or in this case when they omite that new library.
Regards!.

[baruchvlz]

@maliq I'm fairly new to Angular2 and the CLI, so correct me if I'm wrong, but wouldn't adding @angular/forms to the package.json (#1200 ) file fix this issue for new installs of the CLI? I ask, cause I installed it today for the first time and I ran into this issue. Also, i managed to fix it by adding it to the barrels manually in the system-config.ts file like so:

const barrels: string[] = [
  // Angular specific barrels.
  '@angular/core',
  '@angular/common',
  '@angular/compiler',
  '@angular/forms', // Added forms 
  '@angular/http',
  '@angular/router',
  '@angular/platform-browser',
  '@angular/platform-browser-dynamic',

  ...
];

Before I did that, I was following the 3rd Party Libs installation guide. In the guide it says to add the library to the vendorNpmFiles array in the angular-cli-builds.js file, but inside the array there's this '@angular/**/*.+(js|js.map)'. My question now is, wouldn't that take care of adding Angular2 libraries to the @angular folder?

[maliq]

Angular Cli has many parts to add a new js library.

First one, package.json just manages npm dependencies. That downloads given dependencies and put into node_modules directory.

Second one angular-cli-builds.js allows maps any js dependency in node_modules directory to a public web directory vendor, that gives visibility from web app, otherwise you can't invoke i.e.:<script src="/vendor/jquery/dist/jquery.min.js" type="text/javascript"></script> if you have jquery into your package.json.

Until now you can work fine with any 3rd Party Libs that don't use any angular component, but if your js library has an angular component/directive/service/wherever that invoke into your angular app you also have to map using system-config.ts otherwise that don't have visibility into angular scope.

Now your question: declaration into angular-cli-builds.js just give web app visibility (you can insert in html code) but not angular scope that gives using barrels in system-config.ts. This issue happened when you import from form package:
import { disableDeprecatedForms, provideForms } from '@angular/forms';

I hope you can understand with that explanation :)

[filipesilva]

Fixed in https://github.com/angular/angular-cli/pull/1200, thanks @maliq!

[gauree]

I am having a similar issue of 404 but i cannot see any constant named barrels in system.config.js file

[maliq]

Can you post your system.config.js file and your AngularCLI version please.

[gauree]

I am not using angular cli actually ,sorry I should have mentioned that at
first to save your time .

On Mon, Jul 11, 2016 at 6:43 PM, Marcelo Aliquintuy <
[email protected]> wrote:

Can you post your system.config.js file and your AngularCLI version please.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/angular/angular-cli/issues/1199#issuecomment-231730093,
or mute the thread
https://github.com/notifications/unsubscribe/AEt78s8JJ0WbV2bxvdm1tLsh8ZEHjoneks5qUkGKgaJpZM4I-A_j
.

[gauree]

Hi ,

I have created angular 2 project using yeoman framework .

Regards,
Gauri

On Tue, Jul 12, 2016 at 12:23 PM, Gauri Desai [email protected] wrote:

I am not using angular cli actually ,sorry I should have mentioned that at
first to save your time .

On Mon, Jul 11, 2016 at 6:43 PM, Marcelo Aliquintuy <
[email protected]> wrote:

Can you post your system.config.js file and your AngularCLI version
please.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/angular/angular-cli/issues/1199#issuecomment-231730093,
or mute the thread
https://github.com/notifications/unsubscribe/AEt78s8JJ0WbV2bxvdm1tLsh8ZEHjoneks5qUkGKgaJpZM4I-A_j
.

[maliq]

Sorry I can't help soo much, that depends of yeoman's generator that you used. Angular needs some bootstraping method to initialize application. Angular CLI uses system-config.js called from index.html, in your case I don't know how initialize.

[gauree]

Thanks you for your quick reply , I resolved it ,a similar file named
systemjs.config.js exists in src folder which is mentioned in index.html
and a constant named ngPackageNames is also declared .I added forms to it
and resolved this error
var ngPackageNames = [
'common',
'compiler',
'core',
'http',
'platform-browser',
'platform-browser-dynamic',
'router',
'router-deprecated',
'upgrade',
'forms'
];

On Tue, Jul 12, 2016 at 7:06 PM, Marcelo Aliquintuy <
[email protected]> wrote:

Sorry I can't help soo much, that depends of yeoman's generator that you
used. Angular needs some bootstraping method to initialize application.
Angular CLI uses system-config.js called from index.html, in your case I
don't know how initialize.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/angular/angular-cli/issues/1199#issuecomment-232049079,
or mute the thread
https://github.com/notifications/unsubscribe/AEt78kf8QjCAf3FX7EhtMaqTi8P128PJks5qU5hUgaJpZM4I-A_j
.

[moumoune]

Thx @gauree , it's work great !

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}