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

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: <root> ; 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',
..

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 8
Comments: 15 (7 by maintainers)

Commits related to this issue

added @angular/forms in system-config.ts #1199 Fix angular/form nor found, issue #1199 — committed to maliq/angular-cli by maliq 8 years ago
added @angular/forms in system-config.ts #1199 (#1200) * added @angular/forms in system-config.ts #1199 * upgrade @angular/forms dependency to 0.2.0 — committed to angular/angular-cli by maliq 8 years ago

Most upvoted comments

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

+10

maliq on Jun 30, 2016

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 😃

maliq on Jul 2, 2016