How to Deploy Angular App with Local Library with Redux

Question

We are developing an angular library that we publish to a private repo. We run a local web application to test the library in development. We publish the library as well.

When I build the application using ng build, the result dist version fails to run.

My file structure is:

./projects/my-library
./src

My CI build process is:

npm ci
npm run build // Creates dist/my-library
ng build --base-href '/test' --configuration=test --output-path=./dist/test

I end up with a dist directory:

./dist/my-library
./dist/test

The index.html file in ./dist/test is

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Another App</title>
    <base href="/test" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <link rel="stylesheet" href="styles.2bf96ac9aaebbaa03e0c.css" />
  </head>

  <body>
    <app-root></app-root>
    <script type="text/javascript" src="runtime.17ac16aaa641f7087ac1.js"></script>
    <script type="text/javascript" src="polyfills.d1c7bf4a2ae7c3435f95.js"></script>
    <script type="text/javascript" src="main.08b6c456c92aa092bef8.js"></script>
  </body>
</html>

To make sure this works, I am running http-server to test my application:

http-server ./dist/test

Here's my issue. The application is asking me if I forgot to configure my store? I do not understand because this only happens when I run the dist version of the application.

Here's the error:

ERROR Error: Uncaught (in promise): Error: Dispatch failed: did you forget to configure your store? https://github.com/angular-redux/@angular-redux/core/blob/master/README.md#quick-start
Error: Dispatch failed: did you forget to configure your store? https://github.com/angular-redux/@angular-redux/core/blob/master/README.md#quick-start
    at Object.e.assert (4.131ee1951f9b1e86a9da.js:1)
    at e.n.dispatch (4.131ee1951f9b1e86a9da.js:1)
    at new <anonymous> (4.131ee1951f9b1e86a9da.js:1)
    at main.08b6c456c92aa092bef8.js:1
    at Wd (main.08b6c456c92aa092bef8.js:1)
    at main.08b6c456c92aa092bef8.js:1
    at new t (main.08b6c456c92aa092bef8.js:1)
    at gh (main.08b6c456c92aa092bef8.js:1)
    at Object.Ay [as createNgModuleRef] (main.08b6c456c92aa092bef8.js:1)
    at e.create (main.08b6c456c92aa092bef8.js:1)
    at O (polyfills.d1c7bf4a2ae7c3435f95.js:1)
    at O (polyfills.d1c7bf4a2ae7c3435f95.js:1)
    at polyfills.d1c7bf4a2ae7c3435f95.js:1
    at e.invokeTask (polyfills.d1c7bf4a2ae7c3435f95.js:1)
    at Object.onInvokeTask (main.08b6c456c92aa092bef8.js:1)
    at e.invokeTask (polyfills.d1c7bf4a2ae7c3435f95.js:1)
    at t.runTask (polyfills.d1c7bf4a2ae7c3435f95.js:1)
    at v (polyfills.d1c7bf4a2ae7c3435f95.js:1)

It is definitely @angular-redux/store causing this issue. I deleted the directory dist/my-library and I am getting the same error. Angular was able to build the application with the local library, but the local library is failing with the Redux store, which is @angular-redux/store.

How to Deploy Angular App with Local Library with Redux

0 Answers0