docs(localize): improve docs on the installation of the `@angular/localize` package

Which @angular/* package(s) are the source of the bug?

language-service, localize

Is this a regression?

Yes

Description

I am trying to use the @angular/localize package to locate my angular application, but angular does not recognize that the package is installed. I installed it using the angular cli and the cli did not throw any errors.

Polyfills

Package.json

{
  "dependencies": {
    "@angular/localize": "^13.1.1",
  }
}

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

ERROR Error: It looks like your application or one of its dependencies is using i18n.
Angular 9 introduced a global `$localize()` function that needs to be loaded.

Please run `ng add @angular/localize` from the Angular CLI.

(For non-CLI projects, add `import '@angular/localize/init';` to your `polyfills.ts` file.

For server-side rendering applications add the import to your `main.server.ts` file.)

    at eval (https://angular.csb.app/node_modules/@angular/core/fesm2015/core.js:21599:11)

    at new AppComponent (https://angular.csb.app/src/app/app.component.ts:8:32)

    at createClass (https://angular.csb.app/node_modules/@angular/core/fesm2015/core.js:16014:14)

    at createDirectiveInstance (https://angular.csb.app/node_modules/@angular/core/fesm2015/core.js:15899:20)

    at createViewNodes (https://angular.csb.app/node_modules/@angular/core/fesm2015/core.js:20494:30)

    at createRootView (https://angular.csb.app/node_modules/@angular/core/fesm2015/core.js:20397:3)

    at callWithDebugContext (https://angular.csb.app/node_modules/@angular/core/fesm2015/core.js:21288:23)

    at Object.debugCreateRootView [as createRootView] (https://angular.csb.app/node_modules/@angular/core/fesm2015/core.js:20868:10)

    at ComponentFactory_.create (https://angular.csb.app/node_modules/@angular/core/fesm2015/core.js:15510:27)

    at ComponentFactoryBoundToModule.create (https://angular.csb.app/node_modules/@angular/core/fesm2015/core.js:13645:25)

    at ApplicationRef.bootstrap (https://angular.csb.app/node_modules/@angular/core/fesm2015/core.js:18792:38)

    at eval (https://angular.csb.app/node_modules/@angular/core/fesm2015/core.js:18655:58)

    at Array.forEach (<anonymous>)

    at PlatformRef._moduleDoBootstrap (https://angular.csb.app/node_modules/@angular/core/fesm2015/core.js:18655:38)

    at eval (https://angular.csb.app/node_modules/@angular/core/fesm2015/core.js:18642:16)

    at ZoneDelegate.invoke (https://angular.csb.app/node_modules/zone.js/fesm2015/zone.js:368:26)

    at Object.onInvoke (https://angular.csb.app/node_modules/@angular/core/fesm2015/core.js:18242:25)

    at ZoneDelegate.invoke (https://angular.csb.app/node_modules/zone.js/fesm2015/zone.js:367:52)

    at Zone.run (https://angular.csb.app/node_modules/zone.js/fesm2015/zone.js:130:43)

    at eval (https://angular.csb.app/node_modules/zone.js/fesm2015/zone.js:1272:36)

    at ZoneDelegate.invokeTask (https://angular.csb.app/node_modules/zone.js/fesm2015/zone.js:402:31)

    at Object.onInvokeTask (https://angular.csb.app/node_modules/@angular/core/fesm2015/core.js:18231:25)

    at ZoneDelegate.invokeTask (https://angular.csb.app/node_modules/zone.js/fesm2015/zone.js:401:60)

    at Zone.runTask (https://angular.csb.app/node_modules/zone.js/fesm2015/zone.js:174:47)

    at drainMicroTaskQueue (https://angular.csb.app/node_modules/zone.js/fesm2015/zone.js:578:35)

Please provide the environment you discovered this bug in (run ng version)

_                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 13.1.2
Node: 16.11.0
Package Manager: yarn 1.22.5
OS: win32 x64

Angular: 13.1.1
... animations, cdk, common, compiler, compiler-cli, core, forms
... localize, platform-browser, platform-browser-dynamic
... platform-server, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1301.2
@angular-devkit/build-angular   13.1.2
@angular-devkit/core            13.1.2
@angular-devkit/schematics      8.3.29
@angular/cli                    13.1.2
@angular/flex-layout            13.0.0-beta.36
@nguniversal/builders           13.0.1
@nguniversal/express-engine     13.0.1
@schematics/angular             13.1.2
rxjs                            7.4.0
typescript                      4.5.4

Anything else?

I even did what the error says to fix the problem, but it doesn’t work. Also, the angular cli added the @angular/localize package as a development dependency, and I even moved it to the project dependencies but it didn’t work either.

Also, I can compile the application normally and the app works fine, but in development I always get that error and the app stops working, I don’t know what I’m doing wrong.

[gkalpak]

Glad you got it working, @kaname-png 👏

Regarding dependencies vs devDependencies: Good question 😃

It seems that @angular/localize is only needed in dependencies if you plan to use it at runtime (which is not always the case - you can use it for build-time translation only afaict). So, the ng-add schematic will decide whether to put it in dependencies or devDependencies depending on the value of the useAtRuntime option

I think we can at least improve the docs on that. For example, we could add info regarding useAtRuntime in the Add the localize package guide.

I am going to leave this open as a docs improvement request 😃

[kaname-png]

Hi @kaname-png,

Hope you are doing well.

To better understand the problem, can you please list down the steps executed from the beginning ( creating project ) till getting this error?

Thank you.

Never mind, I did a wipe of the node modules folder and the yarn.lock file and the problem was solved, but I still have the question why the angular cli installs the @angular/localize package as a development dependency and not as an application dependency.